崽子兔的窟

這一篇是我在PTT上回答人家問的問題，我也發現到這是許多人的疑惑，因此我特別轉過來。

其實大家的問題大多著重在，今天許多網頁設計師都是平面設計師轉過來，對他們而言，作網頁主要是經由Photoshop繪圖，ImageReady排版輸出然後由Dreamweaver調整HTML，這些動作也許已經行之有年了，對這些美術人員而言，CSS的語法簡直像是惡夢。

對程式設計師而言，CSS根本不能算是程式語言，連描述性語言都不是很適合，因為CSS只能告訴瀏覽器每個DOM應該有怎樣的特性，就好像車廠出同系列的車款時也會標注有不同的顏色車款一樣，既沒有邏輯判斷能力，更沒有程式運算的能力，CSS的功用只是將Photoshop畫好的圖片改成用文字的表達方式，敘述每個圖層的位置、大小、顏色等等，其實不用因為它是由文字組成的就對它感到恐懼。

首先我們先以一般人的想法來看，當然，既然顯示出的效果是一樣的，而且CSS還會因為不同瀏覽器支援度而有顯示上的差異，而這些用表格就可以輕鬆簡單達到一樣的效果，何樂而不為呢？

最簡單的想法，就是比較兩種不同寫法的HTML原始碼，假設一個你要改的區塊，並且嘗試著修改版面成另一個模樣，我相信你對CSS會開始產生改觀。用表格設計的HTML基於天生的理由，勢必要比純CSS+DOM網站多出數倍的原始碼數量，除了頻寬這個一般人比較難以感受到的問題之外，設計師修改版型時遇到的問題更大。

從設計的角度來說，表格設計是死的，而CSS設計是活的，一個已經寫好的表格版型因為先天格式的關係而很難再改變版型，例如我們要增加一個欄位就必須在每一行的 tr 中都加上一個 td ，其中有些還需要合併，只要有一個錯誤就會讓整個版面顯示完全錯亂，同樣的情況下CSS只需要另外增加一個Div標籤然後寫好CSS中的position值就好。

而且大多數的網站不會希望永遠都是同一個樣子的，如果有一天你想要更換風格與外表時，採用表格式設計的網頁勢必必須為了新的版面而全部重新規劃表格欄位（相信我，你不會想要利用增減表格欄位的方式來修改的，保證累死你還作不好），但是採用CSS+DOM的網頁再大多數時間只需要換一個CSS就好。

由於CSS與DOM之間是可分割的設計，即使沒有CSS支援網頁一樣可以以傳統HTML的方式顯示，不會因此造成內容無法判斷的問題，這情況在一些速度慢的網路或比較慢的設備上特別明顯，例如手機搭配GPRS上網（或是訊號不好的3G）時，CSS設計的網站可以設定成關閉CSS而只顯示純文字，來減少流量花費跟等待時間，對於更大型的網站來說，這些節省下來的流量將會減少相當多的成本支出。

尤其在現在，網頁也開始講究跨平台支援，包括電腦、手機、PDA、UMPC或EeePC都能夠上網，螢幕解析度從寬度160以下到1920以上像素的都有，採用表格設計的網頁因為表格寬度多半固定，如不固定在低解析度設備上則會被壓擠，也因此就無法針對不同解析度提供不同的效果，如果要支援不同設備的不同顯示方式，則要另外設計不同的版型，想想一個寬度980的表格版面能夠在現在多數的電腦上正常顯示，但是在EeePC、手機與PDA這種低解析度的裝置上呢？相信我，使用者的耐心絕對不會用在拖曳捲軸上… 他們會選擇立刻關閉網頁。

即使是沒有提供不同裝置不同顯示效果的網頁，許多手機使用的Opera瀏覽器都已經內建會自動調整版面內容成手機最適合閱讀的方式，使用CSS設計的網頁可以完全照自己想要的方式來分配內容順序，這可是表格設計所沒有的優點，在表格中左邊的欄位一定要在右邊的欄位之前顯示，上面的欄位也一定要在下面的欄位之前顯示，這是表格固有的順序，無法變更。甚至使用者如果使用Firefox配合一些套件還可以自己選擇自己想要的樣板，這點表格式設計是不可能做到的。

同時的我們也不能自私，照顧弱勢是現在的趨勢，盲人使用者也有盲人專用電腦瀏覽器（語音或點字瀏覽器），CSS+DOM的網頁因為可以將不必要的顯示效果(CSS)拿掉，而將最重要的內容優先顯示，因此也能讓盲人立即得到他們想要的資訊。

從開發方便性上來說，現在流行利用Ajax的方式來以不同步方式更新網頁內容，而JavaScript原始的設計就是針對DOM來開發，如果使用表格式設計，在動態更新內容的時候，一個不小心增加或刪除到主要表格的HTML，整個網頁就會混亂掉，這點Div做的就輕鬆多了！（可以嘗試看看針對複雜表格中的一個欄位與一群HTML中的一個小小Div區塊分別作插入與刪除內容的動作，比較兩者的差異）

現在許多部落格也有自訂區塊的功能，像是iGoogle的設計，那種自由變動的設計除了後台的設計之外，前台的顯示也是很重要的，如果使用表格設計，上下順序要對調時就會相當辛苦，邏輯上也很不合理，這點使用CSS則相對輕鬆許多。

有時在寫程式時，要輸出HTML時思考表格的配置時比較不合邏輯，我想要依上下方向輸出我要的內容，但是我必須要先由左到右的欄位都處理完畢後才能到下一行，這是不符合程式邏輯的！

現今網站除了外觀漂亮之外還有另一個重要考量，那就是SEO，改善SEO可以讓搜尋機器人更加輕易辨識網頁內容，使自己的網站能在各搜索引擎增加重要性，也就可以更加容易被使用者搜尋到，但是表格式設計是這些搜索引擎機器人們的惡夢，因為它們很難辨別主要內容，且在見到主要內容前必須先看到一堆對他們而言沒有任何意義的HTML，然後主要內容的排版順序又不合邏輯，根本無法判斷哪些是主要內容… 通常這種網站分數都很難比CSS設計的來的高。

當然我不是在詆毀表格式設計，它能夠存在這麼久也是有其道理，但是CSS也的確帶來許許多多的方便之處，主要是希望網頁設計師能夠了解到這點，如果CSS沒意義的話就不會有人不斷推行標準化網頁了，只要使用者使用經驗好，不管怎樣的設計都是好設計，怎樣的技術並不重要。