表头与数据的关系
我们可以利用headers属性把表头和对应的<td>中的数据关联起来,使屏幕阅读器能更容易为需要的人们组织表格内容.在使用了这个属性之后,屏幕阅读器将能更符合逻辑的读出表格内容,而不是像平常一样死板的从每列最左边读到最右边.
我们继续使用红袜队战绩表当作例子来示范使用方法.首先,我们需要为<表格中的每个<th>加上一个唯一的id,接着再为每个资料单元格加上headers属性,对应正确的表头.
为每个表头加上id很简单,就是这样:
<table summary="This table is a chart of all Boston Red Sox World Series wins."> <caption>Boston Red Sox World Series Championships</caption> <tr> <th id="year">Year</th> <th id="opponent">Opponent</th> <th id="record">Season Record (W-L)</th> </tr> <tr> <td>1918</td> <td>Chicago Cubs</td> <td>75-51</td> </tr> <tr> <td>1916</td> <td>Brooklyn Robins</td> <td>91-63</td> </tr> <tr> <td>1915</td> <td>Philadelphia Phillies</td> <td>101-50</td> </tr> <tr> <td>1912</td> <td>New York Giants</td> <td>105-47</td> </tr> </table>
我们为每个表头id选择简短的有描述意义的名称,接着我们再为每个资料单元格加上适当的headers属性,让内容匹配正确的表头id:
<table summary="This table is a chart of all Boston Red Sox World Series wins."> <caption>Boston Red Sox World Series Championships</caption> <tr> <th id="year">Year</th> <th id="opponent">Opponent</th> <th id="record">Season Record (W-L)</th> </tr> <tr> <td headers="year">1918</td> <td headers="opponent">Chicago Cubs</td> <td headers="record">75-51</td> </tr> <tr> <td headers="year">1916</td> <td headers="opponent">Brooklyn Robins</td> <td headers="record">91-63</td> </tr> <tr> <td headers="year">1915</td> <td headers="opponent">Philadelphia Phillies</td> <td headers="record">101-50</td> </tr> <tr> <td headers="year">1912</td> <td headers="opponent">New York Giants</td> <td headers="record">105-47</td> </tr> </table>
在为表头和内容之间建立对应关系后,屏幕阅读器可能会议这样的方式读出表格的每一行内容: "Year:1918,Opponent:Chicago Cubs,Season Record(W-L):75-51",比起从左到右读出每格内容的方法来说,这样就有意义多了.
让每个<th>具有唯一的id还有其他的好处,我们可以使用这个辨别依据,设定特殊的css规则,在本章最后的技巧延伸终究会讨论这个方法.
出处:蓝色理想
责任编辑:bluehearts
上一页 标记语言——邪恶的表格? [2] 下一页 标记语言——邪恶的表格? [4]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|