前言
我第一次在internet上衝浪用的還是啞終端機。不久以後，明尼蘇達州的一種單色的顯示器居然可以通過服務器播放電影"巨蟒和聖杯"。當時沒有滑鼠，沒有良好的操作介面，更不用說24位元彩色了。 Gopher是唯一可用的工具。搜尋則只能用Archie和Veronica。沒有人聽過W3( World Wide Web)，當時網路看起來已經夠用了。
譯者註：
1.啞終端。很像PC，但沒有它自己的CPU、記憶體和硬碟。透過共同的主機來處理事務。
2.Gopher。一個客戶/伺服器(client/server) 應用程序，它透過執行FTP傳輸，遠端登入(remote login)， Archie 查找等，把所有資訊以選單形式顯示給最終使用者(end-user)，使用戶能瀏覽大量資訊.這樣使用者存取Internet資源時可以不需要知道（或輸入）其位址。
3.Archie是第一個自動索引互聯網上匿名FTP網站檔案的程序，但它還不是真正的搜尋引擎。
4.Veronica是一種Gopher型的資源，你可用它在Gopher空間裡檢索包含指定的特殊單字的所有選單項目。
又過了一段時間，奇怪的程式碼開始充斥我的搜尋結果，雖然我還能夠閱讀需要的內容，但這些程式碼卻令人討厭。同事告訴我那是HT ML，一種internet圖形化語言，我曾經學習了一些方法試圖濾掉HTML。再後來，出現了256色的顯示器和Mosaic瀏覽器的第一個版本，一切都開始變得不同了。
從那時到現在已經很長時間了，技術上已經發生了難以置信的提高，web介面也被無數次地徹底改革、重新思考和重新改造。從我開始成為網頁設計師工作，我親自歷經了表格為基礎的設計、JavaScript的悲哀、CSS的努力發展以及更重要、更普遍接受的web標準各個發展時期。
一開始，internet只是按照Geek(技術狂熱分子)想法創建出來的，internet上只有純粹的內容，他們沒有考慮到背景顏色和漂亮的圖片。但事實上，人們都喜歡在衝浪的時候看到更豐富的表現。表格(table)設計方法的出現解決了這個困難，我們可以透過表格來控制佈局！我們紛紛開始"欺騙"系統，不能做出1 pixel的細線？只要在表格的行中插入一個透明的GIF小點，再設定一個背景色就可以實現了！不能控製字體？那就用另一個標籤<font>!
在我接觸CSS和web標準之前，我已經用表格方法設計好多年了。 web標準的設計方法完全與以前不同，它是有效率的，它是迷人的。我深深、熱烈的喜歡上新的設計方法。它可以用有意義的程式碼將內容從佈局中分離出來，卻依然保持空格和美麗的設計，我一下就"喜新厭舊"了，不再採用老的設計方法。
直到今天。
關於web標準和CSS目前已經有了很多的討論，就像每一個好的關鍵字，它將成為web技術發展史上下一個"大人物"。它開始於Dougl as Bowman重新設計連線網站(Wired.com)，並不斷發展。 2003年，Zeldman寫的《Designing with Web Standards》一書出版，讓我們都看見了曙光，全世界各地的設計師都為新的設計方法而擁抱歡呼。它是結構化的，它是有語義的，它是快速的和輕量級的。
然而，仍有一部分人們再採用傳統的表格設計方法，甚至還在用<font>標籤，他們說傳統方法更容易，更方便維護和快速開發。到底誰才是正確的？
我決定親自做一個實驗來看看事情是如何改變的，我們到底選擇哪種方法比較好。
挑戰
我用圖象軟體設計了一個假想的網站。然後先用HTML4.01製作它，用表格,不用任何CSS；作為對比，再用XHTML1.0 Transitional 製作它，代碼符合易用性和可訪問性規範，並採用CSS，盡量避免表格(除非表格是用來表現表格化資料。
製作過程分三階段，並詳細記錄過程，進行正反兩面的比較，看看我們得到了什麼？失去了什麼？我們應該站在哪一邊。
第一階段：設計站點
我開始設計虛構的站點。我假設為一個叫做"Butterfly Watchers Association(蝴蝶觀察協會)"的組織製作網站。呵呵，這也許是我最好的客戶了，不會參與設計流程。我盡量把它製作的真實一點，假想網站的目標用戶，採用傳統的佈局和比較權威的字體。
我希望站點是結構緊湊的、有效的、簡潔扼要的。而且，我想頁面上應該有蝴蝶，我到處尋找合適的蝴蝶圖片，不久就在stock.xchng找到了圖片。藍色的蝴蝶停在綠葉中，非常符合站點的圖像。經過一些處理、修飾，這張圖就成為我們頁面的header。
在設計過程中，我堅持一些易用原則。例如盡量使圖片檔案尺寸最小。一開始我準備在導航上採用Garamond字體，後來考慮到用戶的機器上可能沒有這種字體，我決定採用Georgia字體(這種字體類似Times New Roman，最差情況下可以用Times New Roman字體替代) 。但在header圖片上，我還是採用了Georgia，因為它是圖片。
文字使用灰色背景，使用Trebuchet MS字體；新聞採用Verdana字體，這種字體縮小時看起來也很好。有一種不成文的規則，就是在一個設計中採用4種字體，我並不怎麼同意這種觀點。
第二階段："用以前的做法，使用透明的GIF圖片來控制間距."
如果你已經是一位參加過多個專案的網頁設計師，以下的架構是你再熟悉不過的：
<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>
用表格說話，我們已經習慣用它了，因為它是我們最基本的"積木塊"。例如：用透明的GIF圖片來控制間距、用表格的各種屬性來控制位置。有人這麼解釋：表格是可靠的，用表格佈局的頁面可以向前相容！沒有css敢與表格對抗，表格可以適合所有瀏覽器等等。
讓我們開始一步一步再現整個設計過程。
第1小時
噢。好像時光倒流，不用CSS我們用什麼來定義背景顏色?哦，對...是bgcolor，謝謝提示。好，開始製作表格，預覽效果。我定義了"align=center"，這樣就可以在所有瀏覽器中居中，太好了，這多麼簡單！表格看起來好像並不壞，我有與老友重逢的感覺。我熟練地使用透明的GIF圖片來控制間距，工作飛速前進！恩？在header和選單之間怎麼會出現空白呢？哦，原來在images程式碼後面多了一個空格，IE瀏覽器會把它顯示出來。這改起來簡單，刪除空格就好了。
第2小時
我使用javaScript製作導航選單的翻轉效果：
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
JavaScript這樣寫:
function chBg(obj) { obj.bgColor = "#E1E5DB"; } function chBg2(obj) { obj.bgColor = "#CBD1C3"; }
除了我對老設計方法有點忘記以外，整個進度還是相當快的。雖然，我盡量減少表格的嵌套，但程式碼看起來還是有些複雜，所以我加了一些註解上去，以方便找到我們需要修改的地方。
遇到了一個小問題：不用css就無法消除連結的底線。也許有解決辦法，讓我們用google來搜尋一下。
第3小時
google搜尋後還是沒找到方法，如何製作沒有底線的連結？一定有解決辦法！
第4小時
讓我們來看看前4小時的成果在IE6以外瀏覽器上的效果。噢！在Firefox中非常醜陋，在Opera和Netscape中看起來還不錯。
第5小時
繼續程式碼...，調試和修改。
工作中，我認識到<font>標籤控製字體尺寸的局限性，我不能定義多種尺寸。真是該死！
News部分的文字排版也遇到了問題，為了縮進，我不得不用更多的表格嵌套來實現效果。為了使正文中的蝴蝶圖片排列在文字的右面，我也不得不增加表格來解決。這種「欺騙」式的排版讓我感到很無奈。
第6小時
設計結束了，看起來和最初的設計差不多，可以點這裡看看。
其中包含了多少表格，點這裡查看。
第三階段：我們不需要表格！
下面我們將看看什麼是基於web標準的、用CSS佈局的設計。我將從內容的標誌開始。我將盡量使標識有語義，避免多餘的標籤。
頁頭是一個圖片，但它也是一個標題，所以我這樣寫程式碼：
<h1>Butterfly Watchers Association. They flutter. We watch them.</h1>
我稍後再考慮如何正確顯示這個標題(理想情況下，我們盡可能多的關心內容，盡可能少的關心佈局)。其他標題(news，Sightin gs and Membership)將被標識為<h2>。
選單從根本上來說就是一個無序列表(list)，所以將被標識為list。段落不需要分類(我們採用繼承選擇器來把它們"掛"在包含的層中)。我將比較原始的內容文本，看為了實現佈局需要增加多少額外的標籤(我將盡力避免增加標籤)。
這就是原始的內容文字。看看原始程式碼，它符合xhtml1.0 transitional規範。注意所有的元素都已經被包含在定義了名稱的<div>中。新聞中的日期也被加上了date的類別(class)。你可以看到程式碼非常簡單。
第1小時
定義"container" 層的border為1px。透過在body樣式中定義"text-align: center"將內容置中。為了在所有瀏覽器中都居中，在"container"中也定義了margin: 0 auto;(意思是top=0, right=auto, bottom=0, left=auto)。居中的處理方法和表格一樣容易。
定義"body"的padding"top"和"bottom"數值為20px(不直接在"container"中定義padding是為了適合所有瀏覽器)。
無序列表(li)必須定義為"display:inline"，這樣選單會被顯示在一行內。我在選單間增加了導航圖示。這些導航圖示是用不重複背景方法定義的，可以精確定義(x,y)位置，類似這樣：
background: url(menuBullet2.gif) no-repeat 4px 9px; 選單的點擊顏色變更效果採用連結的hover樣式，不再需要JavaScript。
我設定頁頭的蝴蝶圖片為<h1>的背景，這樣可以不用擔心易用性，在不能顯示圖片的設備中(如螢幕閱讀機和搜尋機器人)也可以正常閱讀標題。
第2小時
菜單的第一項(HOME)使用一個不同的圖標，我不得不隱藏原來的背景，為HOME菜單增加一個額外的id(frst):
#hMenu ul li#frst
再另外一個(CONTACT)圖示：
background: transparent url(menuBullet3.gif) no-repeat 615px 9px; 我無法用CSS控制2列有一樣的高度，幸運的是，我可以用背景圖片來變通實作。我定義了"container"縱向重複背景。
background: #fff url(bgMain.gif) repeat-y;
第3小時
CSS定義盒比表格方便多了，特別是邊框的許多屬性非常有用。
現在我開始定義<h2>標題。圖示的定義和上面的方法一樣。
我將"news"層浮動(float)在"sightings" 和"membership"的右邊。 定義"copyright"層" clear: both;"，這樣它可以跟在浮動層的下面。將內文中的蝴蝶圖片浮動在右面，文字可以自動環繞在圖片周圍。定義圖片的1px border和設定padding距離就可以達到原來2個表格嵌套的效果。
又發現一些問題：版權層與內容層有部分重疊。
第4小時
顯示的錯誤與"sightings" and "membership"的float:right; 定義有關。將它們浮動在左面就可以解決這個問題，這看起來很奇怪。我用firefox進行第一次測試，恩，看起來還不壞，只是選單的圖示有幾pixel的移位。
有一些CSS技巧可以修正在非IE瀏覽器的顯示效果，例如給不同瀏覽器不同的屬性值。
我在同一元素定義中使用了!important 值，相同的定義寫在前面可以優先執行，這個值不會被IE瀏覽器支援。
background: url(menuBullet2.gif) no-repeat 4px 6px !important;
background: url(menuBullet2.gif) no-repeat 4px 9px;
在CSS中，如果同一元素有多個定義，最後一個是有效的。但因為IE不支援!important，所以IE會使用第二個定義值，而其他瀏覽器將採用第一個定義值。
全部完成，看這裡的結果。
結論
基於表格的設計
我用各種能找到的瀏覽器來測試頁面，包括linux、windows和Macintosh平台的瀏覽器。表格佈局的頁面在不同瀏覽器看起來都一樣。 "它像岩石一樣堅固"，這是給表格佈局的第一個評價。
然而，當需要修改頁面部分內容時，表格佈局改變起來相當費力。這是一個問題，如果我們使用CMS(內容管理系統)，內容就需要被格式化就比較麻煩。
整個設計時間有點長，是因為我已經有點遺忘了老方法，如果重新再來一次，我想可能會節省1-2個小時。
我形容基於表格的設計是大量"老土的(grunt work)"工作，雖然我經常吃驚於那些高級設計技巧。使用基於純CSS的設計，我通常習慣於分解設計和逐步分析bug。而用表格設計則不需要這些工作，你只要不斷往設計裡面丟table就可以了。讓我們再來看看CSS的流程。
基於CSS的設計
用CSS設計的感覺好多了。程式碼的改變直接而透明，我能清楚得控制整個過程，反觀表格的設計就像在壘磚頭。頁面的改變越大，越覺得CSS設計的方便與效率。
CSS設計對節省頻寬也非常有意義，將所有樣式提取出來放在單獨的文件中，整個網站用一個或幾個樣式表文件，可以使整個網站尺寸更小。
將佈局資訊從內容中分離出來，也有許多的好處。在將來，我可以隨時改版整個網站而不需要修改任何內容，就像CSS Zen Garden 。同時也增加了易用性，搜尋機器人將更方便發現你的頁面(記住：google是你最重要的訪客來源)。
儘管當你熟悉基於CSS的設計後工作效率非常高，但是之前你必須花費大量的時間學習規則、盒模型的不同、瀏覽器的處理技巧以及許多的理論，並需要不斷的實踐來掌握。簡而言之，CSS比tables更簡單，但如果你想使用純CSS設計，請準備投資大量的時間來學習。即使你是經驗老到的開發高手，也要準備好應付各種bug，有時候處理一個bug會花幾個小時。
勝者
CSS和基於web標準的設計勝出。只要看看兩種方法的程式碼就足以做出選擇了。 CSS提供了更多的好處(主要在易用性方面)。其實根本的原因是我的懶惰。如果用表格設計，客戶一年後聯絡我說需要改版，我可能會告訴他我參軍了，正在國外某個鄉村。如果我使用的是CSS，我將毫不思索地為客戶改版，因為我不需要全部推翻重來。