网站508规范（译）（5）

<g>和<h>数据表[Data Table]

<g>对于数据表来说，要声明其行和列的标题。

<h>对于行与列的表头有两层以上逻辑的数据表格，数据单元格与标题单元格应使用标记语言关联起来。

为什么这两项条文是必要的？

本条第<g> 及<h>允许使用表，但要求该表必须按照标记语言的规则来创建表。如果有人用非视觉的方式访问网页，包含大量数据的数据将会难以解释。用屏幕阅读的用户可能很容易“迷失”在一个表格中，因为屏幕阅读器是阅读与相应栏标题和列的名字，这也许不能准确到某一特定单元格。举例来说，假设有一张工资表包括了联邦雇员的工资，按职称和等级分类。表中的每列可能代表了一个职称，每行代表了一个等级。因此，找到职称级别为9，等级为5的工资可能涉及查找表格上的第9列的第五行。一个工资图表有15个职称和10个等级，则该表将有至少150个单元格。没有一种方法把标题和每个单元格联想到一起，那就很容易想象一个用户在运用辅助技术时遇到表格的困难了。
第1194.22标准 <g>及<h>要求当信息显示在一个表格时，这些信息应使用适当的表格标签，因为反对使用协助标签像" <pre> "的预排表。网页设计师也必须使用其中一种方法，以提供标题和其相关的信息的关联。

怎样才能使HTML表格运用辅助技术获得可读性呢？

在表格中使用“Scope” 属性，“Scope”属性是其中一个最有效的办法使HTML符合这些要求，它也是执行起来最简单的方法。Scope属性还与一些（但不是全部）辅助技术一起发挥作用，在表中使用" colspan "或" rowspan "属性能够影响标题或是数据单元格。

使用Scope属性——第一行的每个表应包括行标题。通常情况下，这些行标题插入到<th>标签，虽然<td>标签也可以使用。在最上面的这些标签每一栏中应包括以下属性：

scope="col"

通过这个简单的步骤，单元格中的内容和这一行的每一个单元格关联在一起了。不像用其他方法（特别是"id" ，"header" ）没有必要在表格的单元格中包含特殊的属性。同样，每一个表的第一列应该包含标题信息。第一列的单元格用<th>或<td>标签创建。这些单元格包括以下属性：

scope="row"

通过简单地增加这个属性，单元格中的内容和这一列的每一个单元格关联在一起了。虽然这一技术大大提高了网页的可用性，使用Scope属性不会以任何方式干预不支持此属性的浏览器。
源代码示例——以下是一个总结了三名雇员工作日程的简单表，并体现了这些原则。

<table><tr><th>&nbsp;</th><th scope="col" >Spring</th> <th scope="col" >Summer</th> <th scope="col" >Autumn</th> <th scope="col" >Winter</th> </tr><tr> <td scope="row" >Betty</td> <td>9-5</td> <td>10-6</td> <td>8-4</td><td>7-3</td></tr><tr> <td scope="row" >Wilma</td> <td>10-6</td> <td>10-6</td> <td>9-5</td> <td>9-5</td></tr><tr> <td scope="row" >Fred</td> <td>10-6</td> <td>10-6</td> <td>10-6</td> <td>10-6</td></tr></table>

表格显示如下:
  Spring Summer Autumn Winter
Betty 9-5 10-6 8-4 7-3
Wilma 10-6 10-6 9-5 9-5
Fred 10-6 10-6 10-6 10-6

在大表格中使用Scope属性的效率变得更加明显。例如，如果一个机构使用了一个20行和20列的表格，其中将有400个数据单元格。如果要是此表格在不使用Scope属性的情况下遵守这个条款，将要在所有的400数据单元格上标上特殊代码，再加上40个行和列的表头单元格。相比之下，使用Scope属性只需在40个行和列的表头标上特殊代码就可以了。

在表格中使用“id”和“headers”属性

不像使用“Scope”属性，使用“id”和“headers”属性必须在表格的每个数据单元格里加入特殊属性才能让他们关联起来。虽然“id”和“headers”属性在浏览器提供支持“Scope”属性的的情况下在为可用性的效应可能已经减弱，但它们还是非常有用的，并提供一种使用的手段为访问较小的表格。

下表是比以前的例子更为复杂的表格，展现了使用"id" ，"headers"属性，还有Scope属性。这两种方法为网页中的数据表格符合本条款提供了一种手段。这个例子中，包括了两名雇员的工作时间表。每个雇员上午和下午的工作日程都不同，当他在冬季或夏季几个月中受雇工作时。

"夏天"和"冬天"栏目，每个跨度两栏标有"上午"及"下午" 。 因此，每个单元格确定一个雇员的工作日程，使用者只需知道员工的姓名（Fred 或 Wilma） ，季节（Summer 或 Winter） ，以及值班时间（morning 或 afternoon）。

<table><tr><th>&nbsp;</th><th colspan="2" id="winter" >Winter</th><th colspan="2" id="summer" >Summer</th></tr><tr><th>&nbsp;</th><th id="am1" >Morning</th><th id="pm1" >Afternoon</th><th id="am2" >Morning</th><th id="pm2" >Afternoon</th></tr><tr><td id="wilma" >Wilma</td><td headers="wilma am1 winter" >9-11</td><td headers="wilma pm1 winter" >12-6</td><td headers="wilma am2 summer" >7-11</td><td headers="wilma pm2 summer" >12-3</td></tr><tr><td id="fred" >Fred</td><td headers="fred am1 winter" >10-11</td><td headers="fred pm1 winter" >12-6</td><td headers="fred am2 summer" >9-11</td><td headers="fred pm2 summer" >12-5</td></tr></table>

表格显示如下：
  Winter Summer
  Morning Afternoon Morning Afternoon
Wilma 9-11 12-6 7-11 12-3
Fred 10-11 12-6 9-11 12-5

为每个单元格使用“id”和“headers”属性编码比“Scope”属性更为复杂。使用“Scope”属性如下所示:

<table><tr><th>&nbsp;</th><th colspan="2" scope="col" >Winter</th><th colspan="2" scope="col" >Summer</th></tr><tr><th>&nbsp;</th><th scope="col" >Morning</th><th scope="col" >Afternoon</th><th scope="col" >Morning</th><th scope="col" >Afternoon</th></tr><tr><td scope="row" >Wilma</td><td>9-11</td><td>12-6</td><td>7-11</td><td>12-3</td></tr><tr><td scope="row" >Fred</td><td>10-11</td><td>12-6</td><td>9-11</td><td>12-5</td></tr></table>

这个表格显示如下：
  Winter Summer
  Morning Afternoon Morning Afternoon
Wilma 9-11 12-6 7-11 12-3
Fred 10-11 12-6 9-11 12-5
是“summary”属性的一种选择吗？

虽然很多网页设计师极力推荐的在一张表格中总结内容的方式，但是辅助技术制造商没有对表格中的“summary”属性提供足够的支持。因此一些对总结表格内容有兴趣的web开发人员将总结内容附在表格周围或是用CAPTION标签附在表格内部。在任何情况下，web开发人员应该使用总结性表格，就像是上文说的方法关联表格中的内容.