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樣式表來設定表格寬度。

<累,待續>

About these ads

4 thoughts on “HTML – 表格篇 I

  1. Yes, totally agree with you.

    不過說起HTML的表格, 這真的是有其歷史淵源的. 因為, 當年 (我是說我剛接觸HTML那一年, 好像是1998吧) 網頁設計師都喜歡用表格來呈現複雜的版面, 譬如用3X3的表格加上四張圓角圖, 表格中再包表格, …. 因為當年台灣還沒有人使用CSS, 即便是數年後, CSS也不太被網頁設計師所採用, 主要是Browser support的問題. Anyway, 我要說的是, 將HTML定位為資料結構, 也就是盡量透過tag來付予內容”意義”, 是這近幾年的事, 主要應該是受XML的啟發, 然後Ajax加速它的發展吧! 我覺得這樣真的很棒, 各司其職, 重要的是, 當你因客戶或上司的要求, 需要改版面設計時, 比較不需要動到HTML, 更不用動到後端程式. 這些問題, 早年真的讓我們吃盡苦頭…

    題外話, 目前在美國, 每家公司應徵所謂的Front-end Engineer時, 都幾乎會要求必須具備HTML & CSS的Hand Writing Skill, 這真是太棒囉!! 至少比較不會被視為那是一份沒什麼的工作… (just complain)

  2. 過去因為有方便的軟體,讓很多人覺得「哪個笨蛋還在那邊自己打HTML,按一按就有啦!」;現在有更方便的軟體,讓很多人也以為CSS按一按就可以了,這實在是很令人頭痛。

    早期標準化概念還不普及的時候,只要能排出要的版型,管他是圖還是表格都可以,這也是無法避免的事情;不過我比較皺眉頭的是,現在標準化技術都已經十分成熟了,電腦補習班的老師還停留在教大家表格排版,CSS也就點到為止,然後大多數的人也就繼續學著用表格排版,這實在是….令人啞口無言。

    更令人不解的是,表格排版也沒比較快啊~囧rz

    其實 HTML & CSS的Hand Writing Skill 真的是每個網頁設計者應該要具備的基本能力,希望未來台灣的網頁設計者也能達到人人都具備這樣基本的HTML & CSS的Hand Writing Skill~

    By the way, 你的complain我還真是能夠感同身受啊~XD

    ps. ”網頁最重要的其實並非設計,而是網頁所要傳達的內容”其實這句話我最想送給現在我所遇到的每個設計師啦~哈哈!不要再用軟體切圖當網頁了啦!真的是會把人搞瘋….XD

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s