※ 引述《wa120 (哇120)》之銘言： : 不好意思... 我想問個問題 : 所謂的純css排版是全部都用<div>包住，然後用css改變<div>標籤的位置嗎？ : 那允不允許 : <div><table></table><div> (table是純排版用的) : 這樣的排版方式以及 : <div><table><table></table></table></div> (巢狀table排版) : 我知道一般的css排版是用巢狀<div>像是 : <div> : <div></div> : <div></div> : ... : </div> : 但是我知道他不能解決所有的問題，在文字顯示版面要求嚴謹的時候 : <div>底下還是要用巢狀<table>來做版面調整 : 其實我對css排版還是有些意見，也許是自己功力及認知不夠 : 像是說看到別人position設到absolute我都會幹瞧 : 因為在不同的解析度，以及瀏覽器，非常有機會會跑掉 : 而table雖然會降低易讀性，但是他在設定width以及height使用百分比非常有效率 : 而且css在IE 6/7/8 有些小細節 每個長相都不太一樣 (害我debug超久) : 提出個人淺見，其實我看現在很多網頁都還是在用table排版 : 而table亂中有序的排版方式，其實也沒有那麼難以接受吧... : 其實很多程式語言的GUI介面感覺表達的比table還抽象... : 對此提出一些個人看法... 你這個問題其實已經有一點離題了。 對於網頁設計，第一個要有的概念叫做Layout。 Layout目的是，將一個完整的頁面因為不同的需要切割成不同的版塊。 例如Header、Sidebar、Footer、Content、NavigationBar等等的。 你會希望Layout達到以下的幾個目的： 1.便於調整。 2.跨越瀏覽器。 3.可以各自獨立不至於影響其他block。 W3C中，Table是用來作資料的顯示整理用，而不是用來Layout，Layout經常會出現 多層次的巢狀結構，而<table>標籤非常因為這樣的巢狀結構，使得在調整得時候 造成版面混亂。 另外，跨越瀏覽器也是一個大問題，基本上<div>在不同瀏覽器上面的行為可以用 css來控制，但是<table>標籤在不同瀏覽器上，本身就存在著差異，光是換行的 狀況，在不同瀏覽器就會有不同的樣子。 因為用<table>標籤切版，所以當上層或下層的table屬性改變得時候，經常會影響到 其他的部份。要知道一件事，版面設計的時候，設計師可以用<table>很爽快，但是 交到程式設計師手上，在套入不同data的時候，<table>的layout會是設計師的惡夢。 當設計師用dreamweaver或frontpage的<table>作Layout做得很愉快的時候，卻沒有想 到對Programmer而言，這些<table>的Layout在寫程式時卻是惡夢。 不能只動CSS改變版型，一堆爛爛的<tr><td></td></tr>...甚至是colspan, rowspan， 在做Template時都是惡夢，要知道，設計師交給程式設計師的，只是樣板，也就是說， 程式設計師還是必須要切割成不同的block分別儲存，不管你是用Smarty或是Tiles. 不懂CSS Layout的Designer在我們的眼中，沒有資格稱得上Web Designer。 不瞭解按照標準去定義CSS Styles檔案的Web Designer，只能算是不入流的Web Designer。 這樣的人只是給Programmer造成負擔而已。Programmer不應該浪費這些寶貴的時間幫 不入流的Web Designer擦屁股。 說難聽一點，若我是Programmer，我不想跟這種會降低我的生產力，連Layout都要我 來寫CSS的設計師合作，最近遇到一位外包的設計師，水準相當不錯，CSS檔案看起來 很有國外Wordpress theme的風格，跟這樣的設計師合作，不但彼此都很愉快，工作 也能更快完成。 要解決跨瀏覽器的問題？不難，請愛用CSS Framework如Blueprint，作為一個進階的Web Designer，不能只靠著工具，Blueprint等得CSS Framework已經是對Designer跟Programmer 最友善的Tools。 有心的話去看一下Facebook跟Plurk的頁面，有幾個<table>標籤。 以現代的技術，用<table>來作Browser Layout是「錯」的。在任何的情況下，都是錯的。 當然每個人能力不同，不是每個人都可以搞到像Facebook那麼威，只是錯多錯少而已。 -- 所有我的作品，請到..... ～四十八個德瑞克～http://blog.derekhsu.homeip.net 馬皇本紀：http://blog.derekhsu.homeip.net/2009/08/821 上官先生傳：http://blog.derekhsu.homeip.net/2009/08/825 --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 61.64.191.30 ※ 編輯: derekhsu 來自: 61.64.191.30 (03/29 13:54)