表格結(jié)構(gòu)
表格結(jié)構(gòu)：表格分有表頭（<thead></thead>）表格主體正文(<tbody></tbody>)表尾(<tfoot></tfoot>)，以及表格標(biāo)題（caption）會自動出現(xiàn)在整張表格的上方，此外對表格的更長描述可以寫在table標(biāo)簽的summary屬性中，其次（<th></th>）定義表格的表頭單元格，且th元素內(nèi)部的文本通常會呈現(xiàn)為粗體代碼示例：
<table border="1" cellspacing="0" summary="this is table example">
<caption>表格示例展示</caption>
<thead>
<tr>
<th>時間：</th>
<th>收入：</th>
<th>支出：</th>
</tr>
</thead>
<tfoot>
<tr>
<td>備注：</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2015-07-12</td>
<td>200</td>
<td>50</td>
</tr>
<tr>
<td>2015-07-13</td>
<td>200</td>
<td>30</td>
</tr>
<tr>
<td>2015-07-14</td>
<td>200</td>
<td>40</td>
</tr>
</tbody>
</table>
在瀏覽器中的顯示效果如下圖：
這里有幾個注意點：
* thead和tfoot在一張表中只能有一個，而tbody可以有多個
* tfoot必須出現(xiàn)在tbody前面，這樣瀏覽器在接收主體數(shù)據(jù)之前，就能渲染表尾，這有利于加快表
格的顯示速度。這一點對大型表格尤其重要
* thead 、tbody和tfoot里面都必須使用tr標(biāo)簽，以表示行
* 同時注意th是表頭thead中的單元格與td數(shù)據(jù)單元有區(qū)別
列分組
tbody可以用來對“行”進(jìn)行分組，colgroup則用來對“列”進(jìn)行分組。
例如：下面代碼表示前2列為一組，每一列的寬度為20px。
<colgroup span="2" width="200px"></colgroup>
瀏覽器顯示效果如下：
幾個注意點：
* span屬性，用來指定colgroup標(biāo)簽?zāi)軌蚩刂频牧袛?shù)
* 在colgroup標(biāo)簽內(nèi)部，可以使用col標(biāo)簽來指定每一列的屬性
* 其中我們還可以在col中使用span屬性來進(jìn)行列分組
例如，下面的代碼表示第一列寬度為300px，第二列寬度為100px：
<colgroup>
<col width="300px">
<col width="100px">
</colgroup>
瀏覽器顯示效果如下：
css中的table-layout語句
這個語句可以用來指定表格顯示樣式，列如
table {table-layout:fixed;}
它可以取三個值：
* auto(缺省)
* fixed
* inherit
auto表示單元格的大小由內(nèi)容決定。fixed表示單元格的大小是固定的，由第一個指定大小的單元格決定，如果所有的單元格都沒有指定大小，則由第一個單元格的默認(rèn)大小決定；如果單元格的內(nèi)容超出單元格的大小，則用CSS中的overflow控制。同時表格的顯示速度可以加快100倍。
同時注意：
* 想要加快表格顯示，最好事先在CSS或者table標(biāo)簽的width和height屬性中指定
表格的寬度和高度
th和td的區(qū)別
表示單元格的標(biāo)簽是th（table head）和td（table data），前者用來顯示數(shù)據(jù)名稱，后者用來顯示數(shù)據(jù)內(nèi)容
代碼示例：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
frame和rules屬性
table標(biāo)簽的frame和rules屬性，可以控制邊框的顯示；frame屬性規(guī)定外側(cè)邊框的哪個部分是可見的。rules屬性規(guī)定內(nèi)側(cè)邊框的哪個部分是可見的。
frame屬性可取的屬性值如下：
* void - 默認(rèn)值。表示不顯示表格最外圍的邊框
* above - 只顯示上部的外側(cè)邊框
* below - 只顯示下部的外側(cè)邊框
* hsides - 顯示上部和下部的外側(cè)邊框
* vsides - 顯示左邊和右邊的外側(cè)邊框
* lhs - 顯示左邊的外側(cè)邊框
* rhs - 顯示右邊的外側(cè)邊框
* box - 在所有四個邊上顯示外側(cè)邊框
* border - 在所有四個邊上顯示外側(cè)邊框
rules屬性可取的屬性值如下：
* none - 沒有線條
* groups - 位于行組和列組之間的線條
* rows - 位于行之間的線條
* cols - 位于列之間的線條
* all - 位于行和列之間的線條（即單元格）
代碼示例：
<table border="1" frame="above" rules="groups">
<colgroup span="2" width="100px">
<col width="300px">
<col align="right">
</colgroup>
<caption>表格示例展示</caption>
<thead>
<tr>
<th>時間：</th>
<th>收入：</th>
<th>支出：</th>
</tr>
</thead>
<tfoot>
<tr>
<td>備注：</td>
<td>日期：</td>
<td>總計：</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2015-07-12</td>
<td>200</td>
<td>50</td>
</tr>
<tr>
<td>2015-07-13</td>
<td>200</td>
<td>30</td>
</tr>
<tr>
<td>2015-07-14</td>
<td>200</td>
<td>40</td>
</tr>
</tbody>
</table>
瀏覽器顯示效果如下：
table中常用屬性及取值
* border -[可取像素值] 規(guī)定表格邊框的寬度
* cellpadding -[可取像素值和百分比] 規(guī)定單元邊沿與其內(nèi)容之間的空白
* cellspacing - [可取像素值和百分比]規(guī)定單元格之間的空白
* frame - 規(guī)定外邊框的哪個部分可見
* rules - 規(guī)定內(nèi)邊框的哪個部分可見
* summary - 規(guī)定表格的摘要描述
* width - 規(guī)定表格的寬度
td常用屬性及取值
* align - [left-right-center-justify-char]規(guī)定單元格內(nèi)容的水平對齊方式
* headers - [headers_cells'_id]規(guī)定單元格相關(guān)的表頭
* colspan - [number]規(guī)定單元格可橫跨的列數(shù)
* rowspan - [number]規(guī)定單元格可橫跨的行數(shù)
最后注意一點：
* 表格中不能不寫tbody，因為不寫tbody這標(biāo)簽，瀏覽器也會自動為你加上，當(dāng)別人閱讀你的代碼
時，會產(chǎn)生一些困惑，所以建議加上這個標(biāo)簽
詳細(xì)屬性參考
此文章中多數(shù)引用——阮一峰的網(wǎng)絡(luò)日志
