一个视力正常的人,很容易并且很快就可以明白表头和数据单元格之间的关系。从另一方面讲,那些使用屏幕阅读器的人可以听到如下顺序的词:公司,雇员,成立于,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>
Table 1: Company data Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973
.