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

DIV布局和Table布局的區別

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

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

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

但總體上而言：

1.DIV+CSS布局比Table布局節省頁面代碼，代碼結構也更清晰明了.

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

3.DIV+CSS布局使網站版面布局修改變的更簡單,因為版面代碼都寫在獨立的css文件里修改起來方便多了,不象Table要在頁面中修改很多信息.

頁面中：

<divclassdivclass=\"style2\"></div>//表示調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頁面布局的區別和聯系
2. CSS層疊與繼承用法手冊
3. DIV布局規范中CSS類及id命名方式
4. DIV+CSS中border和clear屬性用法剖析
5. 將XHTML+CSS頁面轉換為打印機頁面技巧