大約兩週前在 Mozilla Webdev Blog 上有一篇 Cross-Browser Inline-Block ，介紹如何用 inline block 代替 float 排列，好解決方塊高度不同時，float 排列會造成的問題，當然，這麼新(?)的 display 屬性，必定會有瀏覽器不支援，加上其實目前各家瀏覽器的行為表現都還不是很一致，所以整篇文章大部分的篇幅是在處理 cross browser 的問題。那時候 DK 長輩說我要是有什麼想法的話可以發一篇，那時候雖然覺得好像有什麼可以講的，不過直到昨天看了 flickr 的原始碼時才知道我想講的是什麼。
首先，其實這篇文章介紹的方法我覺得做的很好了，CSS hack的部份也還算乾淨，不過我很龜毛，覺得用到 inline 來做這種像是 block 的東西就是覺得怪怪的，昨天在看 flickr 時突然就在想：「他們是用什麼方法來排照片的？」打開原始碼一看，是 table，flickr 是用 table 來排照片的，我才回憶起之前買的 Everything You Know About CSS is Wrong 這本書，裡面主要介紹到的東西是 table-cell, table-row, ... 等表格元件的 display 屬性，又稱為 css-table，簡單說就是可以拿其他標籤來做 table，這些 display 屬性值可以讓 HTML 文件保持它比較適合的語意，但是顯示上又能夠和 table 一樣排列，雖然我在 Everything You Know About CSS is Wrong 的書評中寫到我覺得拿 css-table 來排版還是怪怪的，但是如果是拿來排照片、商品目錄這種，我就突然覺得還不錯，不過 css-table 很理所當然的和 table 一樣，一列要幾個 cell 在寫 HTML markup 階段時就要決定了，不像 float 或是 inline-block 可以透過控制長度來調整，真的達到文件結構和顯示分開的理想。
用 css-table 來排還是有它的好處，最明顯的就是同一列的 cell 高度都會一樣。想要元件高度會自動調整，然後同排的還會一樣高，目前只有用 table 的解法，不論是真的用 table 還是用 css-table，當然，盡量避免非表格資料的東西使用 table 標籤，所以比較好的處理方法還是 css-table。
兩種方法各有他的優缺點，還很難說哪種方法比較好，先不考慮 css-table 方法在舊瀏覽器的支援度問題的話，我是覺得可以用整個版面的 layout 是固定寬度還是自動寬度來決定用那個方法比較好，如果版面是固定寬度的話比較適合用 css-table，反之則是用 inline block。