用 CSS 替代 HTML 的 table tag 設計網頁版面

版工之前就耳聞 CSS 功能強大，可完全取代 HTML 的 table、tr、td 等 tag，做網頁「外觀 (user interface)」的編排。CSS 除了可避免陷在 HTML 多層的巢狀 table 裡，亦可明顯減少網頁檔案大小，讓頁面日後可統一維護，而非逐一修改。日前版工找了一些書上的 CSS 範例，經簡單修改並測試後，開放七個 CSS + div tag 網頁排版的「樣板」讓大家下載 (.html 格式，可直接用瀏覽器開啟)，內容如下：

(1) 兩欄式版面，畫面上的欄位寬度可隨瀏覽器自動調整
(2) 兩欄式版面，畫面上的欄位寬度固定，不可隨瀏覽器自動調整
(3) 三欄式版面，畫面上的欄位寬度可隨瀏覽器自動調整
(4) 三欄式版面，畫面上的欄位寬度固定，不可隨瀏覽器自動調整
(5) 多欄式版面，畫面上的欄位寬度可隨瀏覽器自動調整
(6) 多欄式版面，畫面上的欄位寬度固定，不可隨瀏覽器自動調整
(7) 非對稱、欄位座標不固定，畫面上的欄位位置可隨瀏覽器自動調整

本帖的範例程式碼下載點：
http://files.cnblogs.com/WizardWu/070915.zip

七個範例中，主要可區分為兩大類：
• 頁面中的欄位，會隨使用者的螢幕解析度、滑鼠拖曳瀏覽器邊框，自動延展和調整
• 頁面中的欄位，寬和高固定，不會隨使用者的螢幕解析度、滑鼠拖曳瀏覽器邊框，自動延展和調整

透過 CSS 對整個 div 區塊的統一設定，可讓頁面外觀的編輯和維護工作變得輕鬆許多。不過有少數 CSS 的屬性設定，需要額外考慮到瀏覽器的廠牌和新舊版本問題。此外本帖提供下載的多欄式版面範例中，亦要考慮到，當頁面其中一欄的圖文內容特別多時，是否會照欄位的預設寬度往下延伸，抑或圖文內容會圍繞別的欄位；此種情況可能會發生在「非固定欄寬」的頁面中，此時就得再引用其它 CSS 的排版技巧加以調整。

CSS 除了版面設計功能強大外，還有許多其它的優點。像是要讓使用者透過瀏覽器「列印」網頁，傳統的做法，開發人員可能會特地替需要列印的頁面，重新排版、重寫一個適合 A4 紙張列印的頁面；但透過 CSS，我們可以在使用者要列印時，讓其自動套用新的 CSS 樣式表，而非 redirect 到另一個專供列印的網頁，如此便可省下重新撰寫列印頁面的時間，及 Web server 的硬體系統資源。

-------------------------------------------------
本帖參考書籍：

[1] Christopher Schmitt,「CSS Cookbook, Second Edition」, O'Reilly 出版社, 2006/10
http://oreilly.com/catalog/9780596527419/index.html

-------------------------------------------------
本帖相關檔案：

[1] CSS Tutorial
http://www.w3schools.com/css/default.asp