更新時間：2014-12-21Table+css與Div+css有啥區(qū)別
作為一個身處 2008 年末的 Web 設(shè)計師，你是否好意思承認自己的代碼中使用了 Table，如果是，你是一個有勇氣的人，Web 設(shè)計是個奇怪的行業(yè)，你可以將自己的網(wǎng)站設(shè)計得像晚報的分類廣告，或者樓道里的開鎖廣告，但千萬別讓人知道你使用了 Table，在你的源代碼中發(fā)現(xiàn) Table 就像一個銷售被人掀起褲腳發(fā)現(xiàn)穿了白襪子一樣。
Table 是如此丑陋，臃腫，哪怕只顯示一段簡單的內(nèi)容，你也需要 <table><tr><td> 這三個基本的標簽，每個標簽里面還要加上一堆亂七八糟的屬性，不像<div>，既簡單，又整潔，又時尚，它和 CSS 珠聯(lián)璧合，琴瑟和諧，它們構(gòu)成最完美的 Box 模型，他們象現(xiàn)實中的箱子，你把東西放進去，然后，很自由地對他們進行排列，厭煩了一種布局，沒關(guān)系，簡單地改動一下 CSS 定義，一種全新的布局便誕生了；不象 Table，Table 像食堂里的餐具柜，一排排，一列列，土里土氣，油膩膩的，象我們的父輩，邋遢，什么都往家里拿，胡亂堆在角落里，如果 Div 是小資，Table 就是老三屆，他們不屬于這個時代。
也就是近幾年的事，至多不過三五年，W3C是一個人人都認為重要但人人都不喜歡的組織，他們的官方網(wǎng)站十分丑陋，我敢說平生沒見過這么丑陋的網(wǎng)站，但他們的網(wǎng)站是為數(shù)不多的可以通過全部W3C標準驗證的網(wǎng)站，這意味著，他們的網(wǎng)站在語法上，在結(jié)構(gòu)上，在可訪問性上是完美的，雖然依舊十分丑陋。不過這是笑談，W3C非常重要，否則微軟會把全體 Web 開發(fā)工程師帶到萬劫不復(fù)的境地，還好，Netscape 死后，涅磐出 Firefox，而 Opera 在 Firefox 橫空出世之后雖然沒得到任何好處，至少得到了精神上的支持，看到?jīng)]，終于有大哥出來收拾你。喬布斯復(fù)出后，蘋果重返昔日的光芒，這時人們才知道世界上還有一個叫做 Safari 的瀏覽器，所有這一切加在一起，讓 W3C 真正有了存在的必要。
W3C 說，Table 可以用來容納文字，格式文字，圖片，鏈接，表單，以及其它 Table ... 但是，Table 不應(yīng)該單純用來做網(wǎng)頁布局（Tables should not be used purely as a means to layout document content），理由是，當 Web 被非可視化設(shè)備渲染的時候，Table 會出現(xiàn)問題，他們指定是屏幕閱讀器以及盲文瀏覽器，另外，Table 在大型顯示設(shè)備上會強迫用戶左右滾動，因此，Web 設(shè)計者應(yīng)該使用 CSS 而不是 Table。參見 W3C HTML 4.01 關(guān)于 Table 的定義。 W3C 說這段話的時候，是1999年12月24日，那時盡管 CSS 早已誕生，但并沒有多少人使用，最初的 Web 像一個在線版的文檔，并沒有成為現(xiàn)在這樣的平臺，不需要過多過多地考慮布局問題，隨著互聯(lián)網(wǎng)第一次泡沫的形成，涌現(xiàn)出大量的門戶網(wǎng)站，門戶網(wǎng)站是 Table
布局的始作俑者，因為他們的首頁比一整份報紙的所有版面拼接在一起還復(fù)雜，Table 在這方面十分順手，結(jié)合 colspan 和 rolspan，你幾乎能夠?qū)崿F(xiàn)任何復(fù)雜的版面。
這種布局風格在2000年代初，一直到中期仍然十分流行，尤其國內(nèi)，在大為美的潛意識下，人們把所有能塞到一個頁面的東西都塞進了首頁，Table 就像一個舊時代的管家，把所有東西雖不能井井有序，但至少是一樣不少地編排起來。然而這樣的 Web 終于到了讓人厭惡的地步，隨著搜索，RSS 訂閱，以及以博客為代表的個性化 Web 的出現(xiàn)，人們有更多渠道獲得信息，而不必去訪問那幾個讓人幾乎要暈過去的門戶的首頁，于是出現(xiàn)了一種清新的，輕量的 Web 風，使用更簡單的布局，更明快的配色，大圖標，大 Banner，以及更容易閱讀的大字體，同時，在這個時候，CSS 已經(jīng)非常成熟，而 Firefox, Opera, Safari 為代表的瀏覽器，在遵守 W3C 標準方面要遠遠好過 IE，人們終于認識到 CSS 的威力。因為 CSS 在布局上，其核心是一個 Box
模型，人們必須為 CSS 找一個可以依附的容器對象。
Div 成為幸運者一方面因為它天生就是 Box 的最佳原型，在語義上，Div 代表頁面的一個區(qū)域，在外形上，它四四方方，更重要的是，它不像 <P> 或 <a> 那樣事先已經(jīng)被賦予特殊的語義（雖然它們也能用于 Box 模型）；另一方面，則出于人們對 Table 統(tǒng)治一個臃腫時代的憎惡，一個時代的結(jié)束，繼任者都會努力抹去舊時代的痕跡，那些舊時代的象征或代表的命運多半如此，人們并不是簡單地忘卻它們，而是斷然劃清界限。
Table 的一切不公平待遇就此開始。為什么說不公平，W3C 不建議 Table 布局的時候，只說應(yīng)使用 CSS 代替，這是什么意思，Table 不支持 CSS 嗎？當然支持，而且，由于 Table 作為老牌的 HTML 對象，它的地位曾如此重要，任何瀏覽器都對 Table 提供了最完美的支持，包括 CSS 支持。當人們擁抱 Div 的時候，似乎忘記了 Table 也是 Box，而且是一個擁有多個內(nèi)格的 Box，Table 作為一個整體，和 Div 在 Box 模型方面沒有任何區(qū)別，而它的內(nèi)格，除了 Margin 之外，仍然是一個 Box，內(nèi)格不含 Margin 概念這是應(yīng)該理解的。Div 很優(yōu)秀這不必說，然而當人們說 Div + CSS 的時候，似乎暗示著 Table 無法 CSS，這是天大的誤會。
Div 支持的所有 CSS 屬性，Table 全部支持，事實上，在 Div 大紅大紫之前，那些 Div 的早期采用者曾信心不足地表示，Table 能做到，Div 都能，而他們也為自己的話付出了代價，企圖在 Div 中實現(xiàn)垂直居中的人明白我的意思，企圖在 IE6 中不經(jīng) CSS Hack 而實現(xiàn) 100% Div 布局的人更明白我的意思。100% Height 問題，幾個 Div 之間的寬度自適應(yīng)問題，相信任何從事 Div + CSS 設(shè)計的人會遇到。Table 在這方面的優(yōu)勢并不是因為它本身多么優(yōu)秀，而是因為它老牌，沒有瀏覽器敢忽視，也因為它的特性原本如此，人們發(fā)明表格，是因為希望數(shù)據(jù)顯示得整齊，就這么簡單。然而，為什么 Table 后來背上那么多的惡名？Div 擁護者對 Table 的責難不外乎以下幾條。
代碼臃腫：你至少需要寫下 <table><tr><td>這三個標簽之后，才能開始真正的內(nèi)容，另外，Table 的各種標簽中還包含了復(fù)雜的屬性定義，而 Div 只需 <div>一個標簽。
頁面渲染性能問題：瀏覽器需要將整個表格完全讀完后才會開始渲染。
不利于搜索引擎優(yōu)化：搜索引擎喜歡內(nèi)容與修飾分開。
可訪問性差：屏幕朗讀軟件和盲文瀏覽器無法很好地理解 Table 中的內(nèi)容。
不夠語義（Semantic）：我們需要語義的 Web。
第1條：代碼臃腫
首先，Table 里面唯一無法用 CSS 定義的屬性只有 Cellspacing, Cellpadding 幾個，其它屬性都可以并且應(yīng)當使用 CSS，這樣，剩下的，就是 <table><tr><td> 和 <div> 的對決，我相信一個動輒幾十K大小的網(wǎng)頁，即使使用了幾十個 Table，因此多出來的代碼也可以忽略不計，那些埋怨 Table 代碼臃腫的人其實該檢查自己的編碼習慣，能將 Table 寫得十分臃腫的人，寫 Div 相比也未必會簡潔到哪里。
第2條：頁面渲染性能問題
我使用一臺2004年的筆記本電腦，1.6G 的 CPU 與 1G 內(nèi)存，這種配置下，看不出 Table 布局和 Div 布局在頁面渲染上有任何速度差別，其實這點差別即使有，相對網(wǎng)絡(luò)本身的延遲也可以忽略。
第3條：不利于搜索引擎優(yōu)化
如果你盡可能使用 CSS 而不是 Table 的屬性，前面說了，產(chǎn)生的代碼和 Div 的差別也不會很大，搜索引擎會歧視 <table> 標簽嗎，這種說法的依據(jù)我至今并沒有找到。
第4條：可訪問性差
這是 Table 固有的缺陷，不過多數(shù) Div + CSS 的擁躉似乎并不是基于這個原因才排斥 Table。
第5條：不夠語義
語義 Web 的含義要深遠得多，并不是僅僅在 Table 和 Div 上糾纏，即使 W3C，也并沒有規(guī)定 Table 只能用來顯示表格數(shù)據(jù)，很多在 Table 的語義上進行糾纏的人，其實不妨再等等 HTML 5，那才是真正的語義。
本文的目的不是讓你丟棄 Div 投身 Table，相反，如果 Div 能滿足你的設(shè)計需要，Div 仍是首選，但沒必要避諱 Table，否則會走入另外一個極端。很多使用 Div 無法簡單實現(xiàn)的設(shè)計，仍可以使用 Table，當然，不管使用什么，都應(yīng)該用 CSS 將內(nèi)容與修飾分離。Div + CSS 和 Table + CSS 都是合法的設(shè)計，誰更簡單就用誰。根據(jù)我的經(jīng)驗，當你能預(yù)見你的內(nèi)容的格式，對你即將加入的內(nèi)容有能力完全控制其顯示格式時，應(yīng)當使用 Div + CSS；當你即將加入的內(nèi)容是不固定的，你無法預(yù)見其格式，如果不想讓頁面坍塌，使用 Table + CSS 是一種保險的做法。 檢舉
回答人的補充 2010-09-29 16:44
DIV＋CSS是網(wǎng)站標準（或稱“WEB標準”）中常用的術(shù)語之一，因為XHTML網(wǎng)站設(shè)計標準中，不再使用表格定位技術(shù)，而是采用css+div的方式實現(xiàn)各種定位。
DIV＋CSS網(wǎng)站設(shè)計的優(yōu)勢
SEO優(yōu)化中有一項是網(wǎng)站代碼優(yōu)化， CSS的極大優(yōu)勢表現(xiàn)在簡潔的代碼，對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬，其特別是，搜索引擎喜歡簡潔的代碼（可以有效的增加了有效關(guān)鍵詞在網(wǎng)頁總代碼的比重），所以使用DIV＋CSS的web標準制作的網(wǎng)站具有搜索引擎友好的一定優(yōu)勢。
其次，DIV＋CSS制作的網(wǎng)站，在網(wǎng)站改版的時候比較簡單，因為有很多的地方只需改CSS樣式就行，而不用改動程序，從而降低了網(wǎng)站改版的成本。
盡管DIV＋CSS具有一定優(yōu)勢，不過現(xiàn)在DIV＋CSS網(wǎng)站制作方面還存在問題。
1、CSS的高度依賴使網(wǎng)頁設(shè)計變得比較復(fù)雜。和HTML4.0中的表格布局（table）比，DIV＋CSS盡管不是高不可及，但要比表格定位復(fù)雜的多，即使對于網(wǎng)站設(shè)計高手
