網頁設計技巧之中，最大的爭論莫過於應該使用 Table 還是純 CSS 建立頁面架構。大部分網頁都是多 columns， 如果你心思細密，更會看得出是一格一格組成。簡單來說，使用 Table (表格) 建立頁面即是以 Table Cells 來代表每一格。而以 CSS 設計，則把頁面看成一個一個 block。透過樣式表來控制在頁面放置的位置。
原則上使用兩種設計方式都要懂得 HTML，不過很久以前已有軟件可以用 WYSIWYG 的方式自動輸出以 Table 作網頁架構的 HTML 碼，深受業餘人士和網站設計師歡迎，令 Table 設計方式成為主流。
不過以 Table 作為頁面架構有不少缺點，剛好最近看到一篇文章 13 Reasons Why CSS Is Superior to Tables in Website Design，歸納了用 CSS 的好處，我扼要地列出其重點，及說說我的意見。
1. Faster page loading
用 Table 作網頁架構會需要使用非常多 markup tags，增加網頁傳送和顯示的時間。
我的意見：以用戶角度看分別不大，特別是香港環境，香港的網站一定快，外國的網一定慢很多。
2. Lowered hosting costs
用 Table 的網頁檔比用 CSS 的大很多，所以頻寬的需求較大，成本較重。
我的意見：香港的網頁圖像比較多，如果想節省頻寬由這方面入手更實際。而且一般香港企業網站對象不多流量不太大，所以除非是建一個面向國內網民的網站，一般來說老闆都不太考慮這問題。
3. Redesigns are more efficient
由於使用 Table 設計的網頁比 CSS 複雜得多，重新設計時會較難和慢。
我的意見：莫說重新設計，用 Table 的網站就算是更新也難很多，除非你是原設計者。
4. Redesigns are less expensive
時間就是金錢，用 CSS 的網站較易更新，成本當然輕一些。
我的意見： 其實這一點和 (3) 是一樣的。
5. Visual consistency maintained throughout website(s)
若果使用外在的 CSS 樣式檔案儲存整個網站的設計，可使風格統一。因內容和設計完全分開，所以更改時只需要更改 CSS，就可以改變了整個網站全部網頁，並確保統一。
我的意見：公道點說，使用 Table 設計的人不一定完全不用 CSS，就算用WYSIWYG軟件的都某程度上用了一些 CSS，不過這真是用 CSS 的其中一個最大好處。
6. Better for SEO (Search Engine Optimization)
用 CSS 設計的網站因頁面有較少 markup tags，令搜尋器收錄得更完整更方便。而且用 CSS 可以把內容放在頁面上不同的地方，不局限於其源碼的位置。例如有一個副標題，你希望搜尋器會收錄，會放在網頁碼最前部分，但設計者則希望副標題在頁底，就可以用 CSS 做到這效果。
我的意見：我想這是最有效說服老闆使用 CSS 設計的最佳方法。另外原文在這一點中提出了使用 Javascript 作網頁特效的例子，其實 Javascript 比 CSS 難上多倍，卻不見有人埋怨，說到底還是因為軟件可以自動加入 Javascript，而不能做一個不用 Table 的設計。
7. Accessibility
用 CSS 把內容和設計分開，可方便有需要的人仕”看” 到網站。
我的意見：這是 w3c 很重視的一點，香港政府在較早時期都推動過。
8. Competitive edge (job security)
反對使用 CSS 的人很多都是以 Table 設計為生，也預設了學 CSS 很難，自然不想學習使用。
我的意見：很多人一看到一堆程度碼就頭痛，不過事實上並非如此，而且提倡 CSS 幾年來，網上的資源和書籍也很豐富，為什麼不試學一下？
9. Quick website-wide updates
用 CSS 可對網頁更快作出修改。
我的意見： 和 (3) (4) 同
10. Easier for teams to maintain (and individuals)
如果一個網站由多人負責管理和更新，用 CSS 的可以更有效率，因大家會遵從同一個方式更改網頁和創建新網頁， 不必每次修改時都要花一段時間研究前人使用的方法。
我的意見：換個角度看，支持 CSS 的人通常對寫程式有較多認識，而學習程式設計，一向也很重視程式碼的可維護性，及更有效率地和其他人合作，容易維護未必是因為 CSS 帶來的好處，如果很深入地用軟件的功能，或者用較為昂貴的多人協作網頁設計軟件，也可達到這目標。
11. Increased usability
第一點是之前說過的，用 CSS 的網頁可更快顯示，而另一點是用了 CSS，可因應使用的裝置更改頁面，例如當使用印表機列印網頁時，可以用特別為 pirnter 設計的 CSS，不需要再寫一個網頁。
我的意見：用戶有需要列印的網頁不是太多，因此幫助不大。用 CSS 來製作流動裝置版本的網站未嘗不可，但如果你預計有很多用戶是用流動裝置來瀏覽你的網站，始終建立另一個版本 (例如可以用檔案大小較小的圖像) 會更方便這些用戶。
12. More complex layouts and designs
CSS 可讓設計者更隨心所欲地設計網頁，例如可以用重疊的方式，比用 Table 的限制更少。
我的意見：CSS + Javascript + DOM 做出來的效果真的很豐富，而且不少工具都不太難用。
13. No spacer gifs
Spacer gifs 是一個常用的設計技巧，來配合 Table 設計，例如設定 background color, marign and padding， 這些在 CSS 設計中都可以避免。
我的意見：spacer gifs 令網頁更複雜，要花更多時間研究才可以更新。
雖然我不完全贊同以上的論據，但用 CSS 真的帶來不少好處。如果有一套軟件可自動產生 CSS 的設計，我想根本不會有如此多爭論。文中有一點敗筆，就是假定用 Table 的都不用 CSS，其實現時的軟件在某程度上都會使用 CSS，甚至會用一個獨立的樣式檔案，完全不用 CSS 的網站已很少了。
不過始終用 Table 作網站架構，會不知不覺用上了極多 nested tables，修改時很麻煩，如果由其他人更改，要極小心，這一定要引以為戒。
留言列表
視覺相關 (4)