本文向大家描述一下DIV和Table頁面布局的區(qū)別和聯(lián)系，一般來說Table開發(fā)快，容易控制，瀏覽器兼容也好些，至于DIV的優(yōu)勢請看下文詳解。

DIV和Table頁面布局的區(qū)別和聯(lián)系

現(xiàn)在對于網(wǎng)頁制作是選擇傳統(tǒng)的Table還是用新型的DIV，有分歧。一部分說還是用Table好，開發(fā)快，容易控制，瀏覽器兼容也好些；另一部分認(rèn)為DIV好，以后的發(fā)展趨勢,主要是如下原因：

DIV+CSS布局比Table布局節(jié)省頁面代碼，代碼結(jié)構(gòu)也更清晰明了。

DIV+CSS開發(fā)速度要比Table快，而且布局更精確，不過手寫代碼明顯增加DIV+CSS布局，使網(wǎng)站版面布局修改變的更簡單。

DIV+CSS布局能夠適應(yīng)未來多種客戶端需求。

DIV+CSS布局節(jié)約站點所占空間和站點流量。這些都是DIV的好處。

DIV有這么多好處是不是有些心動，決定學(xué)它。DIV和Table各有長處，通常情況下它們可以互換使用。

我感覺正確的符合標(biāo)準(zhǔn)的設(shè)計思路是：使用DIV等布局元素來制作頁面的設(shè)計布局，定位，色塊，圖片等。使用Table，UL等這樣的元素來顯示頁面中需要展示的數(shù)據(jù)。因為DIV不會像Table一樣，在IE下要將整個Table下載完后才全部顯示內(nèi)容(firefox不會)，所以用Table來布局顯然是不合適的，尤其是數(shù)據(jù)量大時，在IE下用Table會發(fā)現(xiàn)慢的多。而DIV就好多了。當(dāng)然,DIV也起整理數(shù)據(jù)的作用。

DIV用于布局，Table用于顯示數(shù)據(jù)，這是現(xiàn)在最基本的設(shè)計原則。

1：Table里可以內(nèi)嵌DIV。反之DIV可以內(nèi)嵌Table嗎？？

當(dāng)然可以了。

◆DIV定義

表示一塊可顯示HTML的區(qū)域。

SpecifiesacontainerthatrendersHTML.

注釋

此元素在InternetExplorer3.0及以上版本的HTML中可用，在InternetExplorer4.0及以上版本的腳本中可用。

此元素是塊元素。

此元素需要關(guān)閉標(biāo)簽。

TheDIVelementisavailableinHTMLasofInternetExplorer3.0,
andinscriptasof  
 
InternetExplorer4.0.  
 
Thiselementisablockelement.  
 
Thiselementrequiresaclosingtag.  

示例代碼

下面的例子使用了兩個DIV元素對兩段文字進(jìn)行了不同的對齊處理。

ThisexampleusestwoDIVelementstoaligntwosectionsoftextdifferently.  
 
<DIV> 
此文本代表一段。可以在這里放你的HTML或文本  
</DIV> 
<DIVALIGNDIVALIGN=CENTER> 
此文本代表另外一段，其中文本居中顯示。  
</DIV> 

DIV本身就是容器性質(zhì)的，你不但可以內(nèi)嵌Table還可以內(nèi)嵌文本和其它的HTML代碼。

2:DIV是不是跟Table一樣的作用？

DIV的作用跟Table是差不多的，但是DIV對xml的支持更好而且使用起來比較靈活，因此被推薦為新的網(wǎng)頁布局方式。

3:DIV Table哪個速度快？

DIV相對比較快，網(wǎng)頁內(nèi)容的顯示需要將相對一整塊的內(nèi)容下載完成后再顯示。使用DIV布局是許多的獨立的相對較小的范圍，而使用Table布局一般都會表格嵌套多層形成較大的下載范圍。
 

【編輯推薦】

1. DIV+CSS中border和clear屬性用法剖析
2. CSS層疊與繼承用法手冊
3. DIV布局規(guī)范中CSS類及id命名方式
4. CSS網(wǎng)頁布局中id與class命名規(guī)則
5. 將XHTML+CSS頁面轉(zhuǎn)換為打印機頁面技巧