Re: [閒聊] 看大家都在推廣css，但....

[rabbithenry (歡迎光臨Wiiholic.com)]

首先要先以一般人的想法，當然，顯示出的效果一樣，CSS還會因為瀏覽器支援度而有顯
示上得差異，表格輕鬆簡單就可達到一樣的效果，何樂而不為呢？

這個最簡單的看法，請打開兩種不同寫法的HTML原始碼然後找出假設你要改的地方，並且
修改版面成另一個模樣看看，我相信你對CSS會開始產生改觀。

從設計上來說，表格是死的，CSS+DOM是活的，寫好的表格很難再改變版型，光是要增加
一個欄位就必須在每一個<tr>中都加上一個<td>，其中有些還需要合併，一個弄不好就會
讓整個版面完全毀掉，而CSS只需要加一個Div然後寫好position就好。

網站不會是永遠長一樣的，有一天你想要更換樣板時，表格式設計勢必必須為了新的版面
而全部重新規劃表格（你不會想要增減表格欄位的，累死人），但是CSS+DOM的網頁大多
數時間只需要換一個CSS就好。

試試看找一個跑的非常慢表格式設計的網頁，還有一個關掉CSS的CSS+DOM網頁，你可以看
看哪一個你可以看得懂！

現在網頁講究跨平台，電腦、手機、PDA都能夠上網，解析度從寬度160~1920像素都有，
用表格設計就無法針對不同解析度提供不同的效果，想想一個寬度980的表格版面在現在
多數的電腦上都能夠正常顯示，但是在EeePC、手機與PDA這種低解析度的裝置上呢？保證
拖曳捲軸就能讓使用者立即關閉網頁。

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

我們也不能自私，照顧弱勢是現在的趨勢，盲人也有盲人專用電腦瀏覽器，CSS+DOM的網
頁可以將最重要的內容優先顯示，讓盲人能立即得到想要的資訊。

從功能性上來說，現在流行利用Ajax的方式來不同步更新網頁內容，JavaScript主要的
設計就是針對DOM而來設計，如果使用表格式設計，在動態更新內容的時候，一個不小心
增加或刪除到主要表格的HTML，整個網頁就會混亂掉，這點Div做的輕鬆多了！

現在許多部落格也有自訂區塊的功能，如果使用表格設計，上下順序要對調時就會相當辛
苦，使用CSS則相對輕鬆許多。

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

現今網站還有一個重要考量，就是SEO，讓搜尋機器人能夠輕易辨識網頁內容增加重要性
，表格式設計是他們的惡夢，因為很難辨別主要內容，且在見到內容前必須先看到一堆
對他們而言沒有任何意義的<table><tr><td>...... 通常這種網站分數都很難比CSS設計
的來的高。

還有原po有說到的頻寬與速度問題，使用寬頻看網頁不大容易注意，但是用手機GPRS或訊
號微弱的3G上去試試看，表格式設計一定要等到整個網頁都讀取完畢才能看懂，但是CSS
設計的卻可以先看到沒有樣板的內容，等到CSS下載完畢才會換成一般的外觀，對於想更
快看到內容的使用者而言，這樣體貼多了！

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

以上是我的經驗與看法，請多多指教

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.167.168.22
※ 編輯: rabbithenry     來自: 118.167.168.22       (05/04 01:13)
推 ateclean:推
推 etrexetrex:推
推 adamp3:不推不行
推 secobarbital:推
推 austin119:推。     朝著無障礙驗證前進中  / \  / \  / \
推 pm2001:我不太懂為什麼大家都把table定位在排版用?
→ rabbithenry:因為以前沒有CSS！
推 takumi412:推, 因為沒有CSS的時代, table排版是唯一解
推 miau:推
→ TonyQ:非常慢表格式設計的網頁，還有一個關掉CSS的CSS+DOM網頁
→ TonyQ:這兩個應該就畫面應是前者比較容易「看得懂」吧o_o
→ TonyQ:如果是說html code ，關掉css就有所矛盾了，不太懂這句話。
推 pm2001:問題是table當初設計出來又不是給你排版用的
→ pm2001:大家愛亂用變成是table的原罪?
→ rabbithenry:意思是說，關掉CSS的網頁會變成純文字排版，表格未讀
→ rabbithenry:完會先從左上角開始一格格顯示
推 andrew43:幾乎把所有教科書的說詞都包括了！非常好文。
→ aceone:以前就有CSS了啦 ^^" 只是舊瀏覽器比較不支援
推 ikari512:推薦