文： Andy Budd / 譯： Jjgod Jiang

　　譯自 An Objective Look at Table Based vs. CSS Based Design 

　　我和作者的觀點(diǎn)差不多.標(biāo)準(zhǔn)好,但是未必實(shí)用.

　　以下是ZT文章:

　　經(jīng)年以來，許多優(yōu)秀的文章都在贊美著基于 CSS 設(shè)計(jì)的優(yōu)越， 哀嘆著基于表格設(shè)計(jì)的沒落。但卻很少有人換個角度想想，或許是因?yàn)槟愕迷诹私獠⑦\(yùn)用了基于 CSS 的設(shè)計(jì)之后才可以批評它， 而一旦了解了之后，你又不愿意回頭去用原先的老式設(shè)計(jì)方法了。

　　為了彌補(bǔ)一下這種不平衡，也因?yàn)樵谶@場游戲中扮演一個大反派挺酷的，我決定寫篇文章，說說為何在某些情況下，傳統(tǒng)的表格設(shè)計(jì)方式就算不比基于CSS 的――或者說基于標(biāo)準(zhǔn)的――設(shè)計(jì)方式好，也不比它們差。

　一、妖魔化表格

　　表格出現(xiàn)以前，Web 本是個相當(dāng)乏味的地方，正是使用表格排版，才打開了可視化的頁面設(shè)計(jì)的新局面。表格對于 Web 和 Web 設(shè)計(jì)領(lǐng)域普及的貢獻(xiàn)到底有多大或許有爭議，但一旦離開表格，我們這些網(wǎng)頁設(shè)計(jì)師們必會失去工作，卻是毋庸置疑的。

　　近年來基于表格的設(shè)計(jì)確實(shí)被妖魔化了，Web 純化論者會告訴你，表格對排版毫無意義，因而你絕不能用到它。然而歷史證明，許多技術(shù)一開始是為了實(shí)現(xiàn)某個目標(biāo)設(shè)計(jì)的，卻在別的領(lǐng)域發(fā)現(xiàn)了更大的用場而大展身手。 就像 Web 本身，一開始不也只是為了共享研究數(shù)據(jù)嘛，現(xiàn)在在娛樂和商業(yè)方面的應(yīng)用卻與信息與教育方面的并駕齊驅(qū)了。

　二、只為舒服一點(diǎn)

　　Web 設(shè)計(jì)師們多年以來都在使用表格排版頁面，這是絕大部分設(shè)計(jì)師都已掌握的能力。如此地使用表格能保證你獲得預(yù)想的效果，通過一些簡單的 hack，比如間隔 gif， 我們幾乎一定能保證我們的站點(diǎn)在最廣泛的 Web 瀏覽器上看起來都一樣，從最低版本的 Netscape 4到Safari 這樣的現(xiàn)代瀏覽器。

　　盡管先驅(qū)者們早已宣傳了好久 Web 標(biāo)準(zhǔn)， 大部分的網(wǎng)站還是使用表格和不兼容標(biāo)準(zhǔn)的代碼開發(fā)的，因此用戶代理就不得不在很長一段時間內(nèi)支持基于表格的排版方式。 這對于 Web 標(biāo)準(zhǔn)的賣點(diǎn)來說，是個致命的打擊：標(biāo)準(zhǔn)沒有標(biāo)準(zhǔn)應(yīng)有的地位。不大可能會出現(xiàn)下面這種情況，某個主要的瀏覽器廠商 (唔，還是說 Microsoft) 突然發(fā)布了一個大部分網(wǎng)站都顯示不了的瀏覽器。

　　所以網(wǎng)頁設(shè)計(jì)者們總感覺不到開始使用基于  CSS 排版和支持標(biāo)準(zhǔn)的代碼的那種危機(jī)感和必要性。

　三、降低門檻Web

　　正是因?yàn)樗拈T檻低才如此成功的： HTML 是個簡單易學(xué)的語言，瀏覽器又能容忍許多標(biāo)記混亂的文檔。 這使在 Web 上發(fā)布內(nèi)容變得難以置信地容易。即便你 12 歲的侄子也能用 Microsoft Office 中附帶的 Frontpage 搗鼓出一個簡單的網(wǎng)站來。

　　基于表格的設(shè)計(jì)比之基于 CSS 的，當(dāng)然 CSS 的語法很簡單，正常人都會同意：你沒必要是火箭科學(xué)家才能學(xué)會 CSS。盡管如此，其中有些概念還是過于微妙了，不易領(lǐng)會。比如表面上看，Box 模型很簡單，但我偶爾還是會在邊界折疊 (margin collapsing) 上滑一跤， 浮動(float) 和清除 (clear) 這樣的概念也不好理解，較難運(yùn)用。 以我的經(jīng)驗(yàn)而言，從了解 CSS 的基本概念到能自如地用 CSS 開發(fā)站點(diǎn)，大約需要走過一條為期 6-12 月的學(xué)習(xí)曲線。

　　然后是瀏覽器支不支持的問題。一旦你正式開始干活，就會慢慢了解哪個瀏覽器支持什么、不支持什么，和一些常見的瀏覽器 bug。可惜bug 太多了， 就算“專家”們也難以估量自己花在修整 bug 上的時間。對新手來說就更讓人泄氣了，因?yàn)樗麄儾恢朗且驗(yàn)樽约赫`解了CSS 呢，還是某些晦澀的瀏覽器 bug？也許這就是為何同樣的問題一再出現(xiàn)在 CSS-Discuss 等郵件列表上的原因吧。

　　如果瀏覽器廠商們終能步調(diào)一致， 用 CSS 開發(fā)站點(diǎn)將會容易得多。但我還是覺得――大部分人也會同意――CSS 開發(fā)的門檻比基于表格的還是太高了。換個說法， 我覺得這也說明了為何基于 CSS 的設(shè)計(jì)在Web 專家們之間如此流行。這讓他們把自己和那些業(yè)余的“Front-page 牛仔”們區(qū)分開來，讓他們找回當(dāng)年 Web 只屬于自己這個小群體時的感覺。 大概這正式因此，那么多人都把 Web 標(biāo)準(zhǔn)看作不可觸及的“象牙塔”， 那么多 Web 標(biāo)準(zhǔn)的鼓吹者卻以狂熱的態(tài)度，帶著優(yōu)越感去看待網(wǎng)頁設(shè)計(jì)。

　四、有些東西還是用表格來做更容易

　　我確信我們大家都曾發(fā)現(xiàn)，自己為了實(shí)現(xiàn)用表格做起來是小菜一碟的功能寫了相當(dāng)復(fù)雜的 CSS。比如處理表單 (form) 的外觀，形狀再復(fù)雜怪異的表單也能用表格輕松搞定。 你是可以用 CSS 的浮動元素實(shí)現(xiàn)類似的結(jié)果，但就麻煩多了。 如果你是個 CSS guru，這種麻煩也是快樂的事?？珊翢o疑問，如果你只是個普通人，還有個會掐住你的喉嚨問你怎么做個小表單也花了這么久的老板，事情就不那么好玩了。

　　如果你有足夠的知識，又有足夠的耐心，習(xí)慣于用表格做的大部分事情還是都能用 CSS 實(shí)現(xiàn)的。 雖說花的時間長點(diǎn)吧，還是有個限度的(或者被打擊得放棄了嘗試)。關(guān)鍵是確實(shí)有些無論你怎么努力，還是無法實(shí)現(xiàn)的東西，其中一項(xiàng)便是頁腳欄 (page footer)。我常常見到來自灰心失望的 CSS 作者的貼子， 他們試圖創(chuàng)建那種可以粘在窗口底端的頁腳欄，使即便那個窗口沒伸展到整個屏幕也能保證效果。如果用到了表格，要做出這種效果簡單得很， 可單獨(dú)用 CSS 來做就是另一回事了。 為什么還有 Web 開發(fā)者們不愿意用 CSS？就是因?yàn)橐坏┎挥帽砀?，簡單的事情反而變?fù)雜了。

　五、夸大收益

　　有很多理由讓你丟掉表格、去適應(yīng)基于 CSS 的排版， 可在推動 Web標(biāo)準(zhǔn)的洪流中，許多人夸大了收益。 大的站點(diǎn)改用 CSS 排版確實(shí)能節(jié)省不少帶寬?？蓪Υ蟛糠值钠渌军c(diǎn)來說，受益小得庶幾可以忽略不計(jì)。

　　大家都希望頁面載入得更快， 而標(biāo)準(zhǔn)鼓吹者們也說 CSS 能幫你做到這一點(diǎn)。大多數(shù)站點(diǎn)的“設(shè)計(jì)”都是均勻分布在整個站點(diǎn)上的，但基于 CSS 的“設(shè)計(jì)”是放在一個到更多的文件中的。 這些文件會很快變得很復(fù)雜、很大，即便一個小站點(diǎn)也是如此。我最近設(shè)計(jì)的一個站點(diǎn)用了 4 個樣式表，加起來有 12k 之大 (雖說包括了空白和注釋)。使用 CSS其實(shí)是在先集中地載入然后再瀏覽，而不是把要載入的數(shù)據(jù)平均分布到整個站點(diǎn)各處。也就是說，相比用表格排版，首頁需要花更長的時間來下載。只不過如果樣式表已經(jīng)下載了，它們會被緩存起來而不需要重新下載。可畢竟一個站點(diǎn)的首頁是你最不希望載入得那么慢的一頁呀。

　六、招攬客戶

　　即便有時網(wǎng)頁設(shè)計(jì)者們覺得把符合  Web 標(biāo)準(zhǔn)搭售給客戶是有必要的，但令人遺憾的事實(shí)是，大多數(shù)的客戶對站點(diǎn)的代碼好壞并不在意。我們一般用的是胡蘿卜加大棒的方式，胡蘿卜是諸如對搜索引擎的友好度之類，而大棒才是網(wǎng)頁的親和力 (accessibility)。

　　確然，搜索引擎是比較喜歡語義化標(biāo)記的頁面，而且大家也都認(rèn)為搜索引擎喜歡短小的代碼，通過 CSS 和 Web 標(biāo)準(zhǔn)來建構(gòu)站點(diǎn)可以大大增進(jìn)對搜索引擎友好的站點(diǎn)的開發(fā)。然而沒有銀彈。許多基于表格的站點(diǎn)照樣獲得了很高的搜索引擎排名。 用 CSS 開發(fā)的站點(diǎn)照樣也可能只獲得一個很糟糕的排名。高排名的關(guān)鍵是內(nèi)容和來自別處的鏈接，而不是用表格還是用 CSS 來排版。

　　另外關(guān)于利用客戶對“親和力”這個詞的敬畏來搭售 Web  標(biāo)準(zhǔn)特別是 CSS 設(shè)計(jì)， 其實(shí)基于表格的設(shè)計(jì)沒有什么天生的親和力缺陷，表格只要線性化了，就有意義，內(nèi)容也就具有親和力了?，F(xiàn)時的讀屏器技術(shù)已經(jīng)不錯，而且大部分的讀屏器都能很好的支持基于表格的站點(diǎn)。當(dāng)然你的站點(diǎn)的語法最好被認(rèn)證通過 AA 親和力等級，即便對更嚴(yán)格的 AAA 等級，不用表格設(shè)計(jì)也不過是個建議罷了，并非必備。

　　另一個經(jīng)常提到的受益是可以讓客戶獨(dú)立于設(shè)計(jì)提供商。在人人都依照標(biāo)準(zhǔn)開發(fā)的世界里，客戶要換個開發(fā)伙伴是很容易的事情，新的開發(fā)人員可以很快明白站點(diǎn)的組織結(jié)構(gòu)，而不需趟過先前某人的標(biāo)記泥淖。但這得要大量的設(shè)計(jì)提供商都精通 Web 標(biāo)準(zhǔn)才行。 不幸的是，現(xiàn)在的情況并非如此。 雖然經(jīng)驗(yàn)豐富的 CSS 開發(fā)者在增多，但這還是個相對比較專業(yè)的領(lǐng)域，因此，大公司要鎖定在這種開發(fā)方式上還是比較有風(fēng)險(xiǎn)的――缺少熟練的開發(fā)者。我個人的經(jīng)驗(yàn)是如果一個組織要用 CSS 開發(fā)站點(diǎn)， 得長期保持至少一個經(jīng)驗(yàn)豐富的設(shè)計(jì)師才夠用。 所以現(xiàn)在轉(zhuǎn)向 Web 標(biāo)準(zhǔn)不是降低了客戶對開發(fā)者的依賴，而是增加了。

　七、總結(jié)

　　毫無疑問地，Web 標(biāo)準(zhǔn)和基于 CSS 的設(shè)計(jì)是未來之路。 可在我們奔向它們、鼓吹新技術(shù)的過程中，也會懷疑自己鼓吹的東西是否太夸張了。比較現(xiàn)實(shí)地做點(diǎn)東西卻往往達(dá)不到我們的期望。而教條地推行這些很可能疏遠(yuǎn)了我們最應(yīng)該贏得的伙伴。

　　基于表格的設(shè)計(jì)還會存在好長一段時間。要吸引開發(fā)者，我們可以用實(shí)例來教人上手，并降低門檻。更別弄出新的門檻來了。我們得誠實(shí)地正視利益和代價(jià)。 開發(fā) CSS 站點(diǎn)可能比較困難、耗時，而在某些情況下用表格來排版比 CSS 有意義得多。