標籤：tom 控制 html 實現 選擇 建立 pad relative header
(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即可。
淺談分析表格版面配置與Div+CSS布局的區別
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
