HTML标记语言——表格标记(4)

使用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):

引用:
表格行能够以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设定样式的工作变得十分轻松.这就是个好例子.