标准化——表格

程序员文章站 2024-02-21 21:13:52

对于那些刚接触css布局的人来说，常对如何使用表格（table）感到迷惑。我在很多地方看到人们把“避免用表格来布局”理解成“完全不使用table标签”。值得注意的是，表格是...

对于那些刚接触css布局的人来说，常对如何使用表格（table）感到迷惑。我在很多地方看到人们把“避免用表格来布局”理解成“完全不使用table标签”。值得注意的是，表格是可以用的而且非常好用——只要用的正确。

是的，你得尽量的去避免用表格来布局。但是对于表格型数据，你就应该使用table。我想谈谈如何使用表格来组织表现表格型数据。在html和xhtml里，表格不仅仅是行（row）和单元格（cell），还有很多其他元素，特别是如果你想让数据更加容易理解。

首先来点背景知识，“避免用表格来布局”这句话可以在html 4.01 规范的表格介绍部分里面找到：

表格不应该纯粹的被用来布局文档内容，这样可能在处理渲染非可视媒体的时候产生问题。另外，当和图片一起使用的时候，这些表格可能在某个系统上显示过大而强迫用户拖动水平滚动条，为了减少这些问题，设计者应该使用样式表来控制布局而不是表格。

这样已经很明白了，尽管文档中说“应该”而不是“必须”，所以这个规范还是有弹性的。

但是本文并不是讨论是否使用表格布局，而是使用表格来组织表现表格型数据——这是表格诞生的本意。

当表格用来组织实际的数据时，不仅仅是一个编排布局的格子而已。一般人可以从表格的编排和表现上看出标题和数据单元格之间的关系。盲人或者有视觉障碍的人则不能做到这一点。如果一个表格要让那些使用屏幕阅读器或用其他非可视用户代理（ua）的人们能够理解，它则需要告诉用户代理它包含的信息之间是如何联系起来的。

幸运的是，html在这方面提供了很多元素和属性。然而，使用这些可以增强易用性和语义化的功能比较难而且本身不容易理解。在本文中，我尝试着解释如何使用他们。

表头， <th>

让我们从一个非常简单的表格开始——只包含一行表头和两行三列的数据。如果用以前流行的做法，只用表格的行和单元格，写出来就如下：

<table>
<tr>
<td>公司</td>
<td>雇员</td>
<td>成立于</td>
</tr>
<tr>
<td>acme inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>xyz corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

没有边框和修饰，那么上面的代码在你现在的浏览器里看起来就如下：

公司	雇员	成立于
acme inc	1000	1947
xyz corp	2000	1973

用css稍微修饰一下表格，你可以使表头在图形化浏览器里面更加明显：

公司	雇员	成立于
acme inc	1000	1947
xyz corp	2000	1973

一个视力正常的人，很容易并且很快就可以明白表头和数据单元格之间的关系。从另一方面讲，那些使用屏幕阅读器的人可以听到如下顺序的词：公司，雇员，成立于，acme inc，1000，1947，xyz corp，2000，1973。不是十分容易明白其中的关系。

第一步——最简单的——通过适当的标出表头来使得表格更加有意义。很简单：只要使用<th>标签取代表头的<td>标签即可。

<table>
<tr>
<th>公司</th>
<th>雇员</th>
<th>成立于</th>
</tr>
<tr>
<td>acme inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>xyz corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

公司	雇员	成立于
acme inc	1000	1947
xyz corp	2000	1973

这个例子虽然简单，但是已经包含了足够的信息使得屏幕阅读器能够让使用者明白表头和数据单元格之间的关系。一个屏幕阅读器一般会这么读：公司: acme inc. ，雇员: 1000，成立于: 1947., 以此类推。比之前好多了。

表格标题， <caption>

<caption>标签可以为表格提供一个简短的说明，和图像的说明比较类似。默认情况下，大部分可视化浏览器显示表格标题在表格的上方*。css里的caption-side属性用来控制表格标题显示的地方。大部分浏览器只能把表格标题显示在表格的上方或者下方，只有一些浏览器支持左边或者右边。这个就留给大家去试试了。

使用的时候，<caption>标签一定要紧接着开始的<table>标签写，如下：

<table>
<caption>table 1: company data</caption>
<tr>
<th>company</th>
<th>employees</th>
<th>founded</th>
</tr>
<tr>
<td>acme inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>xyz corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

table 1: company data
company	employees	founded
acme inc	1000	1947
xyz corp	2000	1973

当然你也可以用css去样式化表格标题。然而，要在不同浏览器里获得同样的效果还需要一定的技巧，这个也留给各位去实践了。

表格释义：summary属性

一般人可以很容易的决定是否研究一下表格的细节，只要瞥一眼就可以看出表格有多大、大概有什么内容。但是使用屏幕阅读器的人就不是那么容易了，除非我们给表格加上summary属性。这样可以提供比<caption>标签更详细的描述。

sumary属性的内容不会被可视化浏览器显示，所以可以尽可能的让描述足够长，使得那些用“听”的浏览者了解表格的内容。当然也不要用过头了，当有需要的时候才加上summary属性，比如对于很复杂的表格，添加一个summary属性可以使用屏幕阅读器人比较简单的了解表格的内容。

<table summary="the number of employees and the foundation year of some imaginary companies.">
<caption>table 1: company data</caption>
<tr>
<th>company</th>
<th>employees</th>
<th>founded</th>
</tr>
<tr>
<td>acme inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>xyz corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

缩写表头:abbr属性

当屏幕阅读器遇到一个表格，每一行会把表头连每一个数据单元格一起读出来。如果表头很长，听一遍一遍的读是十分乏味的。通过使用abbr属性，可以给那些长的表头提供简写形式，取代表头的内容。abbr属性是可选的，大部分情况表头还是（或许是应该）比较简短的。

稍微修改一下刚才的表格，让表头更长些，abbr属性就可以这样用：

<table summary="the number of employees and the foundation year of some imaginary companies.">
<caption>table 1: company data</caption>
<tr>
<th abbr="company">company name</th>
<th abbr="employees">number of employees</th>
<th abbr="founded">foundation year</th>
</tr>
<tr>
<td>acme inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>xyz corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

table 1: company data
company name	number of employees	foundation year
acme inc	1000	1947
xyz corp	2000	1973

对于第一行数据，屏幕阅读器会读表头的全称，而从第二行开始即使用简称。

这样让数据表格适应布局是挺困难的，而以下的做法更为常见：即让表头尽可能的短，或者简写，使用title属性或者<abbr>标签提供一个更长的说明。

把表头和数据联系起来：scope，id，headers属性

就我用到现在，很多表格要比上面提供的例子复杂的多。让例子复杂一点，我会移去“company”表头，并且把第一列的数据移到表头单元格里：

<table summary="the number of employees and the foundation year of some imaginary companies.">
<caption>table 1: company data</caption>
<tr>
<td></td>
<th>employees</th>
<th>founded</th>
</tr>
<tr>
<th>acme inc</th>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<th>xyz corp</th>
<td>2000</td>
<td>1973</td>
</tr>
</table>

table 1: company data
	employees	founded
acme inc	1000	1947
xyz corp	2000	1973

在这个表格里，每一个数据单元格都有两个表头。最简单的方法让那些非可视的浏览器理解这个表格，就是为每个表头添加一个scope属性。

<table summary="the number of employees and the foundation year of some imaginary companies.">
<caption>table 1: company data</caption>
<tr>
<td></td>
<th scope="col">employees</th>
<th scope="col">founded</th>
</tr>
<tr>
<th scope="row">acme inc</th>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<th scope="row">xyz corp</th>
<td>2000</td>
<td>1973</td>
</tr>
</table>

scope属性同时定义了行的表头和列的表头：

col: 列表头
row: 行表头

在第一行的

加上值为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
	men	women	founded
	employees		founded
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模型我也没有深究，还缺少一个真正复杂的表格的例子。

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

打赏

微信扫一扫

CSS之自动换行

大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 css如何将他们换行的方法！对于div 1.... [阅读全文]
DIV+CSS网页制作布局技巧学习

css布局常用的方法：float:none|left|right取值：none:　默认值。对象不飘浮left:　文本流向对象的右边r... [阅读全文]
让comment标记在各浏览器都能通用

在ie下，位于该标记下的代码是不会显示在页面中，这对于用来隐藏一些html代码非常有用。但在非ie浏览器下，该标记的无效；可分别在... [阅读全文]
IE7 beta2的CSS兼容性

当ie7 beta1推出的时候，我在第一时间对它。当时发现它对css的支持几乎没有任何变化，着实失望了一阵。ms在最近推出了ie7 ... [阅读全文]
布局遇到的问题非常不错的见解

前言还未等到下一代web开发技术ria技术成熟之前,当然还得与html作斗争。前段... [阅读全文]