《Web前端开发精品课 HTML与CSS进阶教程》—

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第2章，第2.4节，作者：莫振杰更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4　表格语义化

不少初学者看了《Web前端开发精品课HTML和CSS基础教程》（本书的姊妹篇）跑来问：“不是说表格布局已经被抛弃了吗？为什么还要在书里讲解表格呢？这不是多此一举吗？”其实不然，在实际开发中，我们不建议使用表格布局，应该使用浮动布局或者定位布局。虽然表格拿来做布局的方式被抛弃了，但是这并没有说明表格就一无是处了。

问大家一个问题：如图2-5所示的这种表格数据的展示，应该怎么实现呢？不少得了“table恐惧症”的小伙伴可能会想到使用div来模拟表格。事实上，对于这种表格数据形式，最好的选择还是table。

https://yqfile.alicdn.com/00c03a61c1b35bd83a04ad960faac8ba155cc23b.png" >

在表格中，我们比较常用的标签是table、tr和td这3个。不过为了加强表格的语义化，W3C还增加了5个标签：th、caption、thead、tbody和tfoot。th表示“表头单元格”；caption表示“表格标题”。thead、tbody和tfoot这3个标签把表格从语义上分为三部分：表头、表身和表脚。有了这几个标签，表格语义更加良好，结构更加清晰。对于这5个标签，我们在本书的姊妹篇中已经做了详细的介绍，这里就不再赘述。表格标签如表2-1所示。

https://yqfile.alicdn.com/6183fd20c476682d35e5ed9f8dfd5d5a642e83ba.png" >

语法：

<table>
　　 <caption>表格标题</caption>
　　 <!--表头-->
　　 <thead>
　　　　 <tr>
　　　　　　 <th>表头单元格1</th>
　　　　　　 <th>表头单元格2</th>
　　　　 </tr>
　　 </thead>
　　 <!--表身-->
　　 <tbody>
　　　　 <tr>
　　　　　　 <td>标准单元格1</td>
　　　　　　 <td>标准单元格2</td>
　　　　 </tr>
　　　　 <tr>
　　　　　　 <td>标准单元格1</td>
　　　　　　 <td>标准单元格2</td>
　　　　 </tr>
　　 </tbody>
　　 <!--表脚-->
　　 <tfoot>
　　　　 <tr>
　　　　　　 <td>标准单元格1</td>
　　　　　　 <td>标准单元格2</td>
　　　　 </tr>
　　 </tfoot>
</table>

说明：

thead、tbody和tfoot这三个标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚。很多人容易忽略这三个标签。

上述语法显示效果如图2-6所示。

56860357ce44bc41d56daec632837e072b1d14c8

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
　　 <title></title>
　　 <style type="text/css">
　　　　 table, thead, tbody, tfoot, th, td 
　　　　 {
　　　　　　 border: 1px dashed gray;
　　　　 }
　　 </style>
</head>
<body>
　　 <table>
　　　　 <caption>考试成绩表</caption>
　　　　 <thead>
　　　　　　 <tr>
　　　　　　　　 <th>姓名</th>
　　　　　　　　 <th>语文</th>
　　　　　　　　 <th>英语</th>
　　　　　　　　 <th>数学</th>
　　　　　　 </tr>
　　　　 </thead>
　　　　 <tbody>
　　　　　　 <tr>
　　　　　　　　 <td>小明</td>
　　　　　　　　 <td>80</td>
　　　　　　　　 <td>80</td>
　　　　　　　　 <td>80</td>
　　　　　　 </tr>
　　　　　　 <tr>
　　　　　　　　 <td>小红</td>
　　　　　　　　 <td>90</td>
　　　　　　　　 <td>90</td>
　　　　　　　　 <td>90</td>
　　　　　　 </tr>
　　　　　　 <tr>
　　　　　　　　 <td>小杰</td>
　　　　　　　　 <td>100</td>
　　　　　　　　 <td>100</td>
　　　　　　　　 <td>100</td>
　　　　　　 </tr>
　　　　 </tbody>
　　　　 <tfoot>
　　　　　　 <tr>
　　　　　　　　 <td>平均</td>
　　　　　　　　 <td>90</td>
　　　　　　　　 <td>90</td>
　　　　　　　　 <td>90</td>
　　　　　　 </tr>
　　　　 </tfoot>
　　 </table>
</body>
</html>

在浏览器预览效果如图2-7所示。