文章

CSS 的 table 排版

最近看到兩篇文章: The Problem with CSSEverything You Know about CSS is wrong ,都是 sitepoint 為新書作宣傳的文章,談的是 CSS 排版的問題。

CSS 排版難學又難精,因為其當初並沒有為排版而設的規則,因此即使要做幾個簡單的 Column,也必需走很遠的路:理解一大堆 CSS 的 Box Model、Positioning、Document Flow 等的運作原理,用很多怪招如 faux column、negative margin 等等去嘗試實作。終於做到效果,卻發覺某某在內容會破壞整個排版,脆弱得很。各大瀏覽器對 CSS 的支持程度不一,要花大量心力處理這些差異。也因為這樣,而催生了 一大堆 CSS Framework ,主要就是想解決排版的問題。

其實對於要弄 grid-like 的排版,有更簡單的古方:HTML table,問題是這個做法並不符合網頁標準網頁標準的精神1,即讓 HTML 標籤能符合語義 (Semantics),而有關外表描述讓 CSS 解決。所以 Table 只應用顯示表列式的資料,用 Table 來排版語義上不對。因此,推行網頁標準,間接要提供 Table 排版以外的方案,但 CSS 排版頗高的學習曲線,某程度上也阻礙了網頁標準的推行。

那麼還有沒有更好的方法,可以順得哥情又不失嫂意?上述文章提到 CSS2 裏的 display: table 類的屬性,即可以用 CSS 指示任何元素表現得像 table 一般,瀏覽器會在實際繪畫時,自動補上 table 元素。這樣的話,用簡單幾句語法就可以實行 Column 排版了。

有人會覺得:實際就是用 table 來排版嘛!這麼多年來叫人不要用 table 排版,現在又叫人用,豈非本末倒置?我想在這裏必需認清的是:用甚麼來做網頁排版才算「正確」?在 CSS3 裏的確有 排版模組 ,但仍然是在起草階段。而在真正可用這些排版屬性前,我們用盡現有 CSS 可行的方法去試去做,所以才有那麼多排版怪招,display:table 只是其中一種方法罷了,難道用 float、negative margin 等才是「正確」?最重要的是有沒有違反網頁標準的精神。使用 display:table,HTML 可以保留語義,CSS 只作外表描述,大概沒有問題吧?

當然,table 也並非完美,例如在第二篇文章中的相集例子裏的 HTML 碼:


 <div class="grid"> 
  <div class="row"> 
    <div class="image"> 
      <img src="images/photo1.jpg" alt="A Lily" /> 
      <p>A lily in the gardens of The Vyne Country House</p> 
    </div> 
    <div class="image"> 
      <img src="images/photo3.jpg" alt="A Fuchsia plant" /> 
      <p>Fuchsia plant in my garden</p> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="image"> 
      <img src="images/photo2.jpg" alt="A crazy looking Allium flower" />
      <p>A crazy looking flower</p>
    </div>
    <div class="image">
      <img src="images/photo4.jpg" alt="A Robin sitting on a fence" />
      <p>
        This robin has been visiting our garden over the summer. 
        He is very friendly and doesn't seem to be too worried about sharing the garden with us.
      </p>
    </div>
  </div>
 </div>

這裏代碼其實跟一個 HTML table 差不多,只不過全都變成了 div。其中 <div class="row"> 究竟是一種只屬外表的架構,還是符合語義的?但如想使用 display:table,這個元素是必需的。 (雖然文章解釋過瀏覽器會自動產生其他 table 元素,但 Safari 上似乎有一些限制)。

雖然可用 display:table,但現時為止卻不是所有瀏覽器都支持,至少仍時是市場上佔大多數的 IE6/7 還未支持。將推出的 IE8 將會更全面支持 CSS2 並 通過 ACID2 ,也會支持 display:table,所以文章作者覺得時機大概成熟,可以試用了?不過要等到大多數用戶都轉成 IE8,大概又要好幾年時間吧?而且還要看 Windows 7 的銷售如何呢?

1 「網頁標準」在這裏的意思傾向於 Wikipedia 所說:In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods

回應

  1. 其實對於要弄 grid-like 的排版,有更簡單的古方:HTML table,問題是這個做法並不符合網頁標準。
    HTML Table 一直都是網頁標準。

*