标准化——表格_CSS/HTML

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

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

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

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

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

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

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

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

表头，

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

1. 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   公司	雇员	成立于
   ACME Inc	1000	1947
   XYZ Corp	2000	1973

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

公司	雇员	成立于
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。不是十分容易明白其中的关系。

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

1. 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   公司	雇员	成立于
   ACME Inc	1000	1947
   XYZ Corp	2000	1973

公司	雇员	成立于
ACME Inc	1000	1947
XYZ Corp	2000	1973

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

表格标题，

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

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

标签写，如下：

Table 1: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

Table 1: Company data

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

当然你也可以用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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• 手把手教你CSS架构之SMACSS
• css怎么降低背景透明度
• 怎么用css样式把图片改为灰色
• css3如何让animation动画停止
• 标准化——表格_CSS/HTML

• 框架初始类文件
• 前端应用
• MVC目录结构规划
• 博客前后台功能介绍

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论

立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

认证0级讲师

发布技术文章

• 最新文章
• 热门排行

• css3实现汤勺捞起汤圆的动画特效（超可爱）！
• 详细介绍CSS渐变、阴影和滤镜
• 你了解 Transition 吗？一起来深入了解下Transition！
• 鲜为人知！用css做极光效果
• 浅析CSS中的5种设计模式，聊聊vue项目中CSS目录代码的作用
• 深入浅析css中的层叠上下文
• 手把手教你使用纯CSS仿AntDesign的Logo彩蛋效果
• 手把手带你使用纯CSS绘制一个中国结，并添加动画效果！

• css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍
• css如何设置背景图片？background属性添加背景图片
• html怎么添加背景图片且让图片平铺整个页面？（代码示例）
• css怎么设置字体大小
• HTML怎么设置下划线？html文字加下划线方法
• html a标签怎么设置颜色？超链接的颜色设置总结（css样式）
• css3如何设置边框颜色渐变？css3边框颜色渐变的两种实现方法
• css如何设置透明度？设置透明度的两种方法（代码实例）

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

• php视频教程
• html视频教程
• css视频教程
• JS视频教程
• jQuery视频教程
• mysql视频教程
• Linux视频教程
• Python视频教程

• 网站首页
• PHP视频
• PHP实战
• PHP代码
• PHP手册
• 词条
• 手记
• 编程词典
• php培训

：公益在线php培训，帮助PHP学习者快速成长！

Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作

  

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