您现在的位置： 网页制作教程网 >> 网页设计 >> 网页布局排版 >> 文章正文

col: 列表头
row: 行表头
在第一行的<th>加上值为col的scope属性，声明他们是下面数据单元格的表头。同样的，给每行的开头<th>加上值为row的scope属性声明他们是右边数据单元格的表头。

Scope属性还有两个值：

colgroup: 定义列组（column group）的表头信息
rowgroup: 定义行组（row group）的表头信息
一个列组是由<colgroup>标签定义的。行组则是由<thead>、<tfoot>和<tbody>定义的。稍后我将会详细介绍它们。

如果你既想要保留“Company”表头，而又想让公司名字作为行表头（row headers）显示，你会怎么做？那样的话，应该使得包含公司名字的单元格同时提供表头和数据信息。也就是说，<td>标签也应该加上scope属性：

<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<th scope="col">Company</th>
<th scope="col">Employees</th>
<th scope="col">Founded</th>
</tr>
<tr>
<td scope="row">ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td scope="row">XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>
这样的话可视化浏览器不会默认的把company name显示为表头。所以需要用CSS来修正一下，就刚才那个例子，我使用了下面的CSS：

td[scope] {
font-weight:bold;
}
要注意上面的规则使用了属性选择符，IE是不支持的。而通过添加一个class来样式化表头是个不错的办法。

Table 1: Company data Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973

另一个连接表格数据单元格和表头的方法就是给每一个表头添加一个唯一的ID。然后为下面的数据单元格添加headers属性，这个headers属性值包含用空格分开的各个ID，这些ID代表的表头各自关联到该数据单元格上。这样做很复杂，只是当有超过两个表头的单元格才用。在复杂的和不规则的表格中，scope属性就力不从心了。

为了演示，我修改了一下表格，加上了公司雇员性别及人数：


<table class="extbl" summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<td rowspan="2"></td>
<th id="employees" colspan="2">Employees</th>
<th id="founded" rowspan="2">Founded</th>
</tr>
<tr>
<th id="men">Men</th>
<th id="women">Women</th>
</tr>
<tr>
<th id="acme">ACME Inc</th>
<td headers="acme employees men">700</td>
<td headers="acme employees women">300</td>
<td headers="acme founded">1947</td>
</tr>
<tr>
<th id="xyz">XYZ Corp</th>
<td headers="xyz employees men">1200</td>
<td headers="xyz employees women">800</td>
<td headers="xyz founded">1973</td>
</tr>
</table>
Table 1: Company data Employees Founded
Men Women
ACME Inc 700 300 1947
XYZ Corp 1200 800 1973

你可以发现，这种方法真的很麻烦，所以如果可能的话，还是尽量用scope属性吧。

跨行和跨列

在以前用表格布局的年代，rowspan属性和colspan属性常被用来让单元格跨几列或跨几行，来布局那些经过整齐切割的图像。这两个属性现在还在用， 因为并没有CSS来控制单元格的跨行和跨列。仔细想想，其实是很有道理的：跨行和跨列示表格结构(structure)的一部分，而不是其表现(presentation)。

列和列组：<col>和<colgroup>

HTML提供了<colgroup>和<col>标签来为相关的表格列分组。这样就可以（在一些浏览器中）使用CSS来单独的为列样式化。列组也可以使用scope属性来标明其表头信息。

这就是我要说的关于列和列组的全部。更多信息参考“其他”部分。

行组： <thead>, <tfoot>, 和<tbody>

表格的行可以分组为表头组(<thead>), 表尾（或表注）组(<tfoot>), 然后是一个或多个表身(<tbody>) 。每一个行组必须包含一个或多个表格行。

如果一个表格包含<thead>，那么它必须出现在<tfoot>和<tbody>之前。而<tfoot>则必须出现在<tbody>之前。如果没有使用<thead>和<tfoot>，那么<tbody>标签也可以不加（也不是非得不加，随你喜欢了）。一个有行组的表格结构看起来如下：

<table>
<thead>
<tr></tr>
… 更多表头的行
</thead>
<tfoot>
<tr></tr>
… 更多表尾的行
</tfoot>
<tbody>
<tr></tr>
… 第一个<tbody>的行
</tbody>
<tbody>
<tr></tr>
… 第二个<tbody>的行
</tbody>
… 更多的<tbody>
</table>
使用行组有以下几个原因：

这样样式化表头、表尾和表身比较方便，而且独立，不必要给每个标签加样式或class。
当打印比较长的表格的时候，一些浏览器（比如基于Mozilla的）会在每一页的开头重复表头和表尾的内容，这样阅读打印版本的表格就比较方便。
区分开表头和表尾也可以使一些浏览器浏览表格的时候，只滚动表身。
仅为数据表格而写

本文所写的所有都是关于使用HTML表格来组织和表现数据。如果你还是想用表格来布局，那么上文所述的都没有意义而且用不到。没有summary属性、没有表头、没有<caption>、什么都没有，没有格式，陈旧的布局表格除了<table>,<tr>,<td>什么都可以不要。另外还要承担风险，即如何面对那些非可视的用户代理（UA）。

优势

看来要用HTML做一个有语义化的数据表格有很多工作。对于复杂的表格是这样的。有时候基本上是不可能手工写出来的。但是对于简单的表格，那么使用一个<th>加上scope属性就可以了，又快又简单。

非常明显，语义化的表格对于使用屏幕阅读器或其他辅助技术的浏览者非常有好处。让那些巨大而复杂的表格“听”起来很有意义是非常困难的，所以尽可能的使表格简单。

另外对于使用可视化浏览器的设计者和用户也是有好处的：一个语义化的表格有大量的接口可以利用CSS来样式化，好的样式可以让表格更加易用。

其他

除了本文，还有更多关于数据表格内容。比如这里就没有提到axis属性，并且对于<colgroup>和<col>的描述也不是很深。对于格式化和样式化还有border模型我也没有深究，还缺少一个真正复杂的表格的例子。

想了解更多信息，可以参考以下文章：

Tables in HTML documents
CSS formatting of tables
Techniques for Accessible HTML Tables
Building accessible websites: Tables and frames
A table, s’il vous plaît

上一页  [1] [2] [3] 

推荐文章

相关文章