這個時代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是一種保險的做法。