本文和大家重點(diǎn)討論一下DIV布局和Table布局的區(qū)別，DIV可以理解成一個塊，是有個比表格簡單的元素，從語法上只有<div></div>這樣簡單的定義。

DIV布局和Table布局的區(qū)別

傳統(tǒng)Table布局方式實(shí)際上是利用了HTMLTable表格元素具有的無邊框特性，由于Table元素可以在顯示時使得單元格的邊框和間距為0，即不顯示邊框，因此可以將網(wǎng)頁中的各個元素按版式劃分放入表格的各個單元格中，從而實(shí)現(xiàn)復(fù)雜的排版組合。

表格布局的代碼最常見的是在HTML標(biāo)簽之間嵌入一些設(shè)計代碼，如width=100%,border=0等。表格布局的混亂代碼就是這樣編寫的，大量樣式年設(shè)計代碼混雜在表格，單元格中，使得可讀性大大降低，維護(hù)起來成本也相當(dāng)高，盡管有類似于Dreamweaver（以下簡單稱dw）這樣可視化的界面進(jìn)行編寫，只要你需要什么，他幫你寫入什么樣式，最終結(jié)果是表格中到處留下設(shè)計的足跡，混合式代碼也由此而成。

DIV可以理解成一個塊，是有個比表格簡單的元素，從語法上只有<div></div>這樣簡單的定義。DIV***的好處就是樣式是由CSS來控制。

但總體上而言：

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

2.DIV+CSS的頁面對搜索引擎支持好，而且速度更快了,能夠比Table更加快速的顯示網(wǎng)站內(nèi)容.

3.DIV+CSS布局使網(wǎng)站版面布局修改變的更簡單,因?yàn)榘婷娲a都寫在獨(dú)立的css文件里修改起來方便多了,不象Table要在頁面中修改很多信息.

頁面中：

<divclassdivclass=\"style2\"></div>//表示調(diào)class名為style2的樣式。  
 

也可以這樣寫 

<dividdivid=\"style2\"></div>不過CSS表示就有所不同了。  
 

CSS代碼： 

.style2{  
width:800px;//寬度  
height:100%;//高度  
margin:0pxauto;//頁面邊距離，  
如margin-top：10px表示上邊距為10像素,這里是為自動  
margin-bottom:20px;//下邊距  
border:1pxsolid#9BDF70;//邊框  
background-color:#F0FBEB//背景色  
}  
(在樣式指定為divid=的時候必須這樣寫)  
#style2{……  

***種寫法明顯可以提高代碼重用率。
 

【編輯推薦】

1. DIV和table頁面布局的區(qū)別和聯(lián)系
2. CSS層疊與繼承用法手冊
3. DIV布局規(guī)范中CSS類及id命名方式
4. DIV+CSS中border和clear屬性用法剖析
5. 將XHTML+CSS頁面轉(zhuǎn)換為打印機(jī)頁面技巧