第十九天：使用真的表格标头

如果你的站台上有个月历，就应该是以 HTML 表格画出来的。试图做出纯 CSS 月历的人并不多，而且那样子其实反而不对；因为月历本来就是资料表格，所以就应该用表格来做出来。

资料表格中最重要的一件事就是要做出适当的标头。在月历这个例子里，就是指最上面的星期几。你应该明确地在表格中囊括这是星期几的标头；如果你不想要让他们被看见，就该用 CSS 来处理掉（我在我的网志上就是这样子用的）。但是标头无论如何都该存在，因为荧幕朗读软体会靠着这些东西来让盲胞读者得以浏览表格而不会迷失。

月历这玩意儿（其实任何资料表格都一样，真的，但是我们今天祇讨论月历的部分），如果你一次看整个的话用起来就很简单；但是如果你一次祇看得到一天的话用起来就会很困难。想像一下你桌上如果有一份日历，但是上面祇写出当天的日期，却不标示那是星期几。就这样一页一页下去： 1, 2, 3, 4, 5, 6, 7... 今天是 4 号，而我还知道这是星期四。现在继续翻到 11, 12, 13. 快一点： 13 号是星期几？这一页不会告诉你，你得自己去追查出来。

这就跟盲胞读者在浏览没有合适标头的月历时所发生的状况相似。你祇会得到一大堆数字，却没有能够加以追踪的情境线索。在月历中加上适当的标头能够让荧幕朗读软体把表格标头（星期几）跟表格资料（日期）联系在一起，并且一起唸出来。“ Thursday 4, Thursday 11, Friday 12, Saturday 13 ”，嗯，原来是星期六啊。

请注意我说的是适当的标头。单单祇把星期几放在第一列的 <td> 标签里是不够的，你还得改用 <th> 标签才行。多数的网志模版在这里都弄错了，不过要修好其实很简单，而且你的月历并不会因此而看起来有所不同。

谁因此获益？

  1. Jackie 从中获益了。因为当她遇到你的月历时， JAWS 会先念出标题，然后再唸出标头，接着 Jackie 可以按着 Control + ALT 不放，就能够用方向键在表格里移动。当她移动的时候， JAWS 还会同时唸出标头（星期几）和格子里的资料（日期）。

    所有的主流荧幕朗读软体都支援这类的表格导览功能。 Home Page Reader 就允许使用者切换到“表格导览”模式 (ALT+T) ，然后使用者无须再按住任何按键，就能够在月历里浏览。 Home Page Reader 在这里确实略胜 JAWS 一筹。我们马上就会看到，你还能为每一个表格标头定义简短（或更长）的标题（有点像在为链结增加标题一样），这时 Home Page Reader 还会改念这个标题。这表示你可以在视觉上把你的星期显示成“ Sun ”、“ Mon ”、“ Tue ”，而让 Home Page Reader 把他们唸成“ Sunday ”、“ Monday ”、“ Tuesday ”。真酷！

怎么做

如果你从来没有这样做过，请先确定你的月历有真的标题。 <caption> 标签一定要紧接在 <table> 标签之后，然后 <th> 标签列才再紧接在这之后。

在 Movable Type 中，从你的主索引模版里寻找月历的部分（同样地，你可以搜寻“ calendarhead ”就差不多能找到了）。紧接在 <caption> 之后，你可以看到星期几被定义着：

<tr>
<td align="center"><span class="calendar">日</span></td>
<td align="center"><span class="calendar">一</span></td>
<td align="center"><span class="calendar">二</span></td>
<td align="center"><span class="calendar">三</span></td>
<td align="center"><span class="calendar">四</span></td>
<td align="center"><span class="calendar">五</span></td>
<td align="center"><span class="calendar">六</span></td>
</tr>

请把它改成这样：

<tr>
<th abbr="星期日" align="center"><span class="calendar">日</span></th>
<th abbr="星期一" align="center"><span class="calendar">一</span></th>
<th abbr="星期二" align="center"><span class="calendar">二</span></th>
<th abbr="星期三" align="center"><span class="calendar">三</span></th>
<th abbr="星期四" align="center"><span class="calendar">四</span></th>
<th abbr="星期五" align="center"><span class="calendar">五</span></th>
<th abbr="星期六" align="center"><span class="calendar">六</span></th>
</tr>

这里有两个要点：所有的 <td> 标签都换成了 <th> ，而且他们也都被加进了“ abbr ”属性来指定星期几的全称（“ abbr ”属性会有两个功用。对于非常长的表格标头来说，它可以被当成缩写来用，一如其名；但对于非常短的表格标头来说，它却能提供较长的版本。这也就是我们在此所做的事。）

在 Radio 中，程序就跟昨天你在给表格真的标题时很像。

  1. 在 Radio 里，开启实际的 Radio 应用程式。如果是在 Windows 的话，从系统列里在小 Radio 图示上按滑鼠右键，然后选择“ Open Radio ”。
  2. 在“ Tools ”选单里，选择“ Developers ”，然后选“ Jump... ” (Control+J) 。跳至“ system.verbs.builtins.radio.weblog.drawCalendar ”（不含引号）。

  3. 现在到“ Edit ”选单里，选“ Find and Replace ”，然后选“ Find... ” (Control+F) 并且寻找“ addDayName ”。这样应该会展现出好几个高亮度的 addDayName 函式。在三角形上双击以显示出函式码，他们看起来应该像这样：

    on addDayName (name)
      add ("<td width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</td>")

  4. 请把他们改成这样：

    on addDayName (name, fullname)
      add ("<th abbr=\"" + fullname + "\" width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</th>")

  5. 现在下面的“ for i = 1 to 7 ”那一列上双击，你应当会看到这样：

    for i = 1 to 7
      addDayName (radio.string.getLocalizedString ("dayOfWeekShort." + i))

  6. 请改成这样：

    for i = 1 to 7
      addDayName (radio.string.getLocalizedString ("dayOfWeekShort." + i), radio.string.getLocalizedString ("dayOfWeek." + i))

关于表格排版的极重要注意事项

用来处理视觉排版的表格则有完全不同的一套规则。别在排版表格里使用 <th> 标签。此外别忘了适当地调整表格，让你的主要内容先呈现出来；要让排版表格更具亲和力能做的事情不多，我们将在明天拿一点出来讨论。

延伸阅读

如果你要把资料表格作得比月历还复杂（像是有多层标头和次标头的表格）时，请自己想办法。这里列出一些开头的好方向：

 
<< 第十八天：在月历中加上真的标题 | 目录 | 第二十天：提供表格摘要 >>