标准化设计解决方案 - 标记语言和样式手册
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 从标记语法谈起
Chapter 2 邪恶的表格？
你知道吗?不知何时开始,使用表格居然变成充满罪恶的举动了?的确,以web标准编写网页的最大迷思就是"不要再使用表格了,永远不要!" 听起来表格就和瘟疫一样必须躲开,必须密封起来丢进满是灰尘的柜子里,当成是网络发展时代早期流传下来的古董保存起来.
如此的厌恶从何而来呢? 或许一开始十分单纯,至少拥有一个好的理由.很多人会理直气壮的宣扬抛弃传统的表格嵌套与补空gif图片的布局方式,改用灵活的结构化的css布局方式的好处.我们可能就开始抽丝剥茧的去掉所有的表格,甚至开始顽固的坚持把所有的表格驱逐出去 — 根本不分场合.
书中稍后我们会看到css布局的方法和这样做带来的所有好处.但是现在我们还是先来看看如何在适当的场合—也就是标记数据列表的时候使用表格.我们会研究几个简单的方法是我们的数据列表变得更容易使用,更漂亮.
完全就是表格
在标记列表数据时,我们绝对没有理由不去用表格标签.但是等等,什么才是列表数据?这边有一些例子:
对这些例子以及许多其他情况来说,必须使用非常复杂严格的css特效才能让资料看起来像表格,或许你能想象,用巧妙的css浮动,定位所有项目之后得到的是不兼容的矛盾的结果,更别提拿掉css之后,准确读出每笔资料大概会成为不可能完成的任务.事实上,我们不必畏惧表格—我们应该用他们设计之初的目标来使用它们.
适合所有人的表格
表格找来谩骂的原因之一是如果没有小心使用的话会存在可用性缺陷.举例来说:屏幕阅读程序难以正确读出内容,而小屏幕设备经常被用来布局的表格扰乱,但是我们有一些简单的方法增加列表数据表格的可用性.同时建立灵活的结构,方便未来以css设定样式.
让我们看看 图3-1 中的简单示例,这是美国棒球联赛的联盟记录:
图 3-1:典型的资料表示例
也许对红袜队球迷来说这是非常郁闷的统计资料,不过图3-1的却是列表资料的完美示范.它有三个表头(year,opponent,season record(w-l)),跟着是四年份的资料.在表格上面的是表格标题,说明了表格的内容.
标记这个资料表格的方式十分直观,我们或许会以这样的代码完成这个工作:
<p align="center">Boston Red Sox World Series Championships</p>
<table>
<tr>
<td align="center"><b>Year</b></td>
<td align="center"><b>Opponent</b></td>
<td align="center"><b>Season Record (W-L)</b></td>
</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>
这样显示的结果应该和图3-1十分相似,但是,我们可以在这个基础上加上一些改进.
首先,我们能用更加语义化的<caption>标签来存放"Boston Red Sox World Series Championships".<caption>标签需要紧跟在<table>起始标签后面,通常用来存放表格的标题或者表格资料的说明.
看上去,它更容易让使用者看出表格的主题,同时也能够帮助以其他方式得知网页内容的人.
让我们拿掉开头的那个段落,并加入正确的<caption>:
<table>
<caption>Boston Red Sox World Series Championships</caption>
<tr>
<td align="center"><b>Year</b></td>
<td align="center"><b>Opponent</b></td>
<td align="center"><b>Season Record (W-L)</b></td>
</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>
重要的是,标题必须快速传达后面资料的主题,根据默认设置,大多数可视化浏览器将<caption>标签内的文字居中显示在表格的最上面,当然,我们稍后可以使用css来改变默认设置的样式 — 本章的技巧延伸中会讨论这个问题.事实上,现在标题位于独特的标签内,正好让我们之后的修改工作变得轻松简单.
加上摘要
另外,我们也能为<table>标签加上summary属性,进一步解释这个表格的目的和内容,摘要属性对非可视化浏览器尤为重要,这能帮助它们解说表格的内容.
以下是为示例表格加上摘要属性的代码:
<table summary="This table is a chart of all Boston Red Sox World Series wins." >
<caption>Boston Red Sox World Series Championships</caption>
<tr>
<td align="center"><b>Year</b></td>
<td align="center"><b>Opponent</b></td>
<td align="center"><b>Season Record (W-L)</b></td>
</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>
表格的表头
在建立数据表格时,善用表头是件很重要的工作.在标记重要单元格时,我们可以发挥<th>标签的作用,而不是使用<b>之类在显示上暗示用户这个单元格是重要的的显示效果标签.就像我们在第二章中使用标题标签标记段落标题一样.
可视化浏览器或许会以粗体居中的效果显示<th>标签中的内容,但是我们依然可以用<th>标签的独特性,稍后再给这些重要的内容加上不同的样式,以便于存放在<td>内的一般资料及进行区别.
除显示效果的优势外,使用<th>标签也能帮助非可视化浏览器 — 这部分我们稍后进行深入讨论.
示例表格中的表头是最上面的那一行: Year,Opponent和Season Record(W-L).我们来把刚才的显示效果标签替换成正确的表头标签:
<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>Year</th>
<th>Opponent</th>
<th>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>
使用<th>标签来标记表头单元格和图3-1中的效果是一样的,让我们来看看为什么这个方法比较好:
我们不必使用额外的显示效果标签让表头突出显示在资料内容之外.
根据默认设置,大部分可视化浏览器都会以粗体居中的效果展示<th>标签中的内容.让使用者轻易分辨出表头和表格内容的区别.
由于它和<td>标签是相对独立的,因此我们能为表头加上与资料内容不同的样式.
使用表头标签的其他好处我们在接下去的章节中继续讨论.
表头与数据的关系
我们可以利用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规则,在本章最后的技巧延伸终究会讨论这个方法.
使用abbr属性
在之前的示例中,或许你会觉得表头中"Season Record (W-L)"用语音合成器来念实在太长了一些,此时,只要加上abbr属性,我们就能缩短发音时的内容,同时又为可视化浏览器保留了<th>单元格中的原始文字.
<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" abbr="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>
我们加上了 abbr="Record" 后,屏幕阅读器会读出表头使用简短的版本后的"Record".
<thead>,<tfoot>和<tbody>
在这里我还想提一下三个与表格相关的标签.它们不仅能为表格结构提供更精确的语义,同时也为css提供额外的标签,让你在设计表格行的样式时不用为<tr>标签设计那么多的class.
引用一段W3C在HTML4.01规格中对这些标签的说明(http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3):
引用:
表格行能够以thead,tfoot和tbody标签分成表头,表尾以及数目不限的表格主体.这种分类法让浏览器支持独立卷动表格主体的功能.打印长表格时,表头和表尾也能在包含表格资料的每一页上重复出现.
因此,使用使用这种分类方式也能让支持独立表格主体的浏览器使用者更容易阅读表格内容,特别是长表格.
<thead>与<tfoot>必须出现在<tbody>之前,让浏览器与其他设备能够先载入这些内容,以这种表格行分类方式标记表格看起来是这样的:
<table>
<thead>
<tr>
...table header content...
</tr>
</thead>
<tfoot>
<tr>
...table footer content...
</tr>
</tfoot>
<tbody>
<tr>
...table data row...
</tr>
<tr>
...table data row...
</tr>
<tr>
...table data row...
</tr>
</tbody>
</table>
你会发现,表头和表尾资料以<thead>和<tfoot>标签包围,放在表格数据行之前.
就像我之前所说的那样,这些标签不仅能为表格提供更精确的语义,还能给css提供样式锚点让你为这些特定内容设置css规则,而不必为每个<tr>设计那么多的class.
举例来说,如果我们只想给数据区块(以<tbody>标记)设定与其他区块不同的背景色.那么我们只需要写这样一段css就能达到目的:
tbody {
background-color: gray;
}
如果没有tbody标签的话,我们需要为每个想要加上灰色背景的<tr>标签添加class属性.有意义的标记方式经常能使之后用css设定样式的工作变得十分轻松.这就是个好例子.
149900898 296823656 466741366 598784086 (售后技术支持)296823656 
影视广告
