標題: CSS vs Table , 用哪一個好? [打印本頁]

---

作者: alantsuis    時間: 2008-12-23 20:39     標題: CSS vs Table , 用哪一個好?

CSS vs Table , 用哪一個好?

我看很多人都說用 css 代替 table.

但 chrome 出來後好像有些用 css 的網站顯示有問題.

請問 ching  prefer 哪一個?

---

作者: foobar    時間: 2008-12-23 21:07

你咁問得, 即係你仲用緊 Tables, 最多用 CSS 改o下 Font style

CSS 寫得好可以玩到個 HTML 同個樣完全冇關係, 參考 css Zen Garden, 佢地玩到可以同一個 HTML 完全唔改o既情況底下, 淨係改 CSS 黎轉 Design 不過佢地已經去好 Advanced o既 Level...

我自己覺得 Table 好在乜 Browser 都 Support (Text mode browser 例外), D Tools (Dreamweaver/Fireworks) 自己 Gen 得掂, 寫完一次就算o個 D 可以話係方便。但如果你係手寫 Code 就煩, 要改 Layout 更加超煩

CSS 都可以話易學難精, 尤其o係 IE6 仲係咁多人用緊, 要 Cross Browser OK 都要o的技術

其實學多樣o野冇壞, 學識o左之後你自然感覺到邊樣好

---

作者: alantsuis    時間: 2008-12-23 21:17

多謝 ching.

你說我對, 我就是用 table + css 寫 web site 的. 而且是用 visual studio .  用 css 時很煩. 你有沒有什麼 tool 介紹? 而且真的 css 可以全 cross browsers? opera, firefox, chrome, safari, IE ?

我之前也用 dreamweaver, 但一面寫 html, 一面 寫 code 不放便, 所以便只用 visual studio 了.

---

作者: joemok    時間: 2008-12-23 21:19

css is a powerful tool that can achieve many things that table cannot do. Some complicated layout can be achieved easily by css  but not table. So I think it will be better to adapt to css.

Different browser has adopted to different css standards. When chrome display some website in css with problems, it probabily indicate that the css is not writen according to W3C standard, especially the box modle. To make a cross-browser css script, it might be good to stick to w3c standard first and then make conditional comment for IE.

---

作者: foobar    時間: 2008-12-23 21:46



我諗係習慣問題, 我自己用開 Dreamweaver, 但對我黎講佢只係一個  Code Editor, 我除o左 Image Map 之外我從來都唔開 Design View

如果用 WYSIWYG Tools 做 Layout 我真係唔知有乜 Tools 做 CSS 好, 因為 CSS 某程度上太 Flexible, 佢主要 Feature 在 Cascading (CSS 個 C), 可以俾你一層層咁加 / Override D Styles, 如果用 Tools generate 我諗佢整出黎 D Code 都可能會幾累贅

我只可以話, 如果你真係寫 CSS 的話, Debug CSS Tools 我會介紹你裝 Firefox 個  Firebug Extension, IE 個 Developer Toolbar, 或者你要 Webkit-based browser 都 Check 埋, 可以用埋 Safari 個 Develop Menu

---

作者: kjky    時間: 2008-12-23 21:53

table 係 HTML 既 element, CSS 係應用係 HTML 之上
根本 css 同 table 無衝突, 點解咁多人去比較!

都係果句, 用得其所就是王道!

....forum 多數用 table, layout 一定無事
....blog 多數用 css, layout 好易爛到七彩

應該係選擇去用, 而唔係人用你又用!

---

作者: foobar    時間: 2008-12-23 22:06



因為大家用本來只係用黎 present tabular data o既 table 當做一個 grid 黎做 layout 囉
簡單 D 講其實只係 Data 同 Layout 放埋一齊定分開o既比較o者, 兩樣其實都 Work, 都有人用, 用唔用咪睇吓自己 Preference 不過都係o個句, 識多樣o野幾時都冇壞o既

---

作者: alantsuis    時間: 2008-12-23 22:06




我參加了 adobe 的 max  exhibition,  speaker 有用 table 和 css 作出比較, 而且 advices audiences 用 css 取代 table.

---

作者: foobar    時間: 2008-12-23 22:15



係咪 CS4 改進o左 CSS Support, 所以 advice 大家用(買) CS4 取代舊 Version

睇你係乜 Role 啦, 如果你係做 Design 唔係做 Coding 我會覺得 Table 容易好多, 介完 Slices 就自動介好 Table o既世界對你黎講會活得快樂好多

但如果你係做 Coding o既話 CSS 真係另一個世界, 尤其係你要一路 Maintain, 有機會要改 Layout o既 Site, 一 D Table 改 Rows 改 Cells 改到喊o既地方, 仲有 D Universal 成個 Site Applicable 要改o既 Styles, CSS 可以兩o野搞掂, 你都會活得快樂好多架

---

作者: macross7ra    時間: 2008-12-23 23:06

我整site 已經用 div + css 取代 table

[ 本帖最後由 macross7ra 於 2008-12-23 23:06 編輯 ]

---

作者: kjky    時間: 2008-12-23 23:23



咁你一年參與做幾多個 site?

[ 本帖最後由 kjky 於 2008-12-23 23:23 編輯 ]

---

作者: macross7ra    時間: 2008-12-23 23:33


咁我又唔係成日整...
只係大勢都係咁...
你去facebook 睇下，全部div...
改一改個css 就變到風格，不知幾正豆

[ 本帖最後由 macross7ra 於 2008-12-23 23:35 編輯 ]

---

作者: kjky    時間: 2008-12-23 23:40



原來又係業餘份子, 講多晒氣!

---

作者: macross7ra    時間: 2008-12-23 23:43


哇，洗唔洗咁惡呀  

---

作者: debug    時間: 2008-12-24 00:26

我會建議用80%地方係用CSS去做
EXCEPT 有Ｄ地方要做左邊一個LOGO 右邊一堆BUTTON先用TABLE
CSS 難的地方是兼容的問題
IE 6 有D BUG要記
IE 7又另一D BUG要記
我用FF3做左自己想做的樣先
再逐個BROWSER試埋有無BUG, 有BUG先個別HACK佢
用TABLE要記住避免NESTED TABLE (即TABLE入便有TABLE)
因為咁可能會死得不明不白
攪你幾個鐘
CSS好的地方是可以REUSE STYLE
TABLE 改十個PAGE改死你

---

作者: foobar    時間: 2008-12-24 00:46

其實我覺得越大o既 Site 越會 Prefer 用 css 而唔用 table 做 layout, 因為 table 冇錯第一吓係起得快過 css (尤其用 tools 界幅圖, design 人最愛 )。 但到你個 site 有番咁上下 dynamic 而做 interface / layout 同做 program 係唔同人做o既時候, 雖然大家依家就算唔 full blown MVC 至少都會用 template 做 html, 但用 css 要執 layout 連 template 都唔駛掂係真係方便好多 而且用返 css defined o既 styles 亦會令個 site consistence 好多

當然如果係 one man band o既話就梗係自己鐘意用乜就乜啦, 返正之後就算逐版改都係自己食

---

作者: foobar    時間: 2008-12-24 00:57



其實 css 如果用 strict DTD, 又先 reset 晒 styles 我又覺得 cross browser 唔係太難, 係 IE6 o個 D Float double margin 呀, 冇 min-height o個 D o野麻煩少少, 不過都仲有 D 簡單 tricks 解決到, 唯一一樣最不解o既係 css 無 vertical centering 支援 (vertical-align 只o係 table cell 有用), 出面用得o既方法仲複雜過我開個 table tr td tag 有冇版友可以分享吓?

---

作者: thinkpanda    時間: 2008-12-24 01:10



通常愈application oriented 既web site, CSS 用得愈徹底,
visual 至上既web site, 好多時用到table 就用table, 唔得就跳去用flash. Who care about standards...

---

作者: thinkpanda    時間: 2008-12-24 01:11



margin : auto 可唔可以應用係vertical alignment?

---

作者: foobar    時間: 2008-12-24 01:16



margin: auto 只做 horizontal center    如果咁易出面 D 友仔就唔駛玩到要 pad 多個 div, 做個勁長 height, 再做 negative margin-top...

---

作者: bibilubi    時間: 2008-12-24 01:24

有冇網站可以學下CSS
最好就中文啦(英文都唔緊要~

---

作者: debug    時間: 2008-12-24 01:49     標題: 回覆 17# 的帖子

IE 有得係CSS 行REGULAR EXPRESSION E樣野真係ORZ

---

作者: thinkpanda    時間: 2008-12-24 01:54



呢樣野好大問題,  IE8 都打算phase out 佢....

---

作者: debug    時間: 2008-12-24 10:50

同意!
有min 有max
就無必要regular expression啦

---

作者: foobar    時間: 2008-12-24 10:55



講到 Flash, 其實同做 HTML 一樣, 唔同人都會用唔同做法... 有 Programming 底o個 D 整o既 Flash 好乾淨, 得幾個 frame, 有 label, 入面用得 Actionscript code  o既地方用 code 做。相對黎講純 Design 人做o既 Flash 會完完全全地利用條 timeline 做 logic flow, 做有 multiple cases o既 transition 佢地真係會做晒咁多個 cases 出黎 , 要改時佢地自己都改到嗌救命

其實講到尾無論係 HTML 定係 Flash 都係一樣, 睇你識唔識將你手上要做o既o野 Factor o左佢變成一堆 Common Styles (CSS) / 獨立 Movieclips (Flash) o者

---

作者: ty040422    時間: 2008-12-24 11:15     標題: 新手...

睇完幾位講既野 真係學到好多

不過css初學...真係set到好煩下
同埋成日set id name set得吾好
set完又吾記得左邊個打邊個

同埋用dreamweaver入面個css 做 有時d名差不多
成日都搞亂左 邊個打邊個

---

作者: wilsont    時間: 2008-12-24 11:43

有無邊度有ｄ　入門教學教用ｄｉｖ　黎砌ｔａｂｌｅ？

---

作者: 有你便有我    時間: 2008-12-24 12:34

table唔應該要黎做layout, 應該只係用黎放structural data

---

作者: macross7ra    時間: 2008-12-24 13:43


可以用 ul + li + css 取代

[ 本帖最後由 macross7ra 於 2008-12-24 13:43 編輯 ]

---

作者: 有你便有我    時間: 2008-12-24 14:39



有乜必要??structural data用table(scope,summary,caption,th,tbody,tfoot,thead)係可以增加accessibility.......

---

作者: foobar    時間: 2008-12-24 15:00



Table 本身係冇罪架   我諗重點在於盡量將 layout 從 HTML 獨立開黎, 用一個 site wide o既 common CSS file 裝起佢, 咁樣已經係 promote 緊 style reuse 令個 site 更加 consistence, 亦已經令個 HTML 乾淨好多啦   如果有 data 需要用 tabular form present 出黎, table 仍然係最佳選擇

---

作者: ～虎～    時間: 2008-12-24 15:10

整layout用CSS好過table好多 最少大部分用CSS
全部用table 到時要用nested table同colspan等野就唔知邊個爛到七彩
forum個topic list用table好應該架喎...table做番佢應做既野

同埋整dynamic既site幾乎一定用CSS
做得呢D 同時搞埋兼容性應該唔係太難
IE5.5呢D連height width都計錯既就算鬼數

---

作者: 景太郎    時間: 2008-12-24 15:25


我覺得table 系要來structure data唔系要來structure 個layout
呢d 系usability 的問題

[ 本帖最後由 景太郎 於 2008-12-24 15:25 編輯 ]

---

作者: 一小無謂一    時間: 2008-12-24 16:06

CSS支援唔好既瀏覽器根本唔需要理
我個網而家用IE上只會彈去MOZILLA果度叫D人DL FIREFOX

無需要為D垃圾而搞個TABLE佈局

[ 本帖最後由 一小無謂一 於 2008-12-24 16:08 編輯 ]

---

作者: foobar    時間: 2008-12-24 16:19



自己 Website 就係囉。 鬼唔知 IE6 廢咩, 但係有時俾客 D Site, 尤其o個 D 所謂大公司客, 連 IE7 都唔肯 Upgrade, 佢地睇到乜就係乜架嘛, 焗你照顧 IE6

不過就算 IE6 都唔係一定要用 Table o既, 係 CSS 方面要做 D Hacks/workarounds 咁o者...

[ 本帖最後由 foobar 於 2008-12-24 16:20 編輯 ]

---

作者: ～虎～    時間: 2008-12-24 20:10


我都想咁做 但都要面對現實...IE6仍有大部分市佔率
落fix搵hack都要顧掂佢
真係唔得既skip左某D野算

最近搞自已個網決定咁做

[ 本帖最後由 ～虎～ 於 2008-12-24 20:11 編輯 ]

---

作者: 一小無謂一    時間: 2008-12-24 20:39     標題: 回覆 36# 的帖子

你果個都唔錯

但我就一定唔會為左IE改野

---

作者: 一小無謂一    時間: 2008-12-24 20:40


公司當另一回事啦

---

作者: debug    時間: 2008-12-24 21:47     標題: 回覆 35# 的帖子

同意其實很多客不願由IE6 上IE 7的
我覺得係CSS度IE6, 7都係差唔多
只是SELECT BOX的ZINDEX問題即，要用JS 去幫手
最煩就係E樣野。。。要CSS+JS去FIX CSS的BUG

[ 本帖最後由 debug 於 2008-12-24 21:47 編輯 ]

---

作者: debug    時間: 2008-12-24 21:54     標題: 回覆 26# 的帖子

建議新學CSS唔好用DREAMWEAVER 幫你整STYLE
應該IMPORT一個CSS FILE來改
一開始SET左BODY 的PADDING 和MARGIN為０先
咁就可以係入便玩了

---

作者: PentiumD805    時間: 2008-12-25 00:28

css麻煩在ie,乜鬼都唔支援\

---

作者: Wai    時間: 2008-12-25 01:16

咁你等如冇講過野啦..如果要商用...完全冇理由唔整到support ie6

你要明白，世界冇可能一步登天，所有野都係慢慢進化上去，以前進化要幾萬年，而家一兩年就ok，已經好比面架啦...
唔係你話一句話廢物就可以唔理佢，如果唔係邊個人比你當係廢物就死得了

其實都有d 公司開始plan升級做ie7
幾十人公司升級ie7當然易，如果係一d大公司..全世界都有office 又幾百幾千人，成個it 做法已經完全唔同，已經唔可以下下太生，想點就點....所以做得it 係有責任照顧其他人

[ 本帖最後由 Wai 於 2008-12-25 01:20 編輯 ]

---

作者: foobar    時間: 2008-12-25 03:05



我會建議除o左將 padding 同 margin set 做 0 之外, 可以學呢個 Site (Reset Reloaded) 個方法, 將所有 styles reset 晒先, 然後先再 redefine 過你想每個 tag 用乜o野 styles 顯示出黎。 因為冇o左唔同 browser 有唔同 default style 呢個問題, 所以咁樣o係 cross browser 上要做到同一個樣會容易 D

---

作者: debug    時間: 2008-12-25 03:22     標題: 回覆 43# 的帖子

Thx share

---

作者: ～虎～    時間: 2008-12-25 22:59

IE6問題一羅羅...呢3個最煩 要加JS先work
PNG alpha channel (IE7仲有少少bug)
position: fixed
:hover

---

作者: ccl4    時間: 2008-12-26 02:12



比個外國 1and1 既 account 平均數據你睇
五個客，你趕四個走
唔到你唔理 ie

[ 本帖最後由 ccl4 於 2008-12-26 02:17 編輯 ]

---

作者: 一小無謂一    時間: 2008-12-26 03:00


Google Bot 仲多過 Mozilla:funk:

---

作者: ～虎～    時間: 2008-12-26 19:15

My site's stats...
今日一睇 IE7多過IE6

---

作者: foobar    時間: 2008-12-27 00:31



Google Bot 仲多過 Mozilla 正常, 你 google site:hkepc.com 你就見到個 google 一 index 個 site 乜都摷晒出黎, page view 梗係多

---

作者: PentiumD805    時間: 2008-12-27 00:34

唔design畀IE都唔得啦
我個網都算多人用Fx
至少我用緊

---

作者: pak0811    時間: 2008-12-27 00:41

我公司過去一年所有 website 都用 xhtml strict + css 做
成班 design 同 programmer 都操得好好了
float double-margin, hasLayout 呢兩個常見 bugs 已經煩擾唔到我地 :)