表格對決CSS--一(yī)場生(shēng)死之戰

原文作者：Sergio Villarreal
作者簡介：墨西哥網頁設計師，1993年接觸網絡，個人主頁爲Overcaffeinated.net
原文出處：sitepoint.com
原文發表時間：2004年5月27日

前言
我(wǒ)(wǒ)第一(yī)次在internet上沖浪用的還是啞終端。不久以後，明尼蘇達州的一(yī)種單色的顯示器居然可以通過服務器播放(fàng)電影"巨蟒和聖杯"。當時沒有鼠标，沒有良好的操作界面，更不用說24位彩色了。Gopher是唯一(yī)可用的工(gōng)具。搜索則隻能用Archie和Veronica。沒有人聽(tīng)說過W3( World Wide Web)，當時網絡看起來已經足夠用了。
譯者注：
1.啞終端。很像PC，但沒有它自己的CPU、内存和硬盤。通過共同的主機來處理事務。
2.Gopher。一(yī)個客戶/服務器(client/server) 應用程序，它通過執行FTP傳輸，遠程登錄(remote login)， Archie 查找等，把所有信息以菜單形式顯示給最終用戶(end-user)，使用戶能浏覽大(dà)量信息。這樣用戶訪問 Internet資(zī)源時可以不需要知(zhī)道（或輸入）其地址。
3.Archie是第一(yī)個自動索引互聯網上匿名FTP網站文件的程序，但它還不是真正的搜索引擎。
4.Veronica是一(yī)種Gopher型的資(zī)源，你可用它在Gopher空間裏檢索包含指定的特殊單詞的所有菜單項。
又(yòu)過了一(yī)段時間，奇怪的代碼開(kāi)始充斥我(wǒ)(wǒ)的搜索結果，我(wǒ)(wǒ)雖然還能夠閱讀需要的内容，但這些代碼卻令人讨厭(yàn)。同事告訴我(wǒ)(wǒ)那是HT ML，一(yī)種internet圖形化語言，我(wǒ)(wǒ)曾經學習了一(yī)些方法試圖濾掉HTML。再後來，出現了256色的顯示器和Mosaic浏覽器的第一(yī)個版本，一(yī)切都開(kāi)始變得不同了。
從那時到現在已經很長時間了，技術上已經發生(shēng)了難以置信的提高，web界面也被無數次地徹底改革、重新思考和重新改造。從我(wǒ)(wǒ)開(kāi)始成爲網頁設計師工(gōng)作，我(wǒ)(wǒ)親自曆經了表格爲基礎的設計、JavaScript的悲哀、CSS的努力發展以及更重要、更普遍接受的web标準各個發展時期。
一(yī)開(kāi)始，internet隻是按照Geek(技術狂熱分(fēn)子)想法創建出來的，internet上隻有純粹的内容，他們沒有考慮到背景顔色和漂亮的圖片。但事實上，人們都喜歡在沖浪的時候看到更豐富的表現形式。表格(table)設計方法的出現解決了這個困難，我(wǒ)(wǒ)們可以通過表格來控制布局！我(wǒ)(wǒ)們紛紛開(kāi)始"欺騙"系統，不能做出1 pixel的細線？隻要在表格的行中(zhōng)插入一(yī)個透明的GIF小(xiǎo)點，再設置一(yī)個背景色就可以實現了！不能控制字體(tǐ)？那就使用另一(yī)個标簽<font>!
在我(wǒ)(wǒ)接觸CSS和web标準之前，我(wǒ)(wǒ)已經用表格方法設計好多年了。web标準的設計方法完全與以前不同，它是有效率的，它是迷人的。我(wǒ)(wǒ)深深地、熱烈的喜歡上新的設計方法。它可以用有意義的代碼将内容從布局中(zhōng)分(fēn)離(lí)出來，卻依然保持空格和美麗的設計，我(wǒ)(wǒ)一(yī)下(xià)就"喜新厭(yàn)舊(jiù)"了，不再采用老的設計方法。
直到今天。
關于web标準和CSS目前已經有了很多的讨論，就象每一(yī)個好的關鍵詞，它将成爲web技術發展史上下(xià)一(yī)個"大(dà)人物(wù)"。它開(kāi)始于Dougl as Bowman重新設計連線網站(Wired.com)，并不斷發展。2003年，Zeldman寫的《Designing with Web Standards》一(yī)書(shū)出版，讓我(wǒ)(wǒ)們都看見了曙光，全世界各地的設計師都爲新的設計方法而擁抱歡呼。它是結構化的，它是有語義的，它是快速的和輕量級的。
然而，依然有一(yī)部分(fēn)人們再采用傳統的表格設計方法，甚至還在用<font>标簽，他們說傳統方法更容易，更方便維護和快速開(kāi)發。到底誰是正确的？
我(wǒ)(wǒ)決定親自做一(yī)個實驗來看看事情是如何變化的，我(wǒ)(wǒ)們到底選擇哪種方法更好。
挑戰
我(wǒ)(wǒ)用圖象軟件設計了一(yī)個假想的網站。然後先用HTML4.01制作它，用表格,不用任何CSS；作爲對比，再用XHTML1.0 Transitional 制作它，代碼符合易用性和可訪問性規範，并采用CSS，盡量避免表格(除非表格是用來表現表格化數據。)
制作過程分(fēn)三階段，并詳細記錄過程，進行正反兩面的比較，看看我(wǒ)(wǒ)們得到了什麽？失去(qù)了什麽？我(wǒ)(wǒ)們應該站在哪一(yī)邊。
第一(yī)階段：設計站點
我(wǒ)(wǒ)開(kāi)始設計虛構的站點。我(wǒ)(wǒ)假設爲一(yī)個叫"Butterfly Watchers Association(蝴蝶觀察協會)"的組織制作網站。呵呵，這也許是我(wǒ)(wǒ)最好的客戶了，不會參與到設計流程中(zhōng)來。我(wǒ)(wǒ)盡量把它制作的真實一(yī)點，假想網站的目标用戶，采用傳統的布局和比較權威的字體(tǐ)。
我(wǒ)(wǒ)希望站點是結構緊湊的、有效的、簡明扼要的。而且，我(wǒ)(wǒ)想頁面上應該有蝴蝶，我(wǒ)(wǒ)到處尋找合适的蝴蝶圖片，不久就在stock.xchng找到了圖片。藍(lán)色的蝴蝶停在綠葉中(zhōng)，非常符合站點的形象。經過一(yī)些處理、修飾，這張圖就成爲我(wǒ)(wǒ)們頁面的header。
在設計過程中(zhōng)，我(wǒ)(wǒ)堅持一(yī)些易用性原則。例如盡量使圖片文件尺寸最小(xiǎo)。一(yī)開(kāi)始我(wǒ)(wǒ)準備在導航上采用Garamond字體(tǐ)，後來考慮到用戶的機器上可能沒有這種字體(tǐ)，我(wǒ)(wǒ)決定采用Georgia字體(tǐ)(這種字體(tǐ)類似 Times New Roman，最差情況下(xià)可以用 Times New Roman字體(tǐ)替代)。但在header圖片上，我(wǒ)(wǒ)還是采用了Georgia，因爲它是圖片。
文本使用灰色背景，使用Trebuchet MS字體(tǐ)；新聞采用Verdana字體(tǐ)，這種字體(tǐ)縮小(xiǎo)時看起來也很好。有一(yī)種不成文的規則，就是在一(yī)個設計中(zhōng)采用4種字體(tǐ)，我(wǒ)(wǒ)并不怎麽同意這種觀點。
對于蝴蝶和那些觀察它們的人們我(wǒ)(wǒ)知(zhī)之甚少，我(wǒ)(wǒ)放(fàng)了一(yī)篇觀察稀有蝴蝶的文章在首頁重要位置，我(wǒ)(wǒ)想這是用戶比較感興趣的内容。作爲組織，應該有很多會員(yuán)，所以我(wǒ)(wǒ)還放(fàng)了一(yī)些會員(yuán)信息。同時新聞也是必不可少的，我(wǒ)(wǒ)也加了上去(qù)。然後，還加了版權，一(yī)些象素裝飾圖，一(yī)個标語口号(They flutter. We watch them.)。整個頁面的布局是一(yī)個頁頭(header)緊接着是一(yī)行導航菜單，然後是2列内容，最後一(yī)行footer。我(wǒ)(wǒ)将"About"菜單設置爲高亮，以顯示onmouserover的效果，整個頁面看起來就象這樣：

好了，現在可以開(kāi)始代碼了。
第二階段："用以前的做法，使用透明的GIF圖片來控制間距."
如果你已經是一(yī)位參加過多個項目的網頁設計師，下(xià)面的結構是你再熟悉不過的：
<table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">Content goes here.</td> <td bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="#545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
用表格說話(huà)，我(wǒ)(wǒ)們已經習慣于用它了，因爲它是我(wǒ)(wǒ)們最基本的"積木塊"。例如：用透明的GIF圖片來控制間距、用表格的各種屬性來控制位置。有人這麽解釋：表格是可靠的，用表格布局的頁面可以向前兼容！沒有css敢與表格對抗，表格可以适合所有浏覽器等等。
讓我(wǒ)(wǒ)們開(kāi)始一(yī)步一(yī)步再現整個設計過程。
第1小(xiǎo)時
噢。好象時光倒流，不用CSS我(wǒ)(wǒ)們用什麽來定義背景顔色?哦，對...是bgcolor，謝謝提示。好，開(kāi)始制作表格，預覽效果。我(wǒ)(wǒ)定義了"align=center"，這樣就可以在所有浏覽器中(zhōng)居中(zhōng)，太好了，這多麽簡單！表格看上去(qù)好象并不壞，我(wǒ)(wǒ)有與老友重逢的感覺。我(wǒ)(wǒ)熟練地使用透明的GIF圖片來控制間距，工(gōng)作飛速前進！恩？在header和菜單之間怎麽會出現空白(bái)呢？哦，原來在images代碼後面多了一(yī)個空格，IE浏覽器會把它顯示出來。這改起來簡單，删除空格就好了。
第2小(xiǎo)時
我(wǒ)(wǒ)使用javaScript制作導航菜單的翻轉效果：
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
JavaScript這樣寫:
function chBg(obj) { obj.bgColor = "#E1E5DB"; } function chBg2(obj) { obj.bgColor = "#CBD1C3"; }
除了我(wǒ)(wǒ)對老設計方法有點忘記以外(wài)，整個進度還是相當快的。雖然，我(wǒ)(wǒ)盡量減少表格的嵌套，但代碼看上去(qù)還是有些複雜(zá)，所以我(wǒ)(wǒ)加了一(yī)些注釋上去(qù)，以方便找到我(wǒ)(wǒ)們需要修改的地方。
遇到了一(yī)個小(xiǎo)問題：不用css就無法消除鏈接的下(xià)劃線。也許有解決辦法，讓我(wǒ)(wǒ)們用google來搜索一(yī)下(xià)。
第3小(xiǎo)時
google搜索後還是沒有找到辦法，如何才能制作沒有下(xià)劃線的鏈接？一(yī)定有一(yī)個解決辦法！
第4小(xiǎo)時
可惡！因爲不能消除下(xià)劃線，我(wǒ)(wǒ)不能繼續制作圖片菜單。不過這個實驗的規則是我(wǒ)(wǒ)自己制定的，我(wǒ)(wǒ)可以破例違反一(yī)下(xià)。我(wǒ)(wǒ)用一(yī)點點 css來解決，隻要放(fàng)一(yī)句style="text-decoration: none;"在鏈接的地方就可以了，yay!解決了菜單下(xià)劃線的問題。
好了，我(wǒ)(wǒ)們接下(xià)來可以制作主要的2列。正文中(zhōng)的蝴蝶圖片我(wǒ)(wǒ)用了2個表格來實現細邊框效果，就象這樣：

讓我(wǒ)(wǒ)們來看看前4個小(xiǎo)時的成果在IE6以外(wài)浏覽器上的效果。噢！在Firefox中(zhōng)非常醜陋，在Opera和Netscape中(zhōng)看起來還不錯。
第5小(xiǎo)時
繼續代碼...，調試和修改。
工(gōng)作中(zhōng)，我(wǒ)(wǒ)認識到<font>标簽控制字體(tǐ)尺寸的局限性，我(wǒ)(wǒ)不能定義多種尺寸。真是該死！
News部分(fēn)的文字排版也遇到了問題，爲了縮進，我(wǒ)(wǒ)不得不用更多的表格嵌套來實現效果。爲了使正文中(zhōng)的蝴蝶圖片排列在文字的右面，我(wǒ)(wǒ)也不得不增加表格來解決。這種“欺騙”式的排版讓我(wǒ)(wǒ)感到很無奈。
第6小(xiǎo)時
設計結束了，看上去(qù)和最初的設計差不多，你可以點擊這裏看看 。
其中(zhōng)包含了多少表格，點擊這裏查看。
第三階段：我(wǒ)(wǒ)們不需要表格！
下(xià)面我(wǒ)(wǒ)們将看看什麽是基于web标準的、用CSS布局的設計。我(wǒ)(wǒ)将從内容的标識開(kāi)始。我(wǒ)(wǒ)将盡量使标識有語義，避免多餘的标簽。
頁頭是一(yī)個圖片，但它也是一(yī)個标題，所以我(wǒ)(wǒ)這樣寫代碼：
<h1>Butterfly Watchers Association. They flutter. We watch them.</h1>
我(wǒ)(wǒ)将稍後再考慮如何正确顯示這個标題(理想情況下(xià)，我(wǒ)(wǒ)們盡可能多的關心内容，盡可能少的關心布局)。其他标題(news，Sightin gs and Membership)将被标識爲<h2>。
菜單從根本上講就是一(yī)個無序列表(list)，所以将被标識爲list。段落不需要分(fēn)類(我(wǒ)(wǒ)們采用繼承選擇器來把它們"挂"在包含的層中(zhōng))。我(wǒ)(wǒ)将對比原始的内容文本，看爲了實現布局需要增加多少額外(wài)的标簽(我(wǒ)(wǒ)将盡力避免增加标簽)。
這就是原始的内容文本。看看原代碼，它符合xhtml1.0 transitional規範。注意所有的元素都已經被包含在定義了名稱的<div>中(zhōng)。新聞中(zhōng)的日期也被加上了date的類(class)。你可以看到代碼非常簡單。
第1小(xiǎo)時
定義"container" 層的border爲1px。通過在body樣式中(zhōng)定義"text-align: center"将内容居中(zhōng)。爲了在所有浏覽器中(zhōng)都居中(zhōng)，還在"container"中(zhōng)定義了margin: 0 auto;(意思就是top=0, right=auto, bottom=0, left=auto)。居中(zhōng)的處理方法和表格一(yī)樣容易。
定義"body"的padding"top"和"bottom"數值爲20px(不直接在"container"中(zhōng)定義padding是爲了适合所有浏覽器)。
無序列表(li)必須定義爲"display:inline"，這樣菜單會被顯示在一(yī)行内。我(wǒ)(wǒ)在菜單間增加了導航圖标。這些導航圖标是用不重複背景方法定義的，可以精确定義(x,y)位置，類似這樣：
background: url(menuBullet2.gif) no-repeat 4px 9px;
菜單的點擊顔色變化效果采用鏈接的hover樣式，不再需要JavaScript。
我(wǒ)(wǒ)設置頁頭的蝴蝶圖片爲<h1>的背景，這樣可以不用擔心易用性，在不能顯示圖片的設備中(zhōng)(如屏幕閱讀機和搜索機器人)也可以正常閱讀标題。
第2小(xiǎo)時
菜單的第一(yī)項(HOME)使用一(yī)個不同的圖标，我(wǒ)(wǒ)不得不隐藏原來的背景，爲HOME菜單增加一(yī)個額外(wài)的id(frst):
#hMenu ul li#frst
再另外(wài)一(yī)個(CONTACT)圖标：
background: transparent url(menuBullet3.gif) no-repeat 615px 9px;
我(wǒ)(wǒ)無法用CSS控制2列有一(yī)樣的高度，幸運的是，我(wǒ)(wǒ)可以用背景圖片來變通實現。我(wǒ)(wǒ)定義了"container"縱向重複背景。
background: #fff url(bgMain.gif) repeat-y;
第3小(xiǎo)時
CSS定義盒比表格方便多了，特别是邊框的許多屬性非常有用。
現在我(wǒ)(wǒ)開(kāi)始定義<h2>标題。圖标的定義和上面的方法一(yī)樣。
我(wǒ)(wǒ)将"news"層浮動(float)在"sightings" 和 "membership"的右面。 定義"copyright"層" clear: both;"，這樣它可以跟在浮動層的下(xià)面。将正文中(zhōng)的蝴蝶圖片浮動在右面，文字可以自動環繞在圖片周圍。定義圖片的1px border和設置padding距離(lí)就可以實現原來2個表格嵌套的效果。
又(yòu)發現一(yī)些問題：版權層與内容層有部分(fēn)重疊。
第4小(xiǎo)時
顯示的錯誤與"sightings" and "membership"的float:right; 定義有關。将它們浮動在左面就可以解決這個問題，這看上去(qù)很奇怪。我(wǒ)(wǒ)用firefox進行第一(yī)次測試，恩，看上去(qù)還不壞，隻是菜單的圖标有幾pixel的移位。
有一(yī)些CSS技巧可以修正在非IE浏覽器的顯示效果，例如給不同浏覽器不同的屬性值。
我(wǒ)(wǒ)同一(yī)元素定義中(zhōng)使用了!important 值，相同的定義寫在前面可以優先執行，這個值不被IE浏覽器支持。
background: url(menuBullet2.gif) no-repeat 4px 6px !important;
background: url(menuBullet2.gif) no-repeat 4px 9px;
在CSS中(zhōng)，如果同一(yī)元素有多個定義，最後一(yī)個是有效的。但是因爲IE不支持!important，所以IE将使用第二個定義值，而其他浏覽器将采用第一(yī)個定義值。
全部完成，看這裏的結果。
結論
基于表格的設計
我(wǒ)(wǒ)用各種能找到的浏覽器來測試頁面，包括linux、windows和Macintosh平台的浏覽器。表格布局的頁面在不同浏覽器中(zhōng)看上去(qù)都一(yī)樣。"它象岩石一(yī)樣堅固"，這是給表格布局的第一(yī)評價。
然而，當需要修改頁面部分(fēn)内容時，表格布局改起來相當費(fèi)力。這是一(yī)個問題，如果我(wǒ)(wǒ)們使用CMS(内容管理系統)，内容需要被格式化就比較麻煩。
整個設計時間有點長，是因爲我(wǒ)(wǒ)已經有點遺忘了老方法，如果重新再來一(yī)次，我(wǒ)(wǒ)想可能會節省1-2個小(xiǎo)時。
我(wǒ)(wǒ)形容基于表格的設計是大(dà)量"老土的(grunt work)"工(gōng)作，雖然我(wǒ)(wǒ)經常吃驚于那些高級設計技巧。使用基于純CSS的設計，我(wǒ)(wǒ)通常習慣于分(fēn)解設計和逐步分(fēn)析bug。而用表格設計則不需要這些工(gōng)作，你隻要不斷往設計裏面扔table就可以了。讓我(wǒ)(wǒ)們再來看看CSS的過程。
基于CSS的設計
用CSS設計的感覺好多了。代碼的改變直接而透明，我(wǒ)(wǒ)能清楚得控制整個過程，反觀表格的設計就象在壘磚頭。頁面的改變越大(dà)，越感到CSS設計的方便和效率。
CSS設計對節省帶寬也非常有意義，将所有樣式提取出來放(fàng)在單獨的文件中(zhōng)，整個站點用一(yī)個或幾個樣式表文件，可以使整個站點尺寸更小(xiǎo)。
将布局信息從内容中(zhōng)分(fēn)離(lí)出來，也有許多的好處。在将來，我(wǒ)(wǒ)可以随時改版整個站點而不需要修改任何内容，就象CSS Zen Garden 。同時也增加了易用性，搜索機器人将更加方便發現你的頁面(記住：google是你最重要的訪客來源)。
在制作完畢，我(wǒ)(wǒ)同樣在不同平台不同浏覽器上進行測試。IE5.5和IE6.0表現完美。IE5.0上出現了錯誤，菜單和一(yī)些縮進失效，錯位的頁頭效果看下(xià)面圖片：

好無疑問這個bug可以被修複，但是考慮到這篇文章的主題範圍，我(wǒ)(wǒ)不展開(kāi)講了。如果這是一(yī)個真實的客戶項目，我(wǒ)(wǒ)肯定不能犧牲I E5.0的用戶。在更老一(yī)點的浏覽器中(zhōng)，CSS的設計表現得一(yī)團糟。
IE4

Netscape 4.7x

如果對不支持CSS的浏覽器做一(yī)些代碼處理(例如對Netscape用@import)看上去(qù)會好一(yī)些。
盡管當你熟悉基于CSS的設計後工(gōng)作效率非常高，但是之前你必須花費(fèi)大(dà)量的時間學習規則、盒模型的不同、浏覽器的處理技巧以及許多的理論，并需要不斷的實踐來掌握。簡而言之，CSS比tables更簡單，但如果你想使用純CSS設計，請準備投資(zī)大(dà)量的時間學習。即使你是一(yī)位經驗老到的開(kāi)發高手，也要準備好應對各種bug，有時候處理一(yī)個bug會花費(fèi)幾個小(xiǎo)時。
勝者
CSS和基于web标準的設計勝出。隻要看看兩種方法的代碼就足以做出選擇了。CSS提供了更多的好處(主要在易用性方面)。其實根本的原因是我(wǒ)(wǒ)的懶惰。如果用表格設計，客戶一(yī)年後聯系我(wǒ)(wǒ)說需要改版，我(wǒ)(wǒ)可能會告訴他我(wǒ)(wǒ)參軍了，正在國外(wài)某個鄉村(cūn)。如果我(wǒ)(wǒ)使用的是CSS，我(wǒ)(wǒ)将毫不思索地爲客戶改版，因爲我(wǒ)(wǒ)不需要全部推翻重來。
感謝
謝謝Ava McBride，使用Browsercam 幫助測試我(wǒ)(wǒ)的設計。