※ 引述《santin (被雷劈)》之銘言： : 既然要用CSS了，就別用表格排版，用DIV取代會比較好做事 您說 用DIV取代會比較"好做事" 我不清楚您的意思是什麼 如果您是指tableless排版比較簡單的話 我倒不這麼認為 畢竟以目前來說CSS layout存在著太多瀏覽器間的差異和bugs (主要是box model和float modle, 絕大部分是來自IE/Win) 這些對於設計師來說帶來太多頭痛的問題 (要不然也不會有這麼多CSS Hacks) 您有沒有看過很多用Firefox看ok, 用IE看layout就亂掉的網頁? 目前CSS layout要做到盡善盡美比用table難多了 (當然, 簡單的layout 就不在我說得範圍內) 然而沒錯! 本來就不應該靠table來做視覺上的呈現, HTML/XHTML是"結構"化 的markup, 文件的展示就是靠CSS來定義, table-based的layout是將大部分的'視覺' 呈現又塞回HTML/XHTML本身, 違反了語意結構, 破壞了對於GUI瀏覽器外其他UA的親和性, 失去了視覺呈現調整彈性等等... 然而, 但單就親和力來說, 您建議原po捨棄表格排版, 我覺得並不那麼必要(或不一定要這麼做): 1. 原po並未指出他的target UA是什麼, 他也沒說他的網頁要適用於所有的UA, 如果他的設定就是限於一般電腦上CSS-enabled的GUI瀏覽器, 用表格排版也沒什麼不好. 2. 就算是考慮到其他的UA, 只要他的表格排版結構不是太複雜(比如用了多層的nested tables), 對於親和性的影響其實也沒我們想像的那麼嚴重. 別於我們熟知的瀏覽器外, mobile browsers, text browsers, screen readers ..., 對於table-based layout的網頁 或多或少都有一些輔助方便瀏覽的處理機制(畢竟, 現今大部分的網頁都還是用table 做排版, 不是?) 表格就是用來區隔資料的一種格式, 對於這些UA來說倒是可以充分利 用的一種"結構"(雖然語意不那麼正確) 3. 原po可能也沒時間重新設計網頁 先撇開結構的正確性不談, table也不是那麼evil(當然,這是指做排版而言, 屬於表列資料的就用table去做markup), 特定的狀況下表格排版也是不錯的選擇 : 表格就讓她回歸表格的功能...放資料 所以, 您建議原po放棄用表格排版應該是基於文件語意結構的正確性吧 可是您卻說: 用"DIV取代"會比較好做事 這也沒符合您的原意啊 div(和span)本身不帶有任何結構上的意義(semanticless), 它是用來grouping 一些markup, 主要是搭配CSS使用. 您提供的markup: <div id=iBtn_top>研究生專區</div> <div id=iBtn> <div class=iBtn> <a href="http://www.ee.ntu.edu.tw/eeoffice/index_stu.php?cat=news_stu"> 最新消息 </a></div> <div class=iBtn> <a href="http://www.ee.ntu.edu.tw/eeoffice/index_stu.php?cat=news_stu"> 最新消息 </a></div> <div class=iBtn> <a href="http://www.ee.ntu.edu.tw/eeoffice/index_stu.php?cat=news_stu"> 最新消息 </a></div> <div class=iBtn> <a href="http://www.ee.ntu.edu.tw/eeoffice/index_stu.php?cat=news_stu"> 最新消息 </a></div> <div class=iBtn> . . . 完全無結構可言, 對於任何一個UA來說, 語意上只是一團文字和連結, 或許您套用了CSS 在視覺上達成了可辨識性, 這樣的話原po用table又有何不可, 至少table還帶有結構上的意義, 親和力上絕對優於無結構的markup 這幾年來Web強調的結構(HTML/XHTML)與展示(CSS)的分離, 原因之一不就是為了加強文件的結構性, 您不用有meaning的markup那倒還不如回到用表格做排版的模式 (要不然, HTML/XHTML的body只要有div, span,a和object, 其他的tag我們都可以不要了, 反正用CSS在呈現上搞定就可以了) 所以, 原po的markup改成如下會不會比較有意義呢? <h2 class="nav-head">研究生專區</h2> <ul class="nav-menu"> <li class="nav-entry"><a href="index_stu.php?cat=news_stu">最新消息</a></li> <li class="nav-entry"><a href="index_stu.php?cat=studying">學業專區</a></li> <li class="nav-entry"><a href="index_stu.php?cat=grant">助學金專區</a></li> . . . </ul> --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 220.131.19.3