1. 表格结构分组

<thead> 表头 | <tbody> 表体 | <tfoot> 表尾

<caption> 表格标题,让表格更语义化。

演示效果:
学生成绩表
姓名 语文 数学
张三 85 90
李四 78 88
平均分 81.5 89
1<table> 2 <caption>学生成绩表</caption> 3 <thead> 4 <tr> 5 <th>姓名</th> 6 <th>语文</th> 7 <th>数学</th> 8 </tr> 9 </thead> 10 <tbody> 11 <tr> 12 <td>张三</td> 13 <td>85</td> 14 <td>90</td> 15 </tr> 16 </tbody> 17 <tfoot> 18 <tr> 19 <td>平均分</td> 20 <td>81.5</td> 21 <td>89</td> 22 </tr> 23 </tfoot> 24</table>

2. 合并列 colspan

colspan 属性让一个单元格横跨多列。

例如 colspan="2" 表示这个单元格占 2 列的位置。

演示效果:
个人信息 成绩
张三 90
1<table> 2 <tr> 3 <th colspan="2">个人信息</th> 4 <th>成绩</th> 5 </tr> 6 <tr> 7 <td>张三</td> 8 <td>男</td> 9 <td>90</td> 10 </tr> 11</table>

3. 合并行 rowspan

rowspan 属性让一个单元格纵跨多行。

例如 rowspan="2" 表示这个单元格占 2 行的位置。

演示效果:
姓名 科目 分数
张三 语文 85
数学 90
李四 语文 78
数学 88
1<table> 2 <tr> 3 <th>姓名</th> 4 <th>科目</th> 5 <th>分数</th> 6 </tr> 7 <tr> 8 <td rowspan="2">张三</td> 9 <td>语文</td> 10 <td>85</td> 11 </tr> 12 <tr> 13 <td>数学</td> 14 <td>90</td> 15 </tr> 16</table>

4. 综合示例

同时使用 colspanrowspan 的复杂表格。

演示效果:
科目 总分
语文 数学
85 90 175
1<table> 2 <tr> 3 <th colspan="2">科目</th> 4 <th rowspan="2">总分</th> 5 </tr> 6 <tr> 7 <th>语文</th> 8 <th>数学</th> 9 </tr> 10 <tr> 11 <td>85</td> 12 <td>90</td> 13 <td>175</td> 14 </tr> 15</table>