标准化——表格_CSS/HTML

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

表格标题，

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

使用的时候，标签一定要紧接着开始的

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

表格释义：summary属性

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

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

1. 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   Table 1: Company data

   Company	Employees	Founded
   ACME Inc	1000	1947
   XYZ Corp	2000	1973

缩写表头:abbr属性

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

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

1. 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   Table 1: Company data

   Company Name	Number of Employees	Foundation Year
   ACME Inc	1000	1947
   XYZ Corp	2000	1973

Table 1: Company data

Company Name	Number of Employees	Foundation Year
ACME Inc	1000	1947
XYZ Corp	2000	1973

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

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

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

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

1. 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   Table 1: Company data

   	Employees	Founded
   ACME Inc	1000	1947
   XYZ Corp	2000	1973

Table 1: Company data

	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

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

1. 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   Table 1: Company data

   	Employees	Founded
   ACME Inc	1000	1947
   XYZ Corp	2000	1973

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

col: 列表头

row: 行表头

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

Scope属性还有两个值：

colgroup: 定义列组（column group）的表头信息

rowgroup: 定义行组（row group）的表头信息

一个列组是由标签定义的。行组则是由、和定义的。稍后我将会详细介绍它们。

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

1. 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   Table 1: Company data

   Company	Employees	Founded
   ACME Inc	1000	1947
   XYZ Corp	2000	1973

这样的话可视化浏览器不会默认的把company name显示为表头。所以需要用CSS来修正一下，就刚才那个例子，我使用了下面的CSS：

1. td[scope] {
   
2. font-weight:bold;
3. }

要注意上面的规则使用了属性选择符，IE是不支持的。而通过添加一个class来样式化表头是个不错的办法。

Table 1: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

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

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

1. 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   Table 1: Company data

   	Employees		Founded
   	Men	Women
   ACME Inc	700	300	1947
   XYZ Corp	1200	800	1973

Table 1: Company data

	Employees		Founded
	Men	Women
ACME Inc	700	300	1947
XYZ Corp	1200	800	1973

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

跨行和跨列

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

列和列组：和

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

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

行组： , , 和

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

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

1. 
   
   
   
   
   
   … 更多表头的行
   
   
   
   
   
   
   
   … 更多表尾的行
   
   
   
   
   
   
   
   … 第一个
   的行
   
   
   
   
   
   
   
   … 第二个
   的行
   
   
   
   … 更多的

使用行组有以下几个原因：

这样样式化表头、表尾和表身比较方便，而且独立，不必要给每个标签加样式或class。

当打印比较长的表格的时候，一些浏览器（比如基于Mozilla的）会在每一页的开头重复表头和表尾的内容，这样阅读打印版本的表格就比较方便。

区分开表头和表尾也可以使一些浏览器浏览表格的时候，只滚动表身。

仅为数据表格而写

本文所写的所有都是关于使用HTML表格来组织和表现数据。如果你还是想用表格来布局，那么上文所述的都没有意义而且用不到。没有summary属性、没有表头、没有、什么都没有，没有格式，陈旧的布局表格除了

,,和的描述也不是很深。对于格式化和样式化还有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

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

标准化——表格_CSS/HTML

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

推荐度：

点击下载本文 文档为doc格式

标签： 表格 标准 html

• 热门焦点

最新推荐

猜你喜欢

热门推荐

专题

产品服务 发展历程 企业资讯 企业文化 关于我们 加入我们 联系我们 网站导航 网站律师

• 
• 
• 
• 
• 

  中国扫黄打非网

Copyright © 2019-2024 51dongshi.com 版权所有

赣ICP备2023002352号-2

违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务

Top

什么都可以不要。另外还要承担风险，即如何面对那些非可视的用户代理（UA）。 优势 看来要用HTML做一个有语义化的数据表格有很多工作。对于复杂的表格是这样的。有时候基本上是不可能手工写出来的。但是对于简单的表格，那么使用一个	加上scope属性就可以了，又快又简单。 非常明显，语义化的表格对于使用屏幕阅读器或其他辅助技术的浏览者非常有好处。让那些巨大而复杂的表格“听”起来很有意义是非常困难的，所以尽可能的使表格简单。 另外对于使用可视化浏览器的设计者和用户也是有好处的：一个语义化的表格有大量的接口可以利用CSS来样式化，好的样式可以让表格更加易用。 其他 除了本文，还有更多关于数据表格内容。比如这里就没有提到axis属性，并且对于