Re: [閒聊] 環境令人無力orz

[derekhsu (華麗的天下無雙)]

※ 引述《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)
推 superpai:推
推 lovepc:分析的不錯  推一個~
→ ppaass:ㄟ...一點小意見，個人覺得要用 <div> 還是要用 <table> 應
→ ppaass:該要看網頁設計的目標是要「適應」甚麼程度的螢幕解析度差
→ ppaass:異啦，有些版型還真的得用 <table> 才能達到需求的。 :p
→ ppaass:比起 div/table，我比較怕的是濫用陰影和羽化的設計師 Orz
推 superpai:什麼需求這麼困難？提出來給我解解看當娛樂
→ ppaass:比如說版型要可以隨畫面伸展，但是左右或上下又要留固定距
→ ppaass:離，或是裡面某些欄位依定要保留相當寬度，所以我不但用了
→ ppaass:table 還塞了好幾張透明的 gif 來撐住格子。 :p
→ netburst:等等看css3....
推 xmimicx:有遇過p大的情況需要適量的TABLE來稱畫面
→ xmimicx:http://xmimicx.myftp.org:8080/LearningMap/ 遇到的情況
推 superpai:聽起來px和%交互運用就好了 晚點寫一下
推 JYHuang:上面xmimicx說的撐畫面..我就在寫後台遇到過...
→ JYHuang:不過IE6下的table width=100%..他是照螢幕，而不是父元件
→ JYHuang:最後..我叫提示不要用IE6 XD
→ xmimicx:DIV和TABLE二種我都試過 似乎TABLE比較方便快速
→ xmimicx:table width應該可以用inherit
→ ppaass:還有一種情況是客戶會指定說文字到達邊緣以後是要換行還是
→ ppaass:要把格子撐開。 Orz
→ xmimicx:那就要用word-break了
→ xmimicx:但FX沒用
推 superpai:http://demo.stylecoder.tw/notable/  簡單左右固定
→ xmimicx:s大重點好像不是左右固定 重點在於三欄高度要一致@@
推 luciferii:我一直在懷疑，只用table但沒法改用CSS的"模組"，是不是
→ luciferii:都用 Word 在寫網頁? XD
推 superpai:我加上三欄等高了 等內容最多的那個
推 xmimicx:那如果下面又有一個DIV clear:both 不就定位到1000px去了?
推 superpai:問題是你為什麼需要clear:both
→ superpai:我下面加了 footer有clear:both在最下面
推 xmimicx:就是我可能要一個footer
→ superpai:加囉
推 xmimicx:高手 但好像還要HACK IE
推 superpai:現在沒IE 不過這基本上不是問題就是
→ xmimicx:問題是這種padding:1000的方法真的比TABLE來的好?
推 superpai:我也很少用到padding1000 因為用背景圖案有到效果就夠了
→ netburst:超過padding還是會炸掉 設個十億好了
→ TsaiCF:http://tinyurl.com/yamgk5t  如果有使用<div> 而且美觀 且
→ TsaiCF:且符合萬惡的 2A 標準的話，可以提供參考嗎!? ><
推 petertc:http://www.ndhu.edu.tw/ 給樓上，過AAA
→ petertc:好不好看就不一定了xd
推 TsaiCF:<div style="width:340px;clear:both;"> 它讓你過!??
→ TsaiCF:沒有被 規範三 3.5：H203004 駁回嗎!?  :(
→ TsaiCF:可能我們在不同的時間點碰上不同的審查人員吧.. (嘆)
推 petertc:這樣應該合法吧，T大也是這樣用
→ petertc:<div class="spotlighttext" align=left style="width:358
→ petertc:http://www.ntu.edu.tw
→ petertc:可能是table之類的不行
推 superpai:我猜 CSS設定的程式掃不到 審查人員也很難去看到
→ derekhsu:無障礙這東西真是.....神經病
→ yauhh:你說得很奇怪,一下子table造成設計師的惡夢,一下子table造成
→ yauhh:programmer的惡夢... 而且programmer會寫點CSS控制就代表
→ yauhh:很會設計了,很會排版了? 真怪
→ yauhh:真厲害的programmer是會寫簡便的排版控制框架給設計師使用,
→ yauhh:而不是明明不懂設計卻抱怨設計師不懂程式效率.
→ TonyQ:根據我做網站的經驗，table對programmer的負擔在於對source
→ TonyQ:的複雜化，設計是在畫面的設計，不過程式因為需要瞭解資料的
→ TonyQ:位置跟一些條列資料的部份需要找出來套迴圈。就算有全職設計
→ TonyQ:pg不可避免還是會需要對頁面結構做一些操作。
→ derekhsu:y連我的文章都看不懂，沒什麼好討論的...
→ derekhsu:table的版形很容易因為實際Data套進去以後，就亂掉了
→ derekhsu:巢狀Table會讓Dom複雜化，降低調整的彈性與DOM效能
推 wa120:不禁想讓我修改一下現有的東西Orz
推 sorianotw:p大  你說的那些問題css都有辦法解決