HTML表格

一、基本结构

在HTML中，一个表格一般由以下3部分组成：

• 表格：table标签
• 行：tr标签
• 单元格：td标签

说明：

• tr指的是table row（表格行）。td指的是table data cell（表格单元格）。
• <table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，<td>和</td>表示单元格的开始和结束。
• 在表格中，有多少组”<tr></tr>“，就表示有多少行。

二、完整结构

在表格中不止有table、tr、td，还有caption、th等。

1、表格标题：caption

在HTML中，表格一般都会有一个标题，可以使用caption标签来实现。

注意：一个表格只能有一个标题，也就是说只能有一个caption标签。在默认情况下，标题位于整个表格的第一行。

2、表头单元格：th

在HTML中，单元格其实有两种：一种是”表头单元格“，使用的是th标签；另一种是”表行单元格“，使用的是td标签。

说明：th和td在本质上都是单元格，但是并不代表两者可以互换，它们的区别：

• 显示上：浏览器会以"粗体”和“居中”来显示th标签中的内容，但是td标签不会。
• 语义上：th标签用于表头，而td标签用于表行。

三、语义化

一个完整的表格包含：table、caption、tr、th、td。为了更进一步地对表格进行语义化，HTML引入了thead、tbody、tfoot这三个标签。

thead、tbody、tfoot这三个标签把表格划分为：表头、表身、表脚。有了这些标签，表格的语义更加良好，结构更加清晰，也更具有可读性和可维护性。

注意：

• 表脚（tfoot）往往用于统计数据。对于thead、tbody和tfoot标签，不一定需要全部都用上，如tfoot就很少用，一般情况下需要根据实际情况来使用这些标签。
• thead、tbody和tfoot标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚。
• thead、tbody和tfoot标签除了可以使代码更具有语义性，还可以方便分块来控制表格CSS样式。

四、合并行：rowspan

在HTML中，可以使用rowspan属性来合并行。合并行指的是将“纵向的N个单元格”合并。
相关的使用如下所示：

<tr>
	<td rowspan = "2">内容</rowspan>
</tr>

五、合并列：colspan

在HTML中，可以使用colspan属性来合并列。合并列指的是将“横向的N个单元格”合并。
相关的使用如下所示：

<tr>
	<td colspan = "2">内容</rowspan>
</tr>