本文和大家重點討論一下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{……
第一種寫法明顯可以提高代碼重用率。
【編輯推薦】