2.4 表格

前面介绍了基础标签，本节学习如何使用HTML在网页中实现表格。在生活中表格的应用随处可见，因为使用表格来展示数据信息，可以使用户快速从表格中获取想要的信息。常见的表格如图2-39所示。

针对该表格，我们可以划分为4部分，划分后的表格如图2-40所示。

对图2-40中的4部分对应情况进行梳理，如表2-2所示。

也就是说，一个表格可以分为以上4个部分，HTML 提供了<table>标签来声明一个表格，而<table>标签内可以包含表格标题、表格表头、表格主体和表格脚注，分别对应如下标签。

● <caption>标签：用来展示一个表格的标题，通常作为<table>标签的第一个子元素。

● <thead>标签：用来定义一组带有表格标题的行（可选）。

● <tbody>标签：用来定义一组表格主体内容的行（可选）。

● <tfoot>标签：用来定义一组表格脚注内容的行（可选）。

在通常情况下，表格表头、表格主体、表格脚注的内部都有一行一行的数据，在HTML中使用<tr>标签来定义表格中的行。另外，HTML还提供了<th>标签来定义每一行表头数据中的单元格、<td>标签来定义每一行表格主体，以及表格脚注中的单元格。

下面通过标签实现图2-39中的“海产品购买清单”案例，创建test_table.html文件，示例代码如下。为了方便演示，案例中会使用<table>标签的属性border，用来显示表格的边框。

对于border属性，如果设置其值为0，意味着没有边框；如果将其值设置为1，表示设置了1px大小的边框。其实在HTML5中不建议使用该属性，因为这属于样式的修饰。一般使用CSS来修饰边框，这里只对该属性简单提及。

运行代码查看效果，如图2-41所示。

大多数程序员使用 HTML 编写表格时，不太习惯使用<thead>、<tbody>和<tfoot>标签，而是会将它们省略，因此上面的例子也可以写成如下代码。

运行代码可以看到，页面效果与图2-41相同。不过需要注意的是，即使在使用表格时省略了<tbody>标签，浏览器解析时也会自动将该标签加上。

另外，<th>标签和<td>标签中都支持colspan和rowspan属性。colspan的英文原意是跨列、合并列，顾名思义在HTML中用来规定单元格可以横跨的列数；rowspan的英文原意是行距、合并行，同样在HTML中用来规定单元格可以竖跨的行数。

下面将通过一个案例来演示colspan和rowspan属性的使用。

现有一个2行3列的表格，如表2-3所示。

根据之前所学，我们可以通过如下代码实现该2行3列的表格。

运行代码查看效果，如图2-42所示。

前面提到colspan属性，表示一个单元格可以横跨的列数。如果将其属性值设置为2会出现什么样的效果呢？下面将2行3列表格中的1-1单元格加上colspan属性并将其值设置为2。示例代码如下。

运行代码查看效果，如图2-43所示。

从页面效果看，仿佛和我们预想的效果并不一样。初始的表格本来是2行3列，每个单元格横向占据1列。但是，1-1单元格设置conspan属性并将其设置为2之后，1-1单元格占2列、1-2占1列、1-3占1列，这样看来，第一行共变为了4列，而第二行依旧是3列，最终只有1-3这个单元格超出了。

前文提及rowspan属性表示一个单元格可以竖跨的行数。如果给1-1单元格加上rowspan属性并将其值设为2，会不会出现类似的效果呢？下面通过代码进行验证。

运行代码查看效果，如图2-44所示。

从图2-42来看，表格本来是2行3列（每个单元格纵向占据1行），但是1-1单元格给rowspan设置值为2之后，1-1单元格会向下一行多占据一行，纵向占2行、横向占1列，2-1占1列、2-2占1列、2-3占1列，第二行总共变为4列，而第一行还是总共3列，最终结果2-3这个单元格超出了。

综上，如果需要合并单元格，为了不影响原来的表格大小，合并几个单元格，相应地则需要删除几个多余的单元格。

例如，给1-1单元格加上rowspan属性并将其值为2，为保证原来表格大小，则需要删除2-1单元格，示例代码如下。

合并后正常的单元格如图2-45所示。