這個時代div+css已經創造著新的神話，不久的將來，也許你所訪問的互聯網將不再出現table。

作為一個身處2008年末的web設計師，你是否好意思承認自己的代碼中使用了table，如果是，你是一個有勇氣的人，web設計是個奇怪的行業，你可以將自己的網站設計得像晚報的分類廣告，或者樓道里的開鎖廣告，但千萬別讓人知道你使用了table，在你的源代碼中發現table就像一個銷售被人掀起褲腳發現穿了白襪子一樣。

table是如此丑陋，臃腫，哪怕只顯示一段簡單的內容，你也需要<table><tr><td>這三個基本的標簽，每個標簽里面還要加上一堆亂七八糟的屬性，不像<div>，既簡單，又整潔，又時尚，它和css珠聯璧合，琴瑟和諧，它們構成最完美的box模型，他們象現實中的箱子，你把東西放進去，然后，很自由地對他們進行排列，厭煩了一種布局，沒關系，簡單地改動一下css定義，一種全新的布局便誕生了；不象table，table像食堂里的餐具柜，一排排，一列列，土里土氣，油膩膩的，象我們的父輩，邋遢，什么都往家里拿，胡亂堆在角落里，如果div是小資，table就是老三屆，他們不屬于這個時代。

也就是近幾年的事，至多不過三五年，w3c是一個人人都認為重要但人人都不喜歡的組織，他們的官方網站十分丑陋，我敢說平生沒見過這么丑陋的網站，但他們的網站是為數不多的可以通過全部w3c標準驗證的網站，這意味著，他們的網站在語法上，在結構上，在可訪問性上是完美的，雖然依舊十分丑陋。不過這是笑談，w3c非常重要，否則微軟會把全體web開發工程師帶到萬劫不復的境地，還好，netscape死后，涅磐出firefox，而opera在firefox橫空出世之后雖然沒得到任何好處，至少得到了精神上的支持，看到沒，終于有大哥出來收拾你。喬布斯復出后，蘋果重返昔日的光芒，這時人們才知道世界上還有一個叫做safari的瀏覽器，所有這一切加在一起，讓w3c真正有了存在的必要。

w3c說，table可以用來容納文字，格式文字，圖片，鏈接，表單，以及其它table。..但是，table不應該單純用來做網頁布局（tables should not be used purely as a means to layout document content），理由是，當web被非可視化設備渲染的時候，table會出現問題，他們指定是屏幕閱讀器以及盲文瀏覽器，另外，table在大型顯示設備上會強迫用戶左右滾動，因此，web設計者應該使用css而不是table。參見w3chtml4.01關于table的定義。w3c說這段話的時候，是1999年12月24日，那時盡管css早已誕生，但并沒有多少人使用，最初的web像一個在線版的文檔，并沒有成為現在這樣的平臺，不需要過多過多地考慮布局問題，隨著互聯網第一次泡沫的形成，涌現出大量的門戶網站，門戶網站是table布局的始作俑者，因為他們的首頁比一整份報紙的所有版面拼接在一起還復雜，table在這方面十分順手，結合colspan和rolspan，你幾乎能夠實現任何復雜的版面。

這種布局風格在2000年代初，一直到中期仍然十分流行，尤其國內，在大為美的潛意識下，人們把所有能塞到一個頁面的東西都塞進了首頁，table就像一個舊時代的管家，把所有東西雖不能井井有序，但至少是一樣不少地編排起來。然而這樣的web終于到了讓人厭惡的地步，隨著搜索，rss訂閱，以及以博客為代表的個性化web的出現，人們有更多渠道獲得信息，而不必去訪問那幾個讓人幾乎要暈過去的門戶的首頁，于是出現了一種清新的，輕量的web風，使用更簡單的布局，更明快的配色，大圖標，大banner，以及更容易閱讀的大字體，同時，在這個時候，css已經非常成熟，而firefox，opera，safari為代表的瀏覽器，在遵守w3c標準方面要遠遠好過ie，人們終于認識到css的威力。因為css在布局上，其核心是一個box模型，人們必須為css找一個可以依附的容器對象。

div成為幸運者一方面因為它天生就是box的最佳原型，在語義上，div代表頁面的一個區域，在外形上，它四四方方，更重要的是，它不像<p>或<a>那樣事先已經被賦予特殊的語義（雖然它們也能用于box模型）；另一方面，則出于人們對table統治一個臃腫時代的憎惡，一個時代的結束，繼任者都會努力抹去舊時代的痕跡，那些舊時代的象征或代表的命運多半如此，人們并不是簡單地忘卻它們，而是斷然劃清界限。

table的一切不公平待遇就此開始。為什么說不公平，w3c不建議table布局的時候，只說應使用css代替，這是什么意思，table不支持css嗎？當然支持，而且，由于table作為老牌的html對象，它的地位曾如此重要，任何瀏覽器都對table提供了最完美的支持，包括css支持。當人們擁抱div的時候，似乎忘記了table也是box，而且是一個擁有多個內格的box，table作為一個整體，和div在box模型方面沒有任何區別，而它的內格，除了margin之外，仍然是一個box，內格不含margin概念這是應該理解的。div很優秀這不必說，然而當人們說div+css的時候，似乎暗示著table無法css，這是天大的誤會。

div支持的所有css屬性，table全部支持，事實上，在div大紅大紫之前，那些div的早期采用者曾信心不足地表示，table能做到，div都能，而他們也為自己的話付出了代價，企圖在div中實現垂直居中的人明白我的意思，企圖在ie6中不經csshack而實現100%div布局的人更明白我的意思。100%height問題，幾個div之間的寬度自適應問題，相信任何從事div+css設計的人會遇到。table在這方面的優勢并不是因為它本身多么優秀，而是因為它老牌，沒有瀏覽器敢忽視，也因為它的特性原本如此，人們發明表格，是因為希望數據顯示得整齊，就這么簡單。

|||

然而，為什么table后來背上那么多的惡名？div擁護者對table的責難不外乎以下幾條。

代碼臃腫：你至少需要寫下<table><tr><td>這三個標簽之后，才能開始真正的內容，另外，table的各種標簽中還包含了復雜的屬性定義，而div只需<div>一個標簽。

頁面渲染性能問題：瀏覽器需要將整個表格完全讀完后才會開始渲染。

不利于搜索引擎優化：搜索引擎喜歡內容與修飾分開。

可訪問性差：屏幕朗讀軟件和盲文瀏覽器無法很好地理解table中的內容。

不夠語義（semantic）：我們需要語義的web。

第1條：代碼臃腫

首先，table里面唯一無法用css定義的屬性只有cellspacing，cellpadding幾個，其它屬性都可以并且應當使用css，這樣，剩下的，就是<table><tr><td>和<div>的對決，我相信一個動輒幾十k大小的網頁，即使使用了幾十個table，因此多出來的代碼也可以忽略不計，那些埋怨table代碼臃腫的人其實該檢查自己的編碼習慣，能將table寫得十分臃腫的人，寫div相比也未必會簡潔到哪里。

第2條：頁面渲染性能問題

我使用一臺2004年的筆記本電腦，1.6g的cpu與1g內存，這種配置下，看不出table布局和div布局在頁面渲染上有任何速度差別，其實這點差別即使有，相對網絡本身的延遲也可以忽略。

第3條：不利于搜索引擎優化

如果你盡可能使用css而不是table的屬性，前面說了，產生的代碼和div的差別也不會很大，搜索引擎會歧視<table>標簽嗎，這種說法的依據我至今并沒有找到。

第4條：可訪問性差

這是table固有的缺陷，不過多數div+css的擁躉似乎并不是基于這個原因才排斥table。

第5條：不夠語義

語義web的含義要深遠得多，并不是僅僅在table和div上糾纏，即使w3c，也并沒有規定table只能用來顯示表格數據，很多在table的語義上進行糾纏的人，其實不妨再等等html5，那才是真正的語義。

本文的目的不是讓你丟棄div投身table，相反，如果div能滿足你的設計需要，div仍是首選，但沒必要避諱table，否則會走入另外一個極端。很多使用div無法簡單實現的設計，仍可以使用table，當然，不管使用什么，都應該用css將內容與修飾分離。div+css和table+css都是合法的設計，誰更簡單就用誰。根據我的經驗，當你能預見你的內容的格式，對你即將加入的內容有能力完全控制其顯示格式時，應當使用div+css；當你即將加入的內容是不固定的，你無法預見其格式，如果不想讓頁面坍塌，使用table+css是一種保險的做法。