标准化——表格
|
一般人可以很容易的决定是否研究一下表格的细节，只要瞥一眼就可以看出表格有多大、大概有什么内容。但是使用屏幕阅读器的人就不是那么容易了，除非我们给表格加上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> Table 1: Company data 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> Table 1: Company data 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; } （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
