真・懒

订阅 Twitter GitHub 联系

表格的 web 标准解决方案(三)

在构建数据表的时候利用表头是很重要的。不使用直觉的标签而代之以如 <b> 这样的过时标签来在视觉上暗示用户这个单元格是重要的,反之我们可以利用 <th> 标签的优点,跟我们使用 <h1> 这类的标题很类似。

可视化浏览器可能会以粗体来处理包含在 <th> 标签中的内容,但我们仍然可以用 CSS 样式化这个唯一的 <th> 标签,凸显该重要的单元格与其它包含在<td>中的表格数据的不同之处。

我们的表格例子中表头分为 4 组:Year, Opponent, and 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> 标签来标记头部单元格可以得到跟使用 <b> 相同的效果。让我们来看看为什么这是首选的方法:

当然还有其它使用表头的理由,以后我们还会进一步讨论……