Sitepoint 的新書 Everything You Know About CSS Is Wrong 介紹了一種新的網頁排版技術 CSS Tables，利用了 CSS 最新的 display 屬性，不使用 Table Tags 也能做到相類效果。詳細的介紹可看 Digital Web 的書本節錄。 這方法和近幾年網頁設計傾向不使用 Table Tags，甚至概念亦相當不同，我想這是書名這樣大膽，說人人都錯的原因。
這書推出後在網頁設計的圈子引發很大的討論，最大的爭論是究竟用 Table 這概念作為網頁排版是否一個好方法呢？
用 Table 的好處
用 Table 當作排版的好處是易學易明，小學生也可以很輕易地畫一個複雜的 Table，把內客排得好看。反觀使用一個一個 Block 來儲著內容，再任意地放在畫面的不同位置，看似彈性更大，不過礙於瀏覽器不相容，結果走位的情況很難避免，需要更高的技術。
用 Table Tags 和 display:table 之別
首先重溫一下用 HTML 的 Table Tags 來排版的種種問題，其中最為詬病之處是使用極多 Tags，令檔案變得不必要的大，而日後修改亦難。而更重要的一點是，很多時都會在 Table Tags 內直接設定屬性，例如使用 bgcolor、valign 等，設計和內容是分不開的，加重了修改大量相同網頁的工作。此外用 Table Tags 作排版亦不乎語義網的要求。
用 display:table 的方式創製 Table 作排版之用，其最大好處是可以令設計的元素用 css 設定，而亦不違反語義網的要求 (其實只不過是 Div Tag 是中立，實際上也不見得好很多)，可惜使用的 Tags 數目則不會減少很多，只是全用 Div Tag 取代 (不過有時某些網頁設計師為了做到一個效果，不自覺地用上大量的 nested table，理論上是可以避免的)。
用新方法好嗎？
使用上述的方法，可以用一個簡單的 Table 概念，又解決了傳統 Table Tags 的問題，實在是一個不錯的選擇… 如果有這一個選擇。要知道，IE 要到未推出市場的 IE8 才會支援 display:table 屬性，所以實際上來說，還是不要想吧。到今天我還常常收到客戶的要求，就是一定要 IE6、甚至是 IE5.5 看得到才收貨。
css3 和 HTML5 (全都是未來的技術) 都有涉及網頁排版的改變，然而所有的技術，最終都要各大瀏覽器品牌加快步伐配合，網頁設計軟件的加入，網頁設計師才會願意使用。
留言
寫下留言