網頁元素可分成三大部份：結構 (HTML)、樣式 (CSS)、行為 (JavaScript)。前端開發的理想目標，就是要盡量將這三個部份各自分離獨立。透過CSS Layout的設計理念，可以將樣式從結構中抽離出來，透過非侵入式Unobtrusive JavaScript的設計準則，還有jQuery的輔助，可以將行為從結構及樣式中獨立出來。而其中CSS Layout可以說是實現分離語義結構、外觀樣式、表現行為，並進而達成Web模組化設計的基石。

Web前端技術的設計原則為，在運用CSS Layout及JavaScript時，要保持無侵入性的設計概念 (Unobtrusive JavaScript)，並採用漸進增強 (Progressive Enhancement)、平穩退化 (Graceful Degradation) 的設計準則。在把JS關閉的狀況下，網頁不能有任何的跑版或錯誤。在把CSS關閉的狀況下，頁面仍然可以呈現正確而精簡的語義結構。再更好的狀況是，還要預留可以運作的退路，優雅地處理降級的問題。並能考量及掌握搜尋引擎最佳化 (SEO)、可使用性 (Usability)、可訪問性 (Accessibility)、親和力、無障礙…等進階設計議題。 而採用CSS Layout相較於一般Table Layout的好處在哪裡呢?

1. 簡化HTML結構 (50%)。
2. 分離HTML結構及CSS樣式。
3. 有更大的彈性去整合JavaScript技術 (結構、樣式、行為)。
4. 提高代碼的利用效率。
5. 更強大的外觀呈現控制能力。
6. 集中樣式管理，有助於全站保持視覺的一致性。
7. 改善網站的可訪問性Accessibility (親和力、無障礙、不同設備兼容)。
8. 改善網站的可使用性Usability (友善列印)。
9. 加快頁面的下載速度。
10. 節省頻寬費用。
11. 更利於搜尋引擎最佳化SEO。
12. 更利於網站後期的更新及維護 (效率、代價)。
13. 使用W3C所推動的Web標準。
14. 更確保能夠相容於現代及未來的各式瀏覽器。
15. 提昇專業技能及職場競爭力 (門檻、降低失業風險)。

參考資料：

• 13 Reasons Why CSS Is Superior to Tables in Website Design
• Top 10 Reasons to Learn CSS
• Basic Answers to the question Why Use CSS
• CSS Page Layout Strategies
• Why stick to Web Standards?
• Why tables for layout is stupid: problems defined, solutions offered
• 為何使用表格排版是不明智的：找出問題，對症下藥
• 語義化的HTML結構到底有何好處?
• What Beautiful HTML Code Looks Like
• Checklist For Better Forms
• Web Do’s & Don’ts 正負面表列參考
• Dive Into Accessibility
• Simple Tips to Improve your Web Accessibility
• Techniques for Accessible HTML Tables
• 無障礙網頁開發規範