【IT168技术】表格也是HTML非常重要的组成部分，它最重要的用途是清晰地排列、展现数据信息，也有不少开发者利用它规划网页布局。由此引申出表格的两种类型，数据表格和布局表格(layout table)。数据表格通过多行多列清晰、准确地展现信息，而布局表格通常是被用来布局页面上的图片或者文字。虽然数据表格和布局表格的定义很清晰，但有些开发人员还是对何时使用数据表格，何时使用布局表格感到困扰，一个简单好用的判断标准是询问自己，“该表格行或者列之间的数据是否有“关系”?”，如果您的答案是“是”，那么我们基本可以判断这个表格是数据表格。以下着重介绍使用表格时最容易发生的两类问题及解决方案。
为数据表格设置caption或者summary属性
一个简单的数据表格用一行来显示列名，或者用一列来显示行名,
▲图4 屏幕阅读器识别无caption/summary的表格
示例代码如下：
<caption>Job scheduling</caption>
<tr>
<th scope="col">Job title</th>
<th scope="col">Start and end dates</th>
<th scope="col">Preferred time</th>
<th scope="col">Frequency</th>
<th scope="col">Job Status</th>
</tr>
...
</table>
需要注意的是，当你为某个数据表格指定了caption属性时，
恰当使用布局表格(layout table)
HTML布局表格可以被用来布局页面上的图片、文字等，这是layout table很可取得一面。但另一方面，页面上的layout table如果编码不当的话会给屏幕阅读器的使用者浏览web页面带来一些困扰。当使用屏幕阅读器 显示网页上的所有表格的时候，缺省地，layout table是不会出现在表格列表中的，但事实上屏幕阅读器经常会错把layout table当成数据table罗列出来，当用户选择了该冒充数据表格的layout table去“听”内容时，又没有实际的内容，用户会感到非常的困惑。数据表格如何恰当使用，请参考以下几点：
a) 避免为layout table设置summary属性
为了解决layout table“冒充”数据表格的问题，有些开发人员会如下设置layout table的summary属性：summary="", 或者summary="layout table"，这看起来是一个可取的办法但却并不是推荐的实现技术，我们要避免为layout table提供summary。
b) 利用WAI-ARIA presentation role定义layout table
通过为layout table定义WAI-ARIA presentation role，可以强制屏幕阅读器忽略表格的结构而仅仅关注表格的内容，从而有效地在避免表格结构带来的混淆。
c) 推荐采用CSS样式表来实现页面布局。
Cascading style sheets (CSS)
众所周知，CSS用来描述web 页面元素的表现形式，可以定义字体，颜色，间隔等等。Web开发人员通过CSS的定义，可以保证Web UI的一致性，同时，用户自定义的CSS可以使得用其倾向的样式取代web开发人员所定义的样式。例如，弱视人群可以定义更大的字体和更高的对比度使其更容易阅读web内容。但就目前的情况而言，并不是所有的web浏览器都很好的支持了CSS这项技术，如果web页面中包含CSS，但用户所用的浏览器或者辅助工具不支持，那有些重要的内容就很有可能被用户所忽视，所以这个验证点要求，如果浏览器不支持或者将CSS disable掉的时候，用户仍然可以直接清晰的”读懂“页面上的内容或者通过web开发者提供的一些其他的等价的方式“读懂”页面。
避免使用CSS生成传达重要信息的内容
:before and :after pseudo-elements可以产生一些额外的信息，例如可以确定样例代码的起始和结束，如下例：
.example:after { font-style: italic; color: red; content: "End example."; }
....
<code class="example">
<table border="1" summary="A simple data table showing the number of boys and girls in each grade">
<caption>Boys and Girls in Elementary School Classes</caption>
</code>
开发人员在开发过程中往往会忽视跨浏览器的兼容，上述样式单的定义只在Firefox中有很好的支持，但是IE确不支持，所以使用IE的用户就访问不到需要传达的信息。在这种情况下，开发人员应该提供等价的文字内容以保证内容的可读性。但对于用CSS产生的纯装饰的Image，不需要提供等价的文字内容。
如果使用CSS产生重要的image，当CSS被禁用的时候，等价的文字内容必须是可获得的。
例如，有一个广告图片，是一个CSS背景图片， 显示30天免费试用，当用户点击该图片的时候，会被带到登录页面，显而易见，这个图片传递了重要的信息。
当用户采用高对比度访问该页面的时候，CSS的背景图片会消失。这是开发人员没有实施恰当的编码来处理这种高对比度的模式，而导致用户无法访问该图片。
只要通过恰当的处理，就可以处理这种情况，如下代码：
#trial {
background-image: url(30daytrial.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-top: 68px;
}
.access {
position: absolute;
left: -3000px;
width: 500px;
}
</style>
<div id="trial">...</div>
<span class="access"><a href="#">30 day free</a></span>
通过上边的代码，在高对比度和disable的模式下，用户依然可以通过Screen reader读取到这个重要信息。
使用CSS来隐藏内容
有些内容不希望显示在页面上，但又希望可以被一些辅助工具，例如screen reader读出来，那就可以使用CSS来达到这个目的。如下例：
.access {position:absolute;
left: -3000px;
width: 500px; }
</style>
...
<p class="access">The access keys for this page are:</p>
<ul class="access">
<li>ALT plus 1 links to the w3.ibm.com home page</li>
....
不要使用display:none属性来隐藏内容，因为它不仅不显示在页面上，而且对那些辅助的工具也成了不可见的。
