※ 引述《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