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

真・懒写于

来自Dan Cederholm的Web Standards Solutions: The Markup and Style Handbook的第三章Tables are Evil?,事关表格在web标准下的正确使用。我利用工作的空余时间,将这一章节完全翻译奉上。今天送上A Table that Everyone Can Sit At,还不是很精彩。

待翻译完整章后我会整理成传承标准的一个栏目。由于工作关系,大伙不要催我,我会自觉完成的。:)

完全表格式

完全没有理由不用表格来标记表格式的数据。但是等等,什么叫表格式数据?这是一些例子:

这些例子和其他更多的,(不使用表格的话)可能需要很多CSS高难度技术来标记以便看起来像是一个表格。你可以想象一下,试着用狡诈的CSS规则来浮动和定位每一项,但往往只能以沮丧的结局告终。不要说没有CSS就能精确的读出数据是一个恶梦。事实是,我们不应该害怕表格——并且应该在正确的场合使用它们。

人人适合的表格

表格受到谴责的一个原因是,如果使用不小心,它们会导致易用性的问题。比如,屏幕阅读器要正确读取十分艰难,小屏幕设备常常因用以布局的表格而备受干扰。但是还有一些细小的事情我们可以做到,以提高数据表格的易用性,同时创建了一个苗条的结构,然后可以轻易地用CSS来样式化。

让我们来看看一个简单的表格例子,如图,描述了一支美国棒球队的长期战败。

尽管Red Sox迷看到会极度失望,但这还是一个极为完美表格式数据的例子。有三个表格头部(Header),包括Year, Opponent, and Season Record (W-L),跟随着该队四年中表现的数据。表格之上的是说明(Caption),定义表格所包含的内容。

标记这样的数据表格是很直截了当的,我们可能会这样做:

<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>

这将会产生跟图十分接近的效果,但是,有些东西我们还可以改进。

首先,我们马上可以把表格的标题"Boston Red Sox World Series Championships" ,修正成更具语义性的<caption>标签。<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>标签内的文字放置在表格上方中间处。我们可以,当然,更改默认的样式——后面我们还有例子演示。现在只需了解,表格本身独特的标签让这更漂亮和简单。