Re: [問題] 不使用table的原因..?

[nightmarelee (星空☆看見)]

※ 引述《kairosa (暗夜)》之銘言：
: ※ 引述《clifflu ( [ 超 宅 ])》之銘言：
: : 我個人的解讀偏重在 "語意" 上
: : 以目前 html/xhtml/CSS 的趨勢，是加強標簽 (tag) 與語意間的關聯性，
: : 表現 (presentation) 則靠 CSS 處理。
: : 也因此，有許多 "平常很少用" 的 tag，在早期 html 甚至不含特殊顯示方式的
: : tag 如 acronym (希望沒記錯), code, quote 等，現在被大量推廣
: : 而以往作為改變表示方式的標簽如 <i> <b> <u> 則被建議避免使用。
: : 取代的方式是以 div, span (視 block 狀態) 或 font 標簽取代。
: : frame 在許多情況下，能以 js 及 DOM 的 innerHTML 加以取代
: : iframe 感覺上比較接近是 applet 的運作 :p (個人認為啦 XD 或是 cross-window)
: : 從這樣的邏輯來看，不當的使用 table (別忘了它還有 thead, tbody, th 等
: : 的子標簽) 來做版面編排，確實是有些怪異。
: : 另外，近代 CSS (也許是 2.0+ ) 也對 media type 多加著墨，
: : 希望使同樣的內容，能夠透過不同的表現方式 (css) 直接在各種媒體上以
: : 適當的方式呈現 (ie. 手機，PDA，電腦螢幕，朗誦程式，印表機 等等等)
: : 而非像目前主流的做個 "Printer friendly page" 的 link 給你點 ^^;
: : 錯誤的使用標簽，會使得跨媒體頁面變得相當詭異。
: : ---
: : 不止是為了 AA 而已
: : AA 只不過是跨媒體中的一個部份 ^^;;
:         現在講求不是用table而是用div
:         是有點物件導向式的設計網頁
:         這對網頁程式設計師來說
:         可以很輕易的針對某區塊某物件來設計程式
:         而不會因為可能要加一個區塊而網頁需要大修改
:         如果玩過photoshop就知道圖層吧...
:         div就相當於圖層可以一層層疊上去
:         這東西大家自己去摸看看吧...
:         只要熟了~妳就會發現它能發揮的創意不是table可以做到的...
:         最後一個用div來設計網頁的好處...
:         div可以用css控制也可以用javascript去控制...
:         所以...div所開發出來的網頁...
:         不需要改太多指令就可以不斷的創新風格...
:         大家可以去新浪blog看看...
:         新浪的創意總監規劃的，有很多不錯的技術大家可以去參考看看...

分享一下經驗吧....我是以程式設計的角度來看使用 <div> 的問題..

不使用表格改用 <div> 可以讓程式與美工的角色明確的分工...

以往的經驗可能是由美工將版面配置設計好給 Programer

通常 Programer 要在將美工的版面調整或是拆解 , 等於 Programer 還要在把

版面看過一便在修改程式

改採 <div> Programer 不需要管版面長什麼樣...只需要知道這個頁面

要有那些元素 , 在 Template 中先將每個區塊用 <div> 包好

ex:

  <div id="toolbar">
　　<div id="btn_1" class="btn">選單1</div><div id="btn_2" class="btn2">選單2</div>
　</div>
  <div id="data">
   {Data.Content}
  </div>

以上是一個 ToolBar 的區塊和　一個資料顯示區 當一個 Template 規劃好之後
美工僅需去調整 css 就可以把畫面呈現出來 , 不需要 Programer 這邊在花很多
時間去做微調 , 另外要更換版面和移動位置的速度只須換一個 css 檔引入即可.

此外更重要的就是彈性 , 呈接上面那個範例....

如果以 <table> 來排版

ex:

  <table>
   <tr>
    <td>
      <table>
        <tr>
          <td>選單1</td>
          <td>選單2</td>
        </tr>
      </table>
    </td>
   <tr>
   <tr>
    <td>
      <table>
       <tr>
         <td>Data</td>
       </tr>
      </table>
    </td>
   </tr>
  </table>


所要用的<tag> 多是一個缺點 , 另外如果我要將選單的部份移到下方 ,　要花
很多的時間去修改原本 <table> 的結構 , 以上在以 <div> 排板的情況下 ,
只需改動 css , 兩者所花的時間大家可以比較看看 .


在目前 WEB 2.0 的潮流下 , 為了給使用者更好的操作體驗 ,
保留更大的彈性給使用者 , 加快開發改板的流程 , 這也是為什麼 <table>
的排版法越來越被淘汰的原因....


在加上網路上有很多開發套件 , 有興趣的人可以去看看 yahoo user interface

這套 freamwork 看看使用 <div> 排版 , 在加上現成 css 套件的威力在那 .

http://developer.yahoo.com/yui/grids/

真的要比較兩者其實還很多很多 , 但我想還是要自己去體會才能知道 :)


我從記事本時代就開始寫網頁 , 所以用 <table>　排版的時代我都用
手在 key html 碼 , 所以兩種方式產生的 template , 用 <table> 明顯的會產生
很多的垃圾 code .... /   \



--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 60.248.155.94
※ 編輯: nightmarelee    來自: 60.248.155.94        (12/31 16:41)
推 liveinlow:推薦這篇文章 :)
推 hows:觀點很棒 推