(1)表格佈局 表格佈局容易掌握，佈局方便。但表格佈局需要通過表格的間距或者使用透明的gif圖片來填充佈局板塊間的間距，這樣佈局的網頁中表格會生成大量難以閱讀和維護的代碼；而且表格佈局的網頁要等整個表格下載完畢後才能顯示所有內容，所有表格佈局瀏覽速度較慢[2]。 (2)CSS+DIV佈局 通常要實現 ...
(1)表格佈局
表格佈局容易掌握，佈局方便。但表格佈局需要通過表格的間距或者使用透明的gif圖片來填充佈局板塊間的間距，這樣佈局的網頁中表格會生成大量難以閱讀和維護的代碼；而且表格佈局的網頁要等整個表格下載完畢後才能顯示所有內容，所有表格佈局瀏覽速度較慢[2]。
(2)CSS+DIV佈局
通常要實現比較精確和自適應的層佈局需要設置層的樣式，即用CSS控制層的位置。CSS+DIV佈局採用Div來定位，通過Div的border(邊框)、padding(填充)、margin(邊界)和Float（浮動）等屬性來控制板塊的間距，具體實施是通過創建Div標簽並對其應用CSS
[3]定位及浮動屬性來實現。
CSS+DIV佈局需要編寫大量CSS樣式代碼來控制各佈局DIV層，因此要掌握它相對錶格佈局會困難一些。但CSS+DIV佈局較表格佈局更加靈活實用，網站佈局後很容易就能調整網站的佈局結構；而且CSS+DIV佈局的各佈局DIV層可以依次下載顯示，因此其訪問速度較表
[4]格佈局要快。
表格佈局網頁實例
以下為用表格佈局的一個網頁的代碼[5]。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格佈局</title> </head> <body>
<table width="900" height="280" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="82" colspan="2"><img src="header.jpg" width="900" height="82" /></td> </tr>
<tr>
<td height="32" colspan="2"><img src="links.jpg" width="900" height="32" /></td> </tr>
<tr>
<td width="190" height="618"><img src="left.jpg" width="190" height="618" /></td> <td width="710"><img src="main.jpg" width="710" height="618" /></td>
</tr>
<tr>
<td height="64" colspan="2"><img src="footer.jpg" width="900" height="64" /></td> </tr> </table></body></html>
CSS+DIV佈局網頁實例
<style type="text/css"> <!-- body{
text-align:center; } #container{
position:relative;
background-color:#00FF00;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
height:765px;
width:900px;
text-align:left; } #header{
position:relative;
background-color:#FF0000;
height:82px;
width:900px;
text-align:left; } #links{
position:relative;
background-color:#FF9900;
height:32px;
width:900px;
text-align:left; } #left{
position:relative;
background-color:#FFFF66;
height:618px;
width:190px;
text-align:left;
float:right; } #main{
position:relative;
background-color:#00FFFF;
height:618px;
width:710px;
text-align:left;
float:left; } #footer{
position:relative;
background-color:#FF00FF;
height:64px;
width:900px;
text-align:left;
float:left; } --> </style> </head> <body> <div id="container">
<div id="header"><img src="header.jpg" /></div>
<div id="links"><img src="links.jpg" /></div>
<div id="left"><img src="left.jpg" /></div>
<div id="main"><img src="main.jpg" /></div>
<div id="footer"><img src="footer.jpg" /></div> </div> </body> </html>
代碼說明：
(1)代碼中共包含6個div標簽，分別代表6個層。其中最外層的id為container的div
[7]起到一個容器的作用，用於容納其它5個層。
(2)選擇器body和#container的樣式用於將最外層id為container的div（容器層）水平居中顯示。
(3)其它幾個選擇器樣式如#header，#links，#left，#main和#footer分別用來控制容器內5個層的顯示。
(4)選擇器#left和#main中有一個重要CSS屬性float。其中在選擇器#left中設置為float:left；而選擇器#main中設置為float:right。該屬性設定了id為left的層居左顯示，id為main的層則居右顯示。
(5)如果想將id為left和main的層交換位置，只需要在選擇器#left中設置float:right；同時在選擇器#main中設置float:left即可。
