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

加上摘要

另外,我们也能为<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>标签是相对独立的,因此我们能为表头加上与资料内容不同的样式.

使用表头标签的其他好处我们在接下去的章节中继续讨论.