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. 综合示例
同时使用 colspan 和 rowspan 的复杂表格。
演示效果:
| 科目 | 总分 | |
|---|---|---|
| 语文 | 数学 | |
| 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>