| 公司 | 雇员 | 成立于 |
| 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> | 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> | 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> | 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来样式化表头是个不错的办法。
| 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> | 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> 使用行组有以下几个原因：
仅为数据表格而写
本文所写的所有都是关于使用HTML表格来组织和表现数据。如果你还是想用表格来布局，那么上文所述的都没有意义而且用不到。没有summary属性、没有表头、没有caption>、什么都没有，没有格式，陈旧的布局表格除了table>,tr>,td>什么都可以不要。另外还要承担风险，即如何面对那些非可视的用户代理（UA）。
优势
看来要用HTML做一个有语义化的数据表格有很多工作。对于复杂的表格是这样的。有时候基本上是不可能手工写出来的。但是对于简单的表格，那么使用一个th>加上scope属性就可以了，又快又简单。
非常明显，语义化的表格对于使用屏幕阅读器或其他辅助技术的浏览者非常有好处。让那些巨大而复杂的表格“听”起来很有意义是非常困难的，所以尽可能的使表格简单。
另外对于使用可视化浏览器的设计者和用户也是有好处的：一个语义化的表格有大量的接口可以利用CSS来样式化，好的样式可以让表格更加易用。
其他
除了本文，还有更多关于数据表格内容。比如这里就没有提到axis属性，并且对于colgroup>和col>的描述也不是很深。对于格式化和样式化还有border模型我也没有深究，还缺少一个真正复杂的表格的例子。
想了解更多信息，可以参考以下文章：
咨 询 客 服