HTML – 表格篇 I

很多人覺得網頁排版用表格最方便，但是對我來講，那簡直就是地獄。表格排版的缺點實在是多到講不完，除了不易被搜尋引擎搜尋到以外，最讓我吐血的莫過於它的DOM tree根本就是比黑森林還要龐大。

我們常常會需要在網頁上使用DHTML的技術，現在最流行的則是Ajax，但是這兩個東西，用在表格排版的網頁上面，根本就跟噩夢沒有兩樣。最讓我不能夠理解的是，明明表格排版就是個事倍功半的工程，為什麼還是有人樂此不疲？就連補習班那些電腦老師，也頗好此道，真是讓人看了就想要搖頭….

不過，表格並非萬惡的淵藪，HTML的表格，當初是設計用來呈現複雜資料的，誰知道會被設計師拿來這樣使用，但回歸表格當初設計的初衷，深入了解HTML關於表格資料呈現的語法，才是正確使用表格的最好方式。

網頁標準化其實還伴隨著一個重要的意涵，那就是無障礙網路空間的建置。所謂的無障礙網路，顧名思義就是針對身障使用者來設計的網頁，它不只是需要「看」起來很美，還必須「聽」起來清楚，「用」起來方便；符合標準化以及結構化的HTML，可以讓網頁內容聽起來順暢清楚，而不會被一堆用來排版的無意義表格所截斷，而且在使用不同瀏覽器的時候，也可以確保網頁內容能夠正確呈現。

網頁最重要的其實並非設計，而是網頁所要傳達的內容，如何確保當視覺的設計效果因為瀏覽器緣故而無法正確讀取時，使用者仍然可以讀到順暢正確的網頁內容，是每個網頁設計師都應該注意到的基本事項。

用來呈現大量、甚至複雜資料的表格，其實是需要被說明及解釋的，當然，你可以直接在表格上面打上你所要的說明，因為視覺上，閱讀上並不會感覺上任何差異；但是若是給一個只能透過「聽覺」來閱讀網頁的使用者，與表格毫無關係的說明，就起不了太大的作用，而且萬一你想要把標題放在表格下方，對於視障的網路使用者來講，聽完一大堆複雜的表格內容後，才會聽到表格的標題或說明，不是一件很吐血的事情嗎。因此，使用CAPTION，就可以避免這樣的缺陷，而又能夠正確的幫表格下標題，而且，你還可以輕鬆的決定標題要出現在表格哪裡喔！

<CAPTION>

說明

需要起始與結尾標籤，而且必須緊接於<table>之後

屬性

i. align – top | bottom | left | right
當然，這個屬性根本就是針對眼睛看得到的使用者設計的，因為它決定的是標題出現在表格的相對位置：

• top ：預設值，標題在表格上方
• bottom：標題在表格下方
• left ：標題在表格左方
• right ：標題在表格右方

範例

<table>
<caption>表格標題或是說明</caption>
<tr><td>內容 1 </td></tr>
<tr><td>內容 2 </td></tr>
</table>

另外一個可以幫表格做說明的功能也十分好用，就是<table>的屬性summary，它適合落落長的表格說明，不過這個是針對視障的使用者而設計的屬性，因此它並不會出現在頁面上面喔！

範例

<table summary="表格落落長的說明內容"><tr><td></td></tr>...</table>

表格最重要的標籤，當然就是<TABLE>，除了寬高以及框線粗細屬性設定之外，還有許多有趣而且實用的屬性設定喔！以下就是所有表格屬性的詳細介紹，有興趣的人，就一個一個程式碼自己去試試看吧！

<TABLE>

說明

需要起始與結尾標籤

屬性

1. summary 文字型態，專門寫落落長的說明用的
2. width 數字，表格寬度
3. border 框線寬（像素）
4. frame 外框線顯示樣式（void | above | below | hsides | lhs | rhs | vsides | box | border）
   • void  – 無外框（預設值）
   • above – 只有上外框
   • below  – 只有下外框
   • hsides – 只有上下外框
   • vsides – 只有左右外框
   • lhs      – 只有左外框
   • rhs – 只有右外框
   • box – 四邊外框
   • border – 四邊外框
5. rules -欄與列之間的顯示規則
   • none – 無設定，此為預設值
   • groups  – 這個規則，只會應用在每個群組列THEAD、TFOOT、以及TBODY）或是群組欄（COLGROUP and COL）當中
   • rows – 應用在列上面的規則
   • cols – 應用在欄上面的規則
   • all – 此規則應用於所有的欄與列
6. cellspacing 儲存格間距
7. cellpadding 儲存格內距

範例

<table width="400" height="222" border="1" rules="groups"> 
  <colgroup><col /></colgroup><colgroup><col /><col /></colgroup> 
  <tr> 
  <td> </td> 
  <td> </td> 
  <td> </td> 
  </tr> 
  <tr> 
  <td> </td> 
  <td> </td> 
  <td> </td> 
  </tr> 
  <tr> 
  <td> </td> 
  <td> </td> 
  <td> </td> 
  </tr> 
</table>

接下來，我們要來看到屬於列群組的標籤，這些標籤，通常是針對列來做群組的動作，對於資料分類與語意化HTML來說是個相當好用的標籤。

<THEAD><TFOOT><TBODY>

說明

這一系列的標籤，裡面都必須包含至少一組完整的<TR>標籤

• <THEAD>是表頭，也就是第一列用來作為標題的內容部份
• <TFOOT>是表尾，也就是通常置於表格尾端的說明或是註解內容，必須放置於<THEAD>之後，讓聽者可以不需要聽完落落長的資料之後才知道你有個註解在下面，裡頭寫著「以上五百筆資料都是在晃點你的」
• <TBODY>資料內容，也就是整個主體部分的資料

如果你的表格當中有使用到<THEAD>或是<TFOOT>，就一定要使用<TBODY>，而<THEAD>和<TFOOT>則是當你認為有需要對資料做區分時才需要使用（千萬不要中毒太深，沒有表頭表尾，還硬是要放的<TBODY>在裡面，都不知道是想要幹嘛…）

屬性

無特別屬性

範例

<table> 
  <thead> 
    <tr> ...表頭資訊...       </tr> 
  </thead> 
  <tfoot> 
    <tr> ...表尾資訊...       </tr> 
  </tfoot> 
  <tbody> 
    <tr> ...區塊一的第一行... </tr> 
    <tr> ...區塊一的第二行... </tr> 
  </tbody> 
  <tbody> 
    <tr> ...區塊二的第一行... </tr> 
    <tr> ...區塊二的第二行... </tr> 
    <tr> ...區塊三的第三行... </tr> 
  </tbody> 
</table>

<COLGROUP>

說明

需要起始與結尾標籤

屬性

1. span – 這個屬性，必須要是大於零的整數，表示的是群組當中所包含的欄位數，並非必要的屬性，但是必須注意以下的規則：
   • 如果沒有span屬性，每個<COLGROUP>預設是包含一個欄位
   • 如果有span屬性，且span為 >0 的正整數N，則每個<COLGROUP>將包含N個欄位
   • 如果<COLGROUP>當中包含<COL>的標籤，則瀏覽器必須要忽略掉在<COLGROUP>當中的span屬性
2. width – 寬度，同樣也會被他所包含的元素繼承

範例

下面的使用方式： 
<colgroup span="40" width="20"></colgroup>

是不是比使用下面的寫法還要來得簡單易懂？

<colgroup> 
  <col width="20"> 
  <col width="20"> 
  ...（寫它個四十次）... 
</colgroup>

拜託，就算使用快捷鍵複製貼上，大概都會按到手指發炎吧！當然，某種情況之下，你還是可以使用<COL>標籤來幫助你做分組的動作，尤其是CSS樣式的設定，寫法如下：

<colgroup width="20"> 
  <col span="39"> 
  <col id="format-me-specially"> 
</colgroup>

在這裡，我們在<COLGROUP>上面所設定的寬度值，會繼承到每個欄位當中，因此每個欄位的寬都是20；而上面那種寫法，你會看到前39欄都沒有特殊的樣式設定，最後一欄才出現特殊的樣式。

當然，你也是可以在一個<TABLE>當中使用多個<COLGROUP>，以下就是它的使用方法：

<table> 
  <colgroup span="10" width="50"></colgroup> 
  <colgroup span="5" width="0*"></colgroup> 
  <thead> 
  <tr><td> </td>... </tr> 
  </thead> 
</table>

事實上，如果能夠熟練表格的語法，你就可以透過群組歸類的表格語法，輕鬆的做出複雜的報表，其實HTML所提供的表格功能，當初本來就是為了呈現複雜的龐大資料而設計的，只是不知道當初是誰拿它來排版，還可以排到大家都照做，現在想想，這真是很天兵的行為，當初開發HTML語法的人大概會默默的躲在角落黑暗的打GAME BOY吧！

<COL>

說明

需要起始標籤，注意！不可使用結尾標籤。
基本上，這個標籤讓網頁開發者可以群組化表格欄位，用來附加不同的樣式設定，但是他在結構上並沒有任何的作用，真正對表格做結構化的分類是<COLGROUP>的工作，因此在使用上，我們應該先以<COLGROUP>標籤對表格做結構上的群組化，然後才是考慮視覺的問題。

屬性

1. span – 這個屬性，必須要是大於零的整數，表示的是群組當中所包含的欄位數，並非必要的屬性，每個<COL>預設是包含一個欄位，而<COL>的屬性設定將會延伸繼承給他所包含的每個欄位
2. width – 寬度，同樣也會被他所包含的元素繼承，但是它的優先順序是凌駕於<COLGROUP>

範例

請參考<COLGROUP>

接下來，我們要來看看關於表格欄位數的計算以及欄寬計算的注意事項。有那麼多地方可以加入欄位數以及寬度的屬性，但是當你到處設定，搞到自己都弄不清楚的時候，瀏覽器又該是以什麼樣的規則來計算他所接收到的表格資訊呢？

1. 關於計算欄位的方式
   有兩個方法可以去決定表格的欄位數，在下面以優先順序來做排列：
   1. 如果<TABLE>當中包含了任何的<COLGROUP>或是<COL>的元素，則瀏覽器會計算下列設定的總和作為表格的欄位數
      • 計算每個<COL>當中span屬性的值（預設值為一）
      • 計算每個包含至少一個<COL>元素的<COLGROUP>標籤，忽略這些<COLGROUP>標籤當中的span屬性，然後針對它所包含的<COL>元素去重複a的計算
      • 計算每個不含<COL>子元素的<COLGROUP>標籤，取出span屬性值來做計算（預設值為一）
   2. 其次，如果<TABLE>元素沒有包含任何的<COLGROUP>或是<COL>的元素，瀏覽器基本上都是基於欄位數量來計算；而欄位數則等於所有列中含有最多欄位的欄位數，包括分割成多個欄位的單位表格。如果該列當中的欄位數不足，則不足的部份會在每列結束處產生空白單位（表格的結束方向，可以在表格當中使用dir的屬性來決定，ex： dir = LTR（左至右） | RTL（右至左））
2. 關於計算欄位寬度的方式
   網站開發者，可以用以下三種方式來設定欄位的寬度：

   固定

   指定像素寬度給欄位，例如使用width=”30″

   百分比

   使用百分比來指定寬度，可以使用width=”30%”，它基本上是外部可用的空間來計算百分比的基準值

   比例

   你可以使用width=”3*”，只要當中有固定的寬度，其他的欄位的寬度就會以比例來設定，比如說3*+2*+1*=6*，也就是說，剩下的寬度會分成六等分，按照比例分配寬度。

PS. 雖然說表格的寬度屬性並沒有被認為是應該被禁止的，但是還是強烈建議使用CSS樣式表來設定表格寬度。

<累，待續＞