前面的話
在CSS出現之前，table元素常常用來佈局。這種做法在HTML4之後不再推薦使用。而現在有些矯枉過正，使用table展示資料都可能會被說不規範。本文將詳細介紹HTML表格table
table
【預設樣式】
//IE7-瀏覽器不支援border-spacing table{ border-collapse: separate; border-spacing: 2px; border: 1px solid gray; }
【屬性】
1、border(在html5中，border只能為"1"或" ")(html5已廢棄)
border="0"//沒有邊框 border="8"//8畫素寬的邊框
2、cellpadding(px/%)(html5已廢棄)
規定單元邊界與單元內容之間的間距
3、cellspacing(px/%)(html5已廢棄)
規定單元格之間的間距
4、summary(html5已廢棄)
表格內容的摘要
5、width(html5已廢棄)
表格寬度
<table border="2" cellpadding="5" cellspacing="3" summary="測試表格" width="300"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
6、frame(IE7-瀏覽器不能正常顯示)(html5已廢棄)
| 值 | 描述 |
|---|---|
| void | 不顯示外側邊框。 |
| above | 顯示上部的外側邊框。 |
| below | 顯示下部的外側邊框。 |
| hsides | 顯示上部和下部的外側邊框。 |
| vsides | 顯示左邊和右邊的外側邊框。 |
| lhs | 顯示左邊的外側邊框。 |
| rhs | 顯示右邊的外側邊框。 |
| box | 在所有四個邊上顯示外側邊框。 |
| border | 在所有四個邊上顯示外側邊框。 |
7、rules(IE7-瀏覽器不能正常顯示)(html5已廢棄)
| 值 | 描述 |
|---|---|
| none | 沒有線條。 |
| groups | 位於行組和列組之間的線條。 |
| rows | 位於行之間的線條。 |
| cols | 位於列之間的線條。 |
| all | 位於行和列之間的線條。 |
<演示框>點選下列相應屬性值可進行演示
【樣式】
1、border-spacing[可替代HTML屬性cellspaing](IE7-不支援)
[注意]只有當border-collapse值為separate時，該樣式才有效
border-spacing: x y //x:水平間距 y:垂直間距。若只有一個值，則水平間距和垂直間距相等。注意，不可為負值。
2、empty-cells(IE7-不支援)
empty-cells: hide 不在空單元格周圍繪製邊框和背景，類似於hidden效果
empty-cells: show(預設) 在空單元格周圍繪製邊框和背景
3、CSS實際上有兩種截然不同的邊框模型。按佈局術語來說，如果單元格相互之間是分隔的，是分隔邊框模型在起作用；另一種是合併邊框模型，單元格邊框會相互合併。
border-collapse:separate;
[注意]在分隔邊框模型中，不能為行、行組、列和列組設定邊框。
border-collapse:collapse;
在合併邊框模型中，表格無法設定內邊距padding，且單元格邊框之間也沒有間距。單元格之間的邊框會在單元格間的假想表格線上居中，且表格寬度只包含表格邊框的一半
【邊框合併的規則】
a、某個合併邊框的border-style為hidden，它會優先於所有其他合併邊框。這個位置上的所有邊框都隱藏
b、某個合併邊框的border-style為none，它的優先順序最低
c、寬邊框優先於窄邊框
d、若寬度相同，double\solid\dashed\dotted\ridge\outset\groove\inset，優先順序逐漸降低
e、若樣式也相同，cell\row\row group\column\column group\table，優先順序逐漸降級
<演示框>點選下列相應屬性值可進行border-style的演示
4、table-layout
table-layout:auto//自動寬度佈局
【自動佈局的步驟】
a、對於一列中的單元格，計算最小和最大單元格寬度
b、對於各一列，計算最小和最大列寬
c、若單元格跨列，最小列寬之和要等於跨列單元格最小單元格寬度
table-layout:fixed//固定寬度佈局
[注意]對於表單元格的長文字來說，使用word-wrap或word-break來強制換行，使用text-overflow實現文字溢位控制都需要設定table-layout:fixed
【固定佈局的步驟】
a、width屬性值不是auto的所有列元素會根據width值設定該列的寬度
b、如果一個列的寬度為auto，則根據該單元格設定此列寬度，如果跨多列，則寬度平均分配
c、如果列寬度仍為auto，則自動確定其大小，使其寬度儘可能相等
[注意]使用固定寬度佈局，使用者代理可以更快地計算出表格的佈局
5、vertical-align
vertical-align: top;//頂端對齊 vertical-align: bottom;//底端對齊 vertical-align: middle;//中間對齊 vertical-align: baseline(預設);//基線對齊
[注意]vertical-align:sub\super\text-top\text-bottom應用到表格單元格時會被忽略
行
【<tr><th><td>】
<tr>行 table row <th>表頭 table head <td>表格資料 table data
【預設樣式】
th{ padding: 1px; text-align: center; font-weight: bold; } td{ padding: 1px; }
【屬性】
1、colspan
規定單元格可橫跨的列數
2、rowspan
規定單元格可橫跨的行數
[注意]關於行的表格元素生成矩形框，這些框有內容、內邊距和邊框，但是沒有外邊距margin。表頭呈現為居中的粗體文字
<演示框>點選下列相應屬性值可進行演示
列
【<col><colgroup>】
<col> -> column 列
為表格中一個或多個列定義屬性值
<colgroup> -> column group 列組
對錶格中的列進行組合，以便對其進行格式化
【屬性】
span
規定col元素應該橫跨的列數
【樣式】
1、visibility:collapse
該列或列組的所有單元格不顯示(設定為其他值則無效)
2、border
只有當border-collapse:collapse時，才能設定border
3、background
只有當單元格及其行有透明背景時，列或列組的背景才可見
4、width
定義列或列組的最小寬度
<table border="1" style="border-collapse: collapse"> <colgroup span="2" style="width:100px; background-color: red"></colgroup> <col style="background-color: green; width:200px; border: 3px solid blue;" > <tr> <td>數字</td> <td>中文</td> <td>英文</td> </tr> <tr> <td>1</td> <td>一</td> <td>a</td> </tr> <tr> <td>2</td> <td>二</td> <td>b</td> </tr> </table>
其他表格元素
【<thead><tbody><tfoot>】
<thead>表格頁首 <tbody>表格主體 <tfoot>表格頁尾
[注意]它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有資料前呈現頁尾
【<caption>表格標題】
【預設樣式】
caption{ text-align: center; }
【樣式】
caption-side: top(預設)
caption-side: bottom
[注意]<caption>標籤必須緊隨<table>標籤之後，且只能對每個表格定義一個標題
<table border="1" > <caption style="caption-side:bottom">北京天氣</caption> <thead> <tr> <th>地區</th> <th>天氣</th> </tr> </thead> <tfoot> <tr> <td>北京</td> <td>都霧霾</td> </tr> </tfoot> <tbody> <tr> <td>城八區</td> <td>霧霾</td> </tr> <tr> <td>郊區</td> <td>霧霾</td> </tr> </tbody> </table>
display
table{display: table;} thead{display: table-header-group;} tbody{display: table-row-group;} tfoot{display: table-footer-group;} tr{display: table-row;} td,th{display: table-cell;} col{display: table-column;} colgroup{display: table-column-group;} caption{display: table-caption;}
[注意]IE7-瀏覽器不支援為HTML元素設定與表格有關的display值
匿名錶格物件
CSS定義了一種機制，將遺漏的元件作為匿名物件插入。詳細插入規則如下：
1、如果table-cell元素的父元素不是table-row元素，則插入匿名table-row物件
2、如果table-row元素的父元素不是table、inline-table或table-row-group元素，則插入匿名table元素
3、如果table-column元素父元素不是table、inline-table或table-row-group元素，則插入匿名table元素
4、如果table-row-group、table-header-group、table-footer-group、table-column-group或table-caption的父元素不是table元素，則插入匿名table元素
5、如果table元素或inline-table元素的子元素不是table-row-group、table-header-group、table-footer-group、table-column-group或table-caption，則插入匿名table-row元素
6、如果table-row-group、table-header-group、table-footer-group元素的子元素不是table-row元素，則插入匿名table-row元素
7、如果table-row元素的子元素不是table-cell元素，則插入匿名tabel-cell元素
表格層
CSS定義了6個不同的層，對應表各個方面的樣式都在其各自的層上繪製。預設地，所有元素背景都是透明的，如果單元格、行、列等沒有自己的背景，則table元素的背景將透明這些內部元素可見。
<演示框>點選下列相應屬性值可進行演示
邊距設定
【<table>】
若處於分隔邊框模型，margin和padding都可設定
若處於合併邊框模型，只可設定margin
【<thead><tbody><tfoot><tr><col><colgroup>】
margin和padding都不可設定
【<td><th>】
不可設定margin，但可以設定padding
【<caption>】
margin和padding都可設定