可以使用thead、tbody和tfoot元素来为表格添加结构,这样可以让为表格各个部分添加CSS样式变得更加容易。
1)表格主题
tbody元素表示构成表格主题的全体行,不包括表头行(thead元素表示)和表脚行(tfoot元素表示)。
注意大多数浏览器在处理table元素时都会自动插入tbody元素。
2)表格表头
thead元素用来标记表格的标题行。如果没有thead元素的话,所有tr元素都会被视为表格主体的一部分。
3)添加脚注
tfoot元素用来标记组成表脚的行。在HTML5之前tfoot元素只能出现在tbody元素之前,而在HTML5中则允许将tfoot元素放在tbody之后。
下面是一个综合的例子,里面使用了tbody、thead和tfoot元素。
<table>
<thead>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Favorite:</th>
<td>Apples</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Oranges</td><td>Orange</td><td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Pomegranate</td><td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</tbody>
</table>
为表格添加标题
使用caption元素可以为表格定义一个标题,并将其与表格关联起来。
<table>
<caption>Results of the 2011 Fruit Survey</caption>
<thead>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Favorite:</th>
<td>Apples</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Oranges</td><td>Orange</td><td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Pomegranate</td><td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</tbody>
</table>









