使用Table布局頁(yè)面為什么是不明智的？
大家看到標(biāo)題，不要誤解認(rèn)為在頁(yè)面中不能使用Table，而是可以使用Table，但是盡量不要用Table去布局頁(yè)面，為什么這么說(shuō)呢，因?yàn)槭褂肨able布局頁(yè)面會(huì)使頁(yè)面失去靈活性，怎么個(gè)靈活法呢，比如今天你好不容易做出來(lái)的頁(yè)面，第二天老板說(shuō)我不喜歡登錄模塊放到右邊，還是放到左邊，通知板塊放到右側(cè)去，頁(yè)面風(fēng)格最好一個(gè)月?lián)Q一種，如果遇到這種老板，提出這種要求，并且你的頁(yè)面是用Table布局的，那么你會(huì)崩潰的，工作量那是大大滴~，如果不相信的話，你們自己可以找個(gè)頁(yè)面，用Table布局出來(lái)，然后變換板塊和風(fēng)格，你就會(huì)體會(huì)到Table布局的不靈活性，這是為什么呢，因?yàn)門able的誕生是為存儲(chǔ)數(shù)據(jù)用的，功能和Execel差不多，不是用來(lái)布局用的，只不過(guò)后來(lái)大家發(fā)現(xiàn)用Table可以把想放的頁(yè)面元素，比如圖片，放到任何自己想放的地方，且做出來(lái)的頁(yè)面可以兼容多種瀏覽器，于是Table就承擔(dān)起了布局頁(yè)面的重?fù)?dān)，這一做就是好幾年... ...直到Web2.0時(shí)代的到來(lái)，Table才從布局頁(yè)面的工作中逐漸解脫，專心的去存儲(chǔ)數(shù)據(jù)^_^

    既然Table是為存儲(chǔ)數(shù)據(jù)誕生的，那誰(shuí)的誕生是為了頁(yè)面布局呢？
    答案就是:DIV，DIV就是為布局頁(yè)面而誕生的，只不過(guò)一直不被人認(rèn)同，原因就是DIV去布局頁(yè)面需要CSS的配合，使用比較繁瑣，還不如Table拖拖拽拽頁(yè)面就布局OK了，感覺(jué)還不如Table方便，從而DIV被人們放置在一個(gè)無(wú)人問(wèn)津的昏暗角落里，暗暗的等待著伯樂(lè)的出現(xiàn)，直到2003年美國(guó)加州Scott Design公司參加了在舊金山舉辦的有關(guān)網(wǎng)頁(yè)排版和設(shè)計(jì)的一個(gè)研討會(huì)上的演講，使DIV看到了陽(yáng)光，走出了陰霾... ...

    說(shuō)了那么多，我們對(duì)比一下Table布局頁(yè)面和DIV布局頁(yè)面的優(yōu)缺點(diǎn)
網(wǎng)上有一篇文章，轉(zhuǎn)過(guò)來(lái)，文章著重介紹DIV三點(diǎn)優(yōu)勢(shì),也許看完文章后，就像社區(qū)元老heflyaway說(shuō)的感覺(jué)作者比較迷戀Table，每篇文章都不可避免的帶有個(gè)人色彩，而轉(zhuǎn)出來(lái)的目的，其實(shí)就是想給大家降降DIV+CSS的溫度，免得“走火入魔”，視DIV+CSS是為萬(wàn)能的，如果想學(xué)好CSS布局頁(yè)面，就要從多個(gè)方面看它，好了，不多說(shuō)了，下面是作者對(duì)CSS布局頁(yè)面的三點(diǎn)優(yōu)勢(shì)及理解：
    第一點(diǎn)、內(nèi)容和形式分離
網(wǎng)頁(yè)前臺(tái)只需要顯示內(nèi)容就行，形式上的美工交給CSS來(lái)處理。生成的HTML文件代碼精簡(jiǎn)，更小打開更快。
這個(gè)是DIV+CSS技術(shù)最顯著的特點(diǎn)，也是CSS存在的根源。完全的顛覆現(xiàn)在傳統(tǒng)（table）網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)。所有現(xiàn)在用table制作的內(nèi)容，都可以用CSS來(lái)解決掉，而且解決的更完美，更強(qiáng)大。不需要大家再表格套表格，讓生成的網(wǎng)頁(yè)文件大小更精簡(jiǎn)，更小。table時(shí)代，一個(gè)頁(yè)面表格達(dá)到10個(gè)以上是非常普遍的事情，但是現(xiàn)在用DIV+CSS，一個(gè)table都可以不用，就完全達(dá)到之前的效果，這就直接導(dǎo)致網(wǎng)頁(yè)文件大小比使用table時(shí)減少50%-80%，更節(jié)約各位站長(zhǎng)的硬盤空間，訪問(wèn)者打開網(wǎng)頁(yè)時(shí)更快，而且用div+CSS時(shí)，不像以往使用table時(shí)，必須把全部table讀取完了才顯示頁(yè)面內(nèi)容，現(xiàn)在是可以讀一個(gè)div就顯示一個(gè)效果，大家打開網(wǎng)頁(yè)不用等。好處真是明顯而強(qiáng)大。
這個(gè)優(yōu)點(diǎn)的確是顯著的，凡是使用傳統(tǒng)table建的網(wǎng)頁(yè)，內(nèi)容多的話，有時(shí)候達(dá)到30K左右都有可能，文件打了打開時(shí)，肯定就有0.0幾秒的延遲。使用DIV+CSS，你前臺(tái)打開看到的全是直接內(nèi)容，CSS文件都是導(dǎo)入鏈接的，是另一個(gè)文件，根本和HTML文件大小沒(méi)關(guān)系，這種生成的HTML文件，一個(gè)也就10K左右大小。


    第二點(diǎn)，改版網(wǎng)站更簡(jiǎn)單容易了
不用重新設(shè)計(jì)排版網(wǎng)頁(yè)，甚至于不用動(dòng)原網(wǎng)站的任何HTML和程序頁(yè)面，只需要改動(dòng)CSS文件就完成了所有改版。
DIV+CSS對(duì)于門戶網(wǎng)站來(lái)說(shuō)改版就像換件衣服一樣簡(jiǎn)單容易，改版時(shí)，不用改動(dòng)全站HTML頁(yè)面，只需要重新寫CSS，再用新CSS覆蓋以前的CSS就可以實(shí)現(xiàn)改版了。方便吧。

    第三點(diǎn)，搜索引擎更友好，確實(shí)能夠?qū)EO起到一定的幫助。
通過(guò)DIV+CSS對(duì)網(wǎng)頁(yè)的布局，可以讓一些重要的鏈接、文字信息，優(yōu)先讓搜索引擎蜘蛛爬取。這對(duì)于SEO也有幫助。

綜上所述，個(gè)人感覺(jué)DIV+CSS不能太迷信它的很好很強(qiáng)大，它作為制作網(wǎng)頁(yè)，美化網(wǎng)頁(yè)的一個(gè)重要輔助是很強(qiáng)大方便的?？梢詮浹a(bǔ)table制作框架和表格時(shí)的很多不足和美工上的缺點(diǎn)，但是完全只用它來(lái)做，太費(fèi)時(shí)費(fèi)力，對(duì)于全國(guó)中小型網(wǎng)站長(zhǎng)來(lái)說(shuō)，真的不太適合。我個(gè)人覺(jué)得用table+DIV+CSS是最好的組合，也是最省時(shí)省力的辦法。

還需要再說(shuō)明一下，本節(jié)講得是Table布局頁(yè)面和CSS布局頁(yè)面的問(wèn)題，討論的是“布局頁(yè)面”上用誰(shuí)更好，并不是說(shuō)在CSS布局的頁(yè)面內(nèi)不能用Table，真正厲害的人物是DIV、Table、CSS用得恰到好處，他們?nèi)齻€(gè)各做各的事情，DIV布局頁(yè)面，Table存儲(chǔ)數(shù)據(jù)，CSS給頁(yè)面穿衣服！

最新評(píng)論