今天我们接着分享关于表格的内容，前面我们说到了表格的基本结构，为了对表格有更深的理解，HTML引入了thead、tbody和tfoot三个标签。
语法：
<table border="1"><caption>表格标题</caption><thead><tr><th>标题1</th><th>标题2</th></tr></thead><tbody><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></tbody><tfoot><tr><td>单元格5</td><td>单元格6</td></tr></tfoot></table>
我们举个实际的例子：
<html><head><title>表格语义化</title></head><body><table border="1"><caption>考试成绩表</caption><!--表头--><thead><tr><th>姓名</th><th>HTML</th><th>CSS</th><th>Javascript</th></tr></thead><!--表体--><tbody><tr><td>大明</td><td>77</td><td>77</td><td>77</td></tr><tr><td>大红</td><td>99</td><td>99</td><td>99</td></tr></tbody><!--表尾--><tfoot><tr><td>平均</td><td>88</td><td>88</td><td>88</td></tr></tfoot></table></body></html>
表尾一般都是用于统计数据的。之所以加了三个标签符，分别标明头部、体部、尾部，是为了后期使用CSS控制表格的样式。
有些时候，我们设计的表格需要合并单元格，我们需要用到<td>的属性rowspan和colspan；
语法：
<td rowspan="合并行数"></td>
来个实例代码：
<html><head><title>合并单元格</title></head><body><table border="1"><tr><td>姓名：</td><td>周先生</td><td rowspan ="2">男性</td></tr><tr><td>年龄：</td><td>18</td></tr></table></body></html>
查看浏览器效果，可以发现第一行是3列，第二行是两列，在第三列的首格使用了合并属性rowspan = 2 ，意思是向下合并两格。
那我们需要合并列呢，可以使用<td>属性colspan，
语法：
<td colspan = "合并列数"></td>
示例代码：
<html><head><title>合并单元格</title></head><body><table border="1"><tr><td>苹果</td><td>香蕉</td></tr><tr><td colspan="2">都是水果</td></tr></table></body></html>
从浏览器效果，可以看出第二行的两格单元格合并为一个，大家可以多加练习，体会一下rowspan和colspan的使用状态。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
