第十九天：使用真的表格標頭

如果妳的站台上有個月曆，就應該是以 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> 標籤。此外別忘了適當地調整表格，讓妳的主要內容先呈現出來；要讓排版表格更具親和力能做的事情不多，我們將在明天拿一點出來討論。

延伸閱讀

如果妳要把資料表格作得比月曆還複雜（像是有多層標頭和次標頭的表格）時，請自己想辦法。這裡列出一些開頭的好方向：

 
<< 第十八天：在月曆中加上真的標題 | 目錄 | 第二十天：提供表格摘要 >>