從Table向Css過渡的優(yōu)缺點(diǎn)比較
更新時(shí)間:2007年02月09日 00:00:00 作者:
CSS布局提倡者的聲音正被"表格布局的優(yōu)點(diǎn)"的聲音所覆蓋。一個(gè)荒誕的說法是CSS是難學(xué)的。事實(shí)上,CSS一點(diǎn)也不比其他網(wǎng)頁技術(shù)難。問題在于:對(duì)于表格設(shè)計(jì)已經(jīng)相當(dāng)有經(jīng)驗(yàn)的web設(shè)計(jì)師不得不完全放棄他們的思維模式改用CSS方法。
我曾經(jīng)用表格布局設(shè)計(jì)過許多年,當(dāng)我第一次開始使用CSS布局時(shí),我也遇到了問題。"用表格多簡(jiǎn)單呀"我想。但是,那只是因?yàn)槲乙呀?jīng)用慣了表格,我知道如何巧妙的處理它們。任何改變,哪怕是小小的一點(diǎn),都會(huì)讓我覺得麻煩,更不用說這么激烈的變化。
回憶起我第一次學(xué)習(xí)用表格布局,同樣有一大堆的問題困繞著我。回頭想想那些rowspans, colspans以及空白的GIF圖片,公平的說這兩種布局方法,用表格布局更加難些。
另一個(gè)陳舊的觀點(diǎn)是:CSS設(shè)計(jì)的頁面(字節(jié)數(shù))非常大,比表格設(shè)計(jì)的頁面大。理由是:因?yàn)槟銓⒄麄€(gè)站點(diǎn)所有的樣式都放在一個(gè)文件里,當(dāng)用戶訪問一個(gè)頁面,包含整個(gè)站點(diǎn)樣式的樣式表都需要下載,因此頁面非常大。
那么為什么你要將所有樣式都放在一個(gè)CSS文件里?沒有人限制你只能用一個(gè)CSS文件,你完全可以為某部分章節(jié)的細(xì)節(jié)樣式設(shè)立單獨(dú)的子樣式表文件。在我的經(jīng)驗(yàn)里,從簡(jiǎn)單的手冊(cè)型站點(diǎn)到大型的數(shù)據(jù)庫驅(qū)動(dòng),多功能的系統(tǒng)網(wǎng)站,我從來沒有只用過單獨(dú)一個(gè)樣式表文件,沒有一個(gè)首頁的代碼比用表格設(shè)計(jì)的多。那些table,tr,td標(biāo)簽占據(jù)了大量空間,立刻行動(dòng)起來吧,用CSS布局方法將你的文件尺寸猛砍下來。
當(dāng)你用表格布局時(shí),你失去了標(biāo)簽本身的語意。web標(biāo)準(zhǔn)方法布局分離了內(nèi)容和表現(xiàn)層將帶來巨大的好處。當(dāng)你用表格鎖定了你的設(shè)計(jì),一旦你需要改變它,你必須找到這個(gè)頁面,然后再分析出表格結(jié)構(gòu),再一頁一頁修改,而CSS文件可以簡(jiǎn)單的改變整個(gè)站點(diǎn)的設(shè)計(jì)。用CSS你根本無須考慮設(shè)備無關(guān)性,無須考慮用戶選擇他們自己的樣式。
還聽說一個(gè)表格的"好處":設(shè)計(jì)forms。但是forms可以用任何方法實(shí)現(xiàn)表格排列。是為了Netscape4? 我從來沒聽說過支持這么老的瀏覽器是一個(gè)理由。大部分主流瀏覽器的用戶利益遠(yuǎn)遠(yuǎn)大于少數(shù)的用不支持樣式表的瀏覽器的用戶的利益(先不說CSS也支持純文本)。
那些"超級(jí)表格"支持者的觀點(diǎn)歸結(jié)起來就是一點(diǎn):"表格更容易。"這是胡說!如果你滿足于一個(gè)低效率的方法,那隨你的便。如果你想突破限制,使頁面內(nèi)容更加通用、易用,代碼更加少,那就努力轉(zhuǎn)變吧。當(dāng)然如果你是新學(xué)網(wǎng)頁設(shè)計(jì),從頭開始,你就不會(huì)有這些問題。
"小車不倒只管推","這只是設(shè)計(jì)師工具箱里的工具而已。"這是一些討論者的觀點(diǎn)。表格布局象一把老式的木頭柄螺絲起子,你可以仍舊使用它來鉆進(jìn)一面墻。而我寧愿使用電動(dòng)的螺絲起子,CSS布局更加高效,不會(huì)讓我的手再起水泡。
我曾經(jīng)用表格布局設(shè)計(jì)過許多年,當(dāng)我第一次開始使用CSS布局時(shí),我也遇到了問題。"用表格多簡(jiǎn)單呀"我想。但是,那只是因?yàn)槲乙呀?jīng)用慣了表格,我知道如何巧妙的處理它們。任何改變,哪怕是小小的一點(diǎn),都會(huì)讓我覺得麻煩,更不用說這么激烈的變化。
回憶起我第一次學(xué)習(xí)用表格布局,同樣有一大堆的問題困繞著我。回頭想想那些rowspans, colspans以及空白的GIF圖片,公平的說這兩種布局方法,用表格布局更加難些。
另一個(gè)陳舊的觀點(diǎn)是:CSS設(shè)計(jì)的頁面(字節(jié)數(shù))非常大,比表格設(shè)計(jì)的頁面大。理由是:因?yàn)槟銓⒄麄€(gè)站點(diǎn)所有的樣式都放在一個(gè)文件里,當(dāng)用戶訪問一個(gè)頁面,包含整個(gè)站點(diǎn)樣式的樣式表都需要下載,因此頁面非常大。
那么為什么你要將所有樣式都放在一個(gè)CSS文件里?沒有人限制你只能用一個(gè)CSS文件,你完全可以為某部分章節(jié)的細(xì)節(jié)樣式設(shè)立單獨(dú)的子樣式表文件。在我的經(jīng)驗(yàn)里,從簡(jiǎn)單的手冊(cè)型站點(diǎn)到大型的數(shù)據(jù)庫驅(qū)動(dòng),多功能的系統(tǒng)網(wǎng)站,我從來沒有只用過單獨(dú)一個(gè)樣式表文件,沒有一個(gè)首頁的代碼比用表格設(shè)計(jì)的多。那些table,tr,td標(biāo)簽占據(jù)了大量空間,立刻行動(dòng)起來吧,用CSS布局方法將你的文件尺寸猛砍下來。
當(dāng)你用表格布局時(shí),你失去了標(biāo)簽本身的語意。web標(biāo)準(zhǔn)方法布局分離了內(nèi)容和表現(xiàn)層將帶來巨大的好處。當(dāng)你用表格鎖定了你的設(shè)計(jì),一旦你需要改變它,你必須找到這個(gè)頁面,然后再分析出表格結(jié)構(gòu),再一頁一頁修改,而CSS文件可以簡(jiǎn)單的改變整個(gè)站點(diǎn)的設(shè)計(jì)。用CSS你根本無須考慮設(shè)備無關(guān)性,無須考慮用戶選擇他們自己的樣式。
還聽說一個(gè)表格的"好處":設(shè)計(jì)forms。但是forms可以用任何方法實(shí)現(xiàn)表格排列。是為了Netscape4? 我從來沒聽說過支持這么老的瀏覽器是一個(gè)理由。大部分主流瀏覽器的用戶利益遠(yuǎn)遠(yuǎn)大于少數(shù)的用不支持樣式表的瀏覽器的用戶的利益(先不說CSS也支持純文本)。
那些"超級(jí)表格"支持者的觀點(diǎn)歸結(jié)起來就是一點(diǎn):"表格更容易。"這是胡說!如果你滿足于一個(gè)低效率的方法,那隨你的便。如果你想突破限制,使頁面內(nèi)容更加通用、易用,代碼更加少,那就努力轉(zhuǎn)變吧。當(dāng)然如果你是新學(xué)網(wǎng)頁設(shè)計(jì),從頭開始,你就不會(huì)有這些問題。
"小車不倒只管推","這只是設(shè)計(jì)師工具箱里的工具而已。"這是一些討論者的觀點(diǎn)。表格布局象一把老式的木頭柄螺絲起子,你可以仍舊使用它來鉆進(jìn)一面墻。而我寧愿使用電動(dòng)的螺絲起子,CSS布局更加高效,不會(huì)讓我的手再起水泡。
相關(guān)文章
指定網(wǎng)頁的doctype解決CSS Hacking方法總結(jié)
我們都知道,要做WD(web designer),首先得伺侯好幾個(gè)瀏覽器:IE6,IE7,Firefox.一般的頁面,都只要求在IE6,IE7,Firefox下正常工作就行了。2008-09-0920個(gè)優(yōu)秀CSS網(wǎng)站(3月精選)
20個(gè)優(yōu)秀CSS網(wǎng)站(3月精選)...2007-03-03html中CSS:hover選擇器改變子元素、同級(jí)元素、就近元素的樣式
鼠標(biāo)懸浮覆蓋元素后,以前使用js的mouseover和mouseout添加監(jiān)聽事件可以實(shí)現(xiàn)交互,現(xiàn)在可以使用CSS中的:hover選擇器提高性能,:hover選擇器可以針對(duì)不同的HTML元素,在鼠標(biāo)懸停時(shí)改變?cè)兀ㄒ部梢允亲釉?、同?jí)元素、就近元素)的樣式,增強(qiáng)網(wǎng)頁的互動(dòng)性和用戶體驗(yàn),2023-08-08firefox background-image垂直平鋪問題的解決方法
firefox下background-image的垂直平鋪repeat-y不設(shè)置height的解決辦法2008-07-07DIV+CSS作網(wǎng)頁容易犯的錯(cuò)誤小結(jié)
DIV+CSS作網(wǎng)頁容易犯的錯(cuò)誤小結(jié)...2007-11-11