符合WEB標(biāo)準(zhǔn)的CSS網(wǎng)頁布局相對于傳統(tǒng)TABLE布局的一些優(yōu)勢_Web標(biāo)準(zhǔn)教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
一、代碼臃腫
首先,Table里面唯一無法用CSS定義的屬性只有Cellspacing,Cellpadding幾個,其它屬性都可以并且應(yīng)當(dāng)使用CSS,這樣,剩下的,就是<table><tr><td>和<div>的對決,我相信一個動輒幾十K大小的網(wǎng)頁,即使使用了幾十個Table,因此多出來的代碼也可以忽略不計,那些埋怨Table代碼臃腫的人其實該檢查自己的編碼習(xí)慣,能將Table寫得十分臃腫的人,寫Div相比也未必會簡潔到哪里。
二、頁面渲染性能問題
我使用一臺2004年的筆記本電腦,1.6G的CPU與1G內(nèi)存,這種配置下,看不出Table布局和Div布局在頁面渲染上有任何速度差別,其實這點差別即使有,相對網(wǎng)絡(luò)本身的延遲也可以忽略。
三、不利于搜索引擎優(yōu)化SEO
如果你盡可能使用CSS而不是Table的屬性,前面說了,產(chǎn)生的代碼和Div的差別也不會很大,搜索引擎會歧視<table>標(biāo)簽嗎,這種說法的依據(jù)我至今并沒有找到。
四、可訪問性差
這是Table固有的缺陷,不過多數(shù)Div+CSS的擁躉似乎并不是基于這個原因才排斥Table。
五、不夠語義
語義Web的含義要深遠得多,并不是僅僅在Table和Div上糾纏,即使W3C,也并沒有規(guī)定Table只能用來顯示表格數(shù)據(jù),很多在Table的語義上進行糾纏的人,其實不妨再等等HTML5,那才是真正的語義。
代碼臃腫:你至少需要寫下<table><tr><td>這三個標(biāo)簽之后,才能開始真正的內(nèi)容,另外,Table的各種標(biāo)簽中還包含了復(fù)雜的屬性定義,而Div只需<div>一個標(biāo)簽。
頁面渲染性能問題:瀏覽器需要將整個表格完全讀完后才會開始渲染。
不利于搜索引擎優(yōu)化:搜索引擎喜歡內(nèi)容與修飾分開。
可訪問性差:屏幕朗讀軟件和盲文瀏覽器無法很好地理解Table中的內(nèi)容。
不夠語義(Semantic):我們需要語義的Web。
本文的目的不是讓你丟棄Div投身Table,相反,如果Div能滿足你的設(shè)計需要,Div仍是首選,但沒必要避諱Table,否則會走入另外一個極端。很多使用Div無法簡單實現(xiàn)的設(shè)計,仍可以使用Table,當(dāng)然,不管使用什么,都應(yīng)該用CSS將內(nèi)容與修飾分離。Div+CSS和Table+CSS都是合法的設(shè)計,誰更簡單就用誰。根據(jù)我的經(jīng)驗,當(dāng)你能預(yù)見你的內(nèi)容的格式,對你即將加入的內(nèi)容有能力完全控制其顯示格式時,應(yīng)當(dāng)使用Div+CSS;當(dāng)你即將加入的內(nèi)容是不固定的,你無法預(yù)見其格式,如果不想讓頁面坍塌,使用Table+CSS是一種保險的做法。
首先,Table里面唯一無法用CSS定義的屬性只有Cellspacing,Cellpadding幾個,其它屬性都可以并且應(yīng)當(dāng)使用CSS,這樣,剩下的,就是<table><tr><td>和<div>的對決,我相信一個動輒幾十K大小的網(wǎng)頁,即使使用了幾十個Table,因此多出來的代碼也可以忽略不計,那些埋怨Table代碼臃腫的人其實該檢查自己的編碼習(xí)慣,能將Table寫得十分臃腫的人,寫Div相比也未必會簡潔到哪里。
二、頁面渲染性能問題
我使用一臺2004年的筆記本電腦,1.6G的CPU與1G內(nèi)存,這種配置下,看不出Table布局和Div布局在頁面渲染上有任何速度差別,其實這點差別即使有,相對網(wǎng)絡(luò)本身的延遲也可以忽略。
三、不利于搜索引擎優(yōu)化SEO
如果你盡可能使用CSS而不是Table的屬性,前面說了,產(chǎn)生的代碼和Div的差別也不會很大,搜索引擎會歧視<table>標(biāo)簽嗎,這種說法的依據(jù)我至今并沒有找到。
四、可訪問性差
這是Table固有的缺陷,不過多數(shù)Div+CSS的擁躉似乎并不是基于這個原因才排斥Table。
五、不夠語義
語義Web的含義要深遠得多,并不是僅僅在Table和Div上糾纏,即使W3C,也并沒有規(guī)定Table只能用來顯示表格數(shù)據(jù),很多在Table的語義上進行糾纏的人,其實不妨再等等HTML5,那才是真正的語義。
代碼臃腫:你至少需要寫下<table><tr><td>這三個標(biāo)簽之后,才能開始真正的內(nèi)容,另外,Table的各種標(biāo)簽中還包含了復(fù)雜的屬性定義,而Div只需<div>一個標(biāo)簽。
頁面渲染性能問題:瀏覽器需要將整個表格完全讀完后才會開始渲染。
不利于搜索引擎優(yōu)化:搜索引擎喜歡內(nèi)容與修飾分開。
可訪問性差:屏幕朗讀軟件和盲文瀏覽器無法很好地理解Table中的內(nèi)容。
不夠語義(Semantic):我們需要語義的Web。
本文的目的不是讓你丟棄Div投身Table,相反,如果Div能滿足你的設(shè)計需要,Div仍是首選,但沒必要避諱Table,否則會走入另外一個極端。很多使用Div無法簡單實現(xiàn)的設(shè)計,仍可以使用Table,當(dāng)然,不管使用什么,都應(yīng)該用CSS將內(nèi)容與修飾分離。Div+CSS和Table+CSS都是合法的設(shè)計,誰更簡單就用誰。根據(jù)我的經(jīng)驗,當(dāng)你能預(yù)見你的內(nèi)容的格式,對你即將加入的內(nèi)容有能力完全控制其顯示格式時,應(yīng)當(dāng)使用Div+CSS;當(dāng)你即將加入的內(nèi)容是不固定的,你無法預(yù)見其格式,如果不想讓頁面坍塌,使用Table+CSS是一種保險的做法。
相關(guān)Web標(biāo)準(zhǔn)教程:
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語:開始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
猜你也喜歡看這些
- overflow與text-indent:-9999px 字體隱藏及input value偏移
- CSS初學(xué)者技巧:談CSS的標(biāo)準(zhǔn)和最佳示例
- IE6、IE7絕對定位與鏈接問題研究
- IE中怎么會出現(xiàn)雙倍邊距?
- 關(guān)于DIVCSS浮動float的兼容
- 如何讓IE ff Opera同時支持Alpha透明?
- CSS的BUG:IE6中一個奇怪的現(xiàn)象!
- li中出現(xiàn)兩個以上浮動時列表標(biāo)記出現(xiàn)問題的解決辦法
- JS的IE和FF兼容性問題的匯總小結(jié)
- CSS實例:list-style-type在IE與FF中奇怪的現(xiàn)象解析
- 相關(guān)鏈接:
復(fù)制本頁鏈接| 搜索符合WEB標(biāo)準(zhǔn)的CSS網(wǎng)頁布局相對于傳統(tǒng)TABLE布局的一些優(yōu)勢
- 教程說明:
Web標(biāo)準(zhǔn)教程-符合WEB標(biāo)準(zhǔn)的CSS網(wǎng)頁布局相對于傳統(tǒng)TABLE布局的一些優(yōu)勢
。