这是我参与「第五届青训营」伴学笔记创作活动的第 5 天。今天我谈谈常用的HTML标签——表格标签，请大家多多指教！
【表格标签】
概要：在制作网页时，为了使网页中的数据能够有条理地显示，可以使用表格对网页进行规划。在Word文档中，用户可以通过插入表格的方式来创建表格，而在HTML网页中需要使用相关的表格标签才能创建表格
创建表格的基本标签
<table></table>标签：-
- 作用：用于定义一个表格
<tr></tr>标签：-
- 作用：用于定义表格中的行
-
- 注意：
<tr></tr>标签必须嵌套在<table></table>标签当中
- 注意：
<td></td>标签：-
- 作用：用于定义表格中的单元格，也可称为表格中的列
-
- 注意：
<td></td>标签必须嵌套在<tr></tr>标签当中
- 注意：
PS：表格的结构标签——突出表格的不同部分（头部、主体、底部）
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
在HTML网页中创建表格的基本语法格式
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
案例演示
下面通过一个案例文件htmlDemo04演示表格标签<table></table>、<tr></tr>、<td></td>的使用，案例关键代码如下所示：
<body>
<table border="2px"> <!--若修改为<table>则表格无边框-->
<thead>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>91</td>
<td>优秀</td>
</tr>
<tr>
<td>李四</td>
<td>67</td>
<td>合格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>成绩均合格</td>
<td>继续努力</td>
</tr>
</tfoot>
</table>
</body>
在以上代码中，<table>标签的border属性会为每个单元格应用边框，并用边框围绕表格。这里将border的属性设置为2，单位是像素，表示该表格边框的宽度为2像素。使用浏览器打开文件htmlDemo04，显示结果如下图所示
合并单元格
- 明确合并哪几个单元格
- 依据左上原则，确定保留谁删除谁（上下合并只保留最上的，左右合并只保留最左的）
- 给保留的单元格设置跨行合并（rowspan）或跨列合并（colspan）
案例演示
<body>
<table border="2px">
<thead>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">91</td>
<td>优秀</td>
</tr>
<tr>
<td>李四</td>
<td>合格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">成绩均合格</td>
</tr>
</tfoot>
</table>
</body>
案例中选择将成绩和总结分别进行合并，合并单元格后如下图所示
【小结】
今天学习了创建表格的基本标签和合并单元格的具体操作，收获多多！
