在CSS出現之前，table元素常常用來布局。這種做法在HTML4之後不再推薦使用。而現在有些矯枉過正，使用table展示數據都可能會被說不規範。本文将詳細介紹HTML表格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已廢棄)

　　7、rules(IE7-浏覽器不能正常顯示)(html5已廢棄)

　　<演示框>點擊下列相應屬性值可進行演示

【樣式】

　　1、border-spacing可替代HTML屬性cellspaing

　　[注意]隻有當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>行 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。表頭呈現為居中的粗體文本

　　 <演示框>點擊下列相應屬性值可進行演示

【】

　　 -> column 列

　　　　為表格中一個或多個列定義屬性值

　　 -> 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、tfoot、tbody，這樣浏覽器就可以在收到所有數據前呈現頁腳

【表格标題】

　　【默認樣式】

caption{ text-align: center; }

　　【樣式】

caption-side: top(默認) caption-side: bottom

　　[注意]标簽必須緊随

标簽之後，且隻能對每個表格定義一個标題

<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>

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都可設置

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!