添加表格头部信息与脚部信息
昨天我们在《使用HTML添加表格1（基本元素）——零基础自学网页制作》（文章结尾有目录）中学习了如何向网页中添加基础表格，今天我们来学习如何为基础表格添加表头和表脚信息。先看看效果吧。
老规矩，先介绍表头和表脚的标签。
表头：<thead></thead>
这个标签只是告诉页面这里是表头，如果添加文字的话还需要<tr></tr>列标签和<td></td>行标签。
如果要添加表头的话，直接在代码中添加这个标签是不行的，我们还需要将其他表格内容放置到<tbody></tbody>中，这样html才能知道哪里是表格内容，哪里是表头内容。
示例代码如下所示：
<table border = "1" width = "100%"> <thead><!--表头开始标签--> <tr> <td>表格的头部信息</td></tr></thead><!--表头结束标签--><tbody><!--表格内容开始标签--><caption>表格标题</caption><tr> <th>姓名</th><th>年龄</th></tr><tr> <td>一列一行</td><td>一列二行</td></tr><tr> <td>二列一行</td><td>二列二行</td></tr></tbody><!--表格内容结束标签--></table>
代码效果如图：
大家通过观察发现，表格的标题标签<caption></caption>虽然写在<tbody></tbody>里面，但是显示的时候，却一直在表格的最上面。
合并单元格操作：我们希望表头信息能够在表格中独占一列，这样就需要介绍如何修改<td></td>行标签中的colspan属性。
示例代码如下：
<thead> <!--表头开始标签--><tr><td colspan = "2">表格的头部信息</td></tr></thead><!--表头结束标签-->
修改后效果如下：
colspan的意思就是"列合并"，col是column（列、纵队）的缩写，span是跨度的意思。
colspan就是为<td></td>列标签指定跨越几个列向单元格。
这里我们要合并两个，故colspan="2"，2一定要用半角引号引起来！
那合并行单元格的属性是什么呢？其实反推一下也能猜出。行的英文是row，因此rowspan就是"行合并"。
代码示例如下：我们把"一行一列"和"二行一列"纵向合并。
<tr> <td rowspan = "2">一列一行</td><td>一列二行</td></tr><tr><td>二列二行</td></tr>
效果如图所示：
大家注意，如果您合并成了"一行一列"，那就要把"二列一行"删掉。
最后，我们来写一下表格的脚部信息。
脚部标签如下：<tfoot></tfoot>
使用方法和<thead></thead>一样，在中间添加列行标签来显示内容。
同时也要给<td></td>行标签进行列向合并单元格，即添加colspan="2"。
示例代码如下：
<tfoot><tr><td colspan = "2">表格的脚部信息</td></tr></tfoot>
值得注意的是：这块代码的位置在<thead></thead>之后，<tbody></tbody>之前。
示例代码如下：
<table border = "1" width = "100%"> <thead> <tr> <td colspan = "2">表格的头部信息</td></tr></thead><tfoot> <tr> <td colspan = "2">表格的脚部信息</td></tr></tfoot><tbody><caption>表格标题</caption><tr><th>姓名</th><th>年龄</th></tr><tr><td rowspan = "2">一列一行</td><td>一列二行</td></tr><tr><td>二列二行</td></tr></tbody></table>
页面效果如下：
今天的内容结束了。明天我们继续讲解列表元素的其他属性。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
