文： Andy Budd / 譯： Jjgod Jiang
譯自 An Objective Look at Table Based vs. CSS Based Design
我和作者的觀點(diǎn)差不多.標(biāo)準(zhǔn)好,但是未必實(shí)用.
以下是ZT文章:
經(jīng)年以來(lái)，許多優(yōu)秀的文章都在贊美著基于 CSS 設(shè)計(jì)的優(yōu)越， 哀嘆著基于表格設(shè)計(jì)的沒(méi)落。但卻很少有人換個(gè)角度想想，或許是因?yàn)槟愕迷诹私獠⑦\(yùn)用了基于 CSS 的設(shè)計(jì)之后才可以批評(píng)它， 而一旦了解了之后，你又不愿意回頭去用原先的老式設(shè)計(jì)方法了。
為了彌補(bǔ)一下這種不平衡，也因?yàn)樵谶@場(chǎng)游戲中扮演一個(gè)大反派挺酷的，我決定寫(xiě)篇文章，說(shuō)說(shuō)為何在某些情況下，傳統(tǒng)的表格設(shè)計(jì)方式就算不比基于CSS 的――或者說(shuō)基于標(biāo)準(zhǔn)的――設(shè)計(jì)方式好，也不比它們差。
一、妖魔化表格
表格出現(xiàn)以前，Web 本是個(gè)相當(dāng)乏味的地方，正是使用表格排版，才打開(kāi)了可視化的頁(yè)面設(shè)計(jì)的新局面。表格對(duì)于 Web 和 Web 設(shè)計(jì)領(lǐng)域普及的貢獻(xiàn)到底有多大或許有爭(zhēng)議，但一旦離開(kāi)表格，我們這些網(wǎng)頁(yè)設(shè)計(jì)師們必會(huì)失去工作，卻是毋庸置疑的。
近年來(lái)基于表格的設(shè)計(jì)確實(shí)被妖魔化了，Web 純化論者會(huì)告訴你，表格對(duì)排版毫無(wú)意義，因而你絕不能用到它。然而歷史證明，許多技術(shù)一開(kāi)始是為了實(shí)現(xiàn)某個(gè)目標(biāo)設(shè)計(jì)的，卻在別的領(lǐng)域發(fā)現(xiàn)了更大的用場(chǎng)而大展身手。 就像 Web 本身，一開(kāi)始不也只是為了共享研究數(shù)據(jù)嘛，現(xiàn)在在娛樂(lè)和商業(yè)方面的應(yīng)用卻與信息與教育方面的并駕齊驅(qū)了。
二、只為舒服一點(diǎn)
Web 設(shè)計(jì)師們多年以來(lái)都在使用表格排版頁(yè)面，這是絕大部分設(shè)計(jì)師都已掌握的能力。如此地使用表格能保證你獲得預(yù)想的效果，通過(guò)一些簡(jiǎn)單的 hack，比如間隔 gif， 我們幾乎一定能保證我們的站點(diǎn)在最廣泛的 Web 瀏覽器上看起來(lái)都一樣，從最低版本的 Netscape 4到Safari 這樣的現(xiàn)代瀏覽器。
盡管先驅(qū)者們?cè)缫研麄髁撕镁?nbsp;Web 標(biāo)準(zhǔn)， 大部分的網(wǎng)站還是使用表格和不兼容標(biāo)準(zhǔn)的代碼開(kāi)發(fā)的，因此用戶代理就不得不在很長(zhǎng)一段時(shí)間內(nèi)支持基于表格的排版方式。 這對(duì)于 Web 標(biāo)準(zhǔn)的賣點(diǎn)來(lái)說(shuō)，是個(gè)致命的打擊：標(biāo)準(zhǔn)沒(méi)有標(biāo)準(zhǔn)應(yīng)有的地位。不大可能會(huì)出現(xiàn)下面這種情況，某個(gè)主要的瀏覽器廠商 (唔，還是說(shuō) Microsoft) 突然發(fā)布了一個(gè)大部分網(wǎng)站都顯示不了的瀏覽器。
所以網(wǎng)頁(yè)設(shè)計(jì)者們總感覺(jué)不到開(kāi)始使用基于 CSS 排版和支持標(biāo)準(zhǔn)的代碼的那種危機(jī)感和必要性。
三、降低門檻Web
正是因?yàn)樗拈T檻低才如此成功的： HTML 是個(gè)簡(jiǎn)單易學(xué)的語(yǔ)言，瀏覽器又能容忍許多標(biāo)記混亂的文檔。 這使在 Web 上發(fā)布內(nèi)容變得難以置信地容易。即便你 12 歲的侄子也能用 Microsoft Office 中附帶的 Frontpage 搗鼓出一個(gè)簡(jiǎn)單的網(wǎng)站來(lái)。
基于表格的設(shè)計(jì)比之基于 CSS 的，當(dāng)然 CSS 的語(yǔ)法很簡(jiǎn)單，正常人都會(huì)同意：你沒(méi)必要是火箭科學(xué)家才能學(xué)會(huì) CSS。盡管如此，其中有些概念還是過(guò)于微妙了，不易領(lǐng)會(huì)。比如表面上看，Box 模型很簡(jiǎn)單，但我偶爾還是會(huì)在邊界折疊 (margin collapsing) 上滑一跤， 浮動(dòng)(float) 和清除 (clear) 這樣的概念也不好理解，較難運(yùn)用。 以我的經(jīng)驗(yàn)而言，從了解 CSS 的基本概念到能自如地用 CSS 開(kāi)發(fā)站點(diǎn)，大約需要走過(guò)一條為期 6-12 月的學(xué)習(xí)曲線。
然后是瀏覽器支不支持的問(wèn)題。一旦你正式開(kāi)始干活，就會(huì)慢慢了解哪個(gè)瀏覽器支持什么、不支持什么，和一些常見(jiàn)的瀏覽器 bug?？上ug 太多了， 就算“專家”們也難以估量自己花在修整 bug 上的時(shí)間。對(duì)新手來(lái)說(shuō)就更讓人泄氣了，因?yàn)樗麄儾恢朗且驗(yàn)樽约赫`解了CSS 呢，還是某些晦澀的瀏覽器 bug？也許這就是為何同樣的問(wèn)題一再出現(xiàn)在 CSS-Discuss 等郵件列表上的原因吧。
如果瀏覽器廠商們終能步調(diào)一致， 用 CSS 開(kāi)發(fā)站點(diǎn)將會(huì)容易得多。但我還是覺(jué)得――大部分人也會(huì)同意――CSS 開(kāi)發(fā)的門檻比基于表格的還是太高了。換個(gè)說(shuō)法， 我覺(jué)得這也說(shuō)明了為何基于 CSS 的設(shè)計(jì)在Web 專家們之間如此流行。這讓他們把自己和那些業(yè)余的“Front-page 牛仔”們區(qū)分開(kāi)來(lái)，讓他們找回當(dāng)年 Web 只屬于自己這個(gè)小群體時(shí)的感覺(jué)。 大概這正式因此，那么多人都把 Web 標(biāo)準(zhǔn)看作不可觸及的“象牙塔”， 那么多 Web 標(biāo)準(zhǔn)的鼓吹者卻以狂熱的態(tài)度，帶著優(yōu)越感去看待網(wǎng)頁(yè)設(shè)計(jì)。
四、有些東西還是用表格來(lái)做更容易
我確信我們大家都曾發(fā)現(xiàn)，自己為了實(shí)現(xiàn)用表格做起來(lái)是小菜一碟的功能寫(xiě)了相當(dāng)復(fù)雜的 CSS。比如處理表單 (form) 的外觀，形狀再?gòu)?fù)雜怪異的表單也能用表格輕松搞定。 你是可以用 CSS 的浮動(dòng)元素實(shí)現(xiàn)類似的結(jié)果，但就麻煩多了。 如果你是個(gè) CSS guru，這種麻煩也是快樂(lè)的事?？珊翢o(wú)疑問(wèn)，如果你只是個(gè)普通人，還有個(gè)會(huì)掐住你的喉嚨問(wèn)你怎么做個(gè)小表單也花了這么久的老板，事情就不那么好玩了。
如果你有足夠的知識(shí)，又有足夠的耐心，習(xí)慣于用表格做的大部分事情還是都能用 CSS 實(shí)現(xiàn)的。 雖說(shuō)花的時(shí)間長(zhǎng)點(diǎn)吧，還是有個(gè)限度的(或者被打擊得放棄了嘗試)。關(guān)鍵是確實(shí)有些無(wú)論你怎么努力，還是無(wú)法實(shí)現(xiàn)的東西，其中一項(xiàng)便是頁(yè)腳欄 (page footer)。我常常見(jiàn)到來(lái)自灰心失望的 CSS 作者的貼子， 他們?cè)噲D創(chuàng)建那種可以粘在窗口底端的頁(yè)腳欄，使即便那個(gè)窗口沒(méi)伸展到整個(gè)屏幕也能保證效果。如果用到了表格，要做出這種效果簡(jiǎn)單得很， 可單獨(dú)用 CSS 來(lái)做就是另一回事了。 為什么還有 Web 開(kāi)發(fā)者們不愿意用 CSS？就是因?yàn)橐坏┎挥帽砀?，?jiǎn)單的事情反而變復(fù)雜了。
五、夸大收益
有很多理由讓你丟掉表格、去適應(yīng)基于 CSS 的排版， 可在推動(dòng) Web標(biāo)準(zhǔn)的洪流中，許多人夸大了收益。 大的站點(diǎn)改用 CSS 排版確實(shí)能節(jié)省不少帶寬?？蓪?duì)大部分的其他站點(diǎn)來(lái)說(shuō)，受益小得庶幾可以忽略不計(jì)。
大家都希望頁(yè)面載入得更快， 而標(biāo)準(zhǔn)鼓吹者們也說(shuō) CSS 能幫你做到這一點(diǎn)。大多數(shù)站點(diǎn)的“設(shè)計(jì)”都是均勻分布在整個(gè)站點(diǎn)上的，但基于 CSS 的“設(shè)計(jì)”是放在一個(gè)到更多的文件中的。 這些文件會(huì)很快變得很復(fù)雜、很大，即便一個(gè)小站點(diǎn)也是如此。我最近設(shè)計(jì)的一個(gè)站點(diǎn)用了 4 個(gè)樣式表，加起來(lái)有 12k 之大 (雖說(shuō)包括了空白和注釋)。使用 CSS其實(shí)是在先集中地載入然后再瀏覽，而不是把要載入的數(shù)據(jù)平均分布到整個(gè)站點(diǎn)各處。也就是說(shuō)，相比用表格排版，首頁(yè)需要花更長(zhǎng)的時(shí)間來(lái)下載。只不過(guò)如果樣式表已經(jīng)下載了，它們會(huì)被緩存起來(lái)而不需要重新下載?？僧吘挂粋€(gè)站點(diǎn)的首頁(yè)是你最不希望載入得那么慢的一頁(yè)呀。
六、招攬客戶
即便有時(shí)網(wǎng)頁(yè)設(shè)計(jì)者們覺(jué)得把符合 Web 標(biāo)準(zhǔn)搭售給客戶是有必要的，但令人遺憾的事實(shí)是，大多數(shù)的客戶對(duì)站點(diǎn)的代碼好壞并不在意。我們一般用的是胡蘿卜加大棒的方式，胡蘿卜是諸如對(duì)搜索引擎的友好度之類，而大棒才是網(wǎng)頁(yè)的親和力 (accessibility)。
確然，搜索引擎是比較喜歡語(yǔ)義化標(biāo)記的頁(yè)面，而且大家也都認(rèn)為搜索引擎喜歡短小的代碼，通過(guò) CSS 和 Web 標(biāo)準(zhǔn)來(lái)建構(gòu)站點(diǎn)可以大大增進(jìn)對(duì)搜索引擎友好的站點(diǎn)的開(kāi)發(fā)。然而沒(méi)有銀彈。許多基于表格的站點(diǎn)照樣獲得了很高的搜索引擎排名。 用 CSS 開(kāi)發(fā)的站點(diǎn)照樣也可能只獲得一個(gè)很糟糕的排名。高排名的關(guān)鍵是內(nèi)容和來(lái)自別處的鏈接，而不是用表格還是用 CSS 來(lái)排版。
另外關(guān)于利用客戶對(duì)“親和力”這個(gè)詞的敬畏來(lái)搭售 Web 標(biāo)準(zhǔn)特別是 CSS 設(shè)計(jì)， 其實(shí)基于表格的設(shè)計(jì)沒(méi)有什么天生的親和力缺陷，表格只要線性化了，就有意義，內(nèi)容也就具有親和力了?，F(xiàn)時(shí)的讀屏器技術(shù)已經(jīng)不錯(cuò)，而且大部分的讀屏器都能很好的支持基于表格的站點(diǎn)。當(dāng)然你的站點(diǎn)的語(yǔ)法最好被認(rèn)證通過(guò) AA 親和力等級(jí)，即便對(duì)更嚴(yán)格的 AAA 等級(jí)，不用表格設(shè)計(jì)也不過(guò)是個(gè)建議罷了，并非必備。
另一個(gè)經(jīng)常提到的受益是可以讓客戶獨(dú)立于設(shè)計(jì)提供商。在人人都依照標(biāo)準(zhǔn)開(kāi)發(fā)的世界里，客戶要換個(gè)開(kāi)發(fā)伙伴是很容易的事情，新的開(kāi)發(fā)人員可以很快明白站點(diǎn)的組織結(jié)構(gòu)，而不需趟過(guò)先前某人的標(biāo)記泥淖。但這得要大量的設(shè)計(jì)提供商都精通 Web 標(biāo)準(zhǔn)才行。 不幸的是，現(xiàn)在的情況并非如此。 雖然經(jīng)驗(yàn)豐富的 CSS 開(kāi)發(fā)者在增多，但這還是個(gè)相對(duì)比較專業(yè)的領(lǐng)域，因此，大公司要鎖定在這種開(kāi)發(fā)方式上還是比較有風(fēng)險(xiǎn)的――缺少熟練的開(kāi)發(fā)者。我個(gè)人的經(jīng)驗(yàn)是如果一個(gè)組織要用 CSS 開(kāi)發(fā)站點(diǎn)， 得長(zhǎng)期保持至少一個(gè)經(jīng)驗(yàn)豐富的設(shè)計(jì)師才夠用。 所以現(xiàn)在轉(zhuǎn)向 Web 標(biāo)準(zhǔn)不是降低了客戶對(duì)開(kāi)發(fā)者的依賴，而是增加了。
七、總結(jié)
毫無(wú)疑問(wèn)地，Web 標(biāo)準(zhǔn)和基于 CSS 的設(shè)計(jì)是未來(lái)之路。 可在我們奔向它們、鼓吹新技術(shù)的過(guò)程中，也會(huì)懷疑自己鼓吹的東西是否太夸張了。比較現(xiàn)實(shí)地做點(diǎn)東西卻往往達(dá)不到我們的期望。而教條地推行這些很可能疏遠(yuǎn)了我們最應(yīng)該贏得的伙伴。
基于表格的設(shè)計(jì)還會(huì)存在好長(zhǎng)一段時(shí)間。要吸引開(kāi)發(fā)者，我們可以用實(shí)例來(lái)教人上手，并降低門檻。更別弄出新的門檻來(lái)了。我們得誠(chéng)實(shí)地正視利益和代價(jià)。 開(kāi)發(fā) CSS 站點(diǎn)可能比較困難、耗時(shí)，而在某些情況下用表格來(lái)排版比 CSS 有意義得多。
