理解表格二：其他表格相关标签及属性

在 HTML 表格布局（注意：不是用表格进行页面布局）中，除了 tr 和 td 之外，还有以下标签：

• caption - 表格的标题。
• thead - 表头行（行组）。
• tbody - 数据行（行组）。
• tfoot - 表注行（行组）。
• th - 与 td 类似的表元，字体会加粗。
• col - 表格列。
• colgroup - 表格列组。

下面分别看一下这几个标签的作用及其相关属性：

caption （标题），顾名思义，就是一个表格的标题。比如：本周股票行情、某班 2007 年下学期期末成绩表等。用法也很直观，即放在 table 标签之后：

<table>
<caption>本周股票行情</caption>
<!–其他表格标签–>
</table>

caption 标签没有什么特别的属性。它本身是一个块级元素，所以适用于块级元素的 CSS 样式也适用于 caption 元素，如：margin、padding 等。但同时，由于 caption 属性不能脱离 table 元素单独使用，所以 caption 属性也会继承 table 元素的样式属性（就和其他子元素从父元素继承样式一样）。

thead、tbody 和 tfoot 这三个标签也称为行组。因为这三个标签中都必须包含表格行－－ tr。其中，thead 中的 tr 表示的是表格标题行；tbody 中包含的 tr 则是表格数据行；而 tfoot 中包含的 tr 则是表格的表注行。在一个 HTML 表格中，只能有一个 thead 和 tfoot 元素，而且不管这两个元素在源代码中的位置如何，在 Web 页面中，thead 元素总是被解析为表格的第一行；类似地，tfoot 元素总是被解析为表格的最后一行。一个 HTML 表格中可以有多个 tbody 元素，每个 tbody 元素可以包含一或多个 tr 元素。这样，就可以通过 tbody 将多个数据行（tr）分为行组，为分别应用不同的样式提供方便。比如：

<table frame=”hsides” rules=”groups”>
<caption>Sites that I like to visit</caption>
<thead>
<tr>
<th scope=”col”>Person</th>
<th scope=”col”>URL</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”2″>[1] Enjoys Dance Dance Revolution</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Bryan Veloso [1]</td>
<td><a href=”http://avalonstar.com/”>Avalonstar</a></td>
</tr>
<tr>
<td>Dan Rubin</td>
<td><a href=”http://superfluousbanter.org/“>
SuperfluousBanter</a></td>
</tr>
</tbody>
</table>

会得到如下表格：

Person	URL
Bryan Veloso [1]	Avalonstar
Dan Rubin	SuperfluousBanter

注意，table 元素同时使用了 frame 和 rules 属性，其中 frame=”hsides” 表示为表格上沿和下沿（水平方向）两条边加上边框，而 rules=”groups” 则表示为表格中的分组（行组或列组）加边框。如上面所示，由 thead、tbody 和 tfoot 定义的三个行组之间被添加了边框。同时，在源代码中，tfoot 位于 tbody 标签之前，但显示结果仍然是表格的最后一行。

与行和行组（thead、tbody 及 tfoot）对应的，是列和列组。由于 HTML 表格是以行为中心的，所以仅从源代码中不容易发现列的“痕迹”，虽然可以用 tr 定义一行，但却没有相应的标签定义一列。事实上，HTML 表格中的列是由各个行中的单元格构成的。即每一行中的第一个单元格构成第一列，每一行中的第二个单元格构成第二列，依此类推。如前所述，通过以 tr 或者 tbody 作为 CSS 选择符，我们可以为表格中的一个或一组表格行应用不同的样式，如果要为某一列或几列应用独立的样式该怎么办呢？在讨论列和列组的概念之前，要实现这一点，只能靠为相应列的每个单元格应用相应的 class 属性实现，但这种方法显然不够灵活，而且相当麻烦。

HTML/XHTML 规范为此定义了 col 和 colgroup 标签，用于表示（不能像 tr 或 tbody 那样说是定义）一列或几列。这两个元素都可以使用 span 属性，表示跨越几列。比如：

<colgroup>
<col />
<col />
</colgroup>
<colgroup>
<col />
<col />
<col />
</colgroup>

表示，将五列划分为两个列组，第一个列组由第一和第二列构成，第二个列组由余下的三列构成。如果使用 span 属性，以上代码也可以写成：

<colgroup span=”2″ />
<colgroup>
<col span=”2″ />
<col />
</colgroup>

此时，第一个 colgroup 中的 span=”2″ 表示该列组包含两列；第二个列组的第一个 col 标签中的 span=”2″ 也表示两列，即第二个列组由三列构成。

下面看一个 col 和 colgroup 的例子。如下标记：

<table frame=”vsides” rules=”groups”>
<colgroup span=”2″>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<td>colgroup1</td>
<td>colgroup1</td>
<td>colgroup2</td>
<td>colgroup2</td>
</tr>
<tr>
<td>colgroup1</td>
<td>colgroup1</td>
<td>colgroup2</td>
<td>colgroup2</td>
</tr>
</table>

会生成如下样式的表格：

colgroup1	colgroup1	colgroup2	colgroup2
colgroup1	colgroup1	colgroup2	colgroup2

最后，在了解了如何生成表格行、表格列、行组以及列组后，还需要知道如何实现“合并单元格”的效果。在实践中，有的单元格需要跨越多列、或者跨越多行、或者同时跨越多列和多行。单元格以 td（或 th）定义，而跨行则由其 rowspan 属性指定，跨列由其 colspan 属性指定。如果一个单元格要跨越三行二列，那么应该写成：

<td rowspan=”3″ colspsan=”2″>

虽然理解起来有些不太直观，但只要对照以下示例代码和结果表格认真分析一下，就会明白了。

<table farme=”border” rules=”all”>
<caption>Growth Chart</caption>
<col width=”60%”>
<col width=”20%”>
<col width=”20%”>
<thead>
<tr>
<th scope=”col”>Name</th>
<th scope=”col”>Age</th>
<th scope=”col”>Height</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”3″>[1] Has <a
href=”http://en.wikipedia.org/wiki/Gigantism“>
Gigantism</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan=”3″ align=”left”>Albert</th>
<td>1</td>
<td align=”center”>2 ft. 8 in.</td>
</tr>
<tr>
<td>10</td>
<td align=”center”>4 ft. 6 in.</td>
</tr>
<tr>
<td>20</td>
<td align=”center”>6 ft. 1 in.</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan=”3″ align=”left”>Betty [1]</th>
<td>1</td>
<td align=”center”>2 ft. 3 in.</td>
</tr>
<tr>
<td>10</td>
<td align=”center”>4 ft. 2 in.</td>
</tr>
<tr>
<td>20</td>
<td align=”center”>7 ft. 2 in.</td>
</tr>
</tbody>
</table>

以上标记在 Web 页中生成的效果如下：

Growth Chart

Name	Age	Height
[1] Has href="http://en.wikipedia.org/wiki/Gigantism"> Gigantism
Albert	1	2 ft. 8 in.
	10	4 ft. 6 in.
	20	6 ft. 1 in.
Betty [1]	1	2 ft. 3 in.
	10	4 ft. 2 in.
	20	7 ft. 2 in.