table 和 div 简单布局

table 简单布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table布局</title>
</head>

<body marginheight="0px" marginwidth="0px">
<table width="100%" height="965" style="background-color: #003">
<tr>
<td colspan="3" width="100%" height="320"  style="background-color: #C6C">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color:#303">这是左半部</td>
<td width="70%" height="80%" style="background-color: #CC3" >这是右半部</td>
<tr>
<td width="100%" height="10%"  style="background-color: #600" >这是下部</td>
</tr>

</table>

</body>
</html>

div 简单布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>idv布局</title>

<style type="text/css">
body{ margin:0px;}
div#center{
	width:100%;
    height:950px;
    background-color: #666;
 }
 div#heading{
	  width:100%;
      height: 10%;
      background-color:#096
 }
 div#menuw{
   width:30%;
   height:80%;
   background-color:#993;
   float:left;
   }
   div#lift{ width:70%;
   height:80%;
   background-color:#FC0
   float:left;
   }
    div#floor{ width:100%;
   height:10%;
   background-color: #39F;
   clear: both;}
</style>
</head>
<body>
<div id="center">
<div id="heading">头部</div>
<div id="menuw">左半部分</div>
<div id="lift">右半部分</div>
<div id="floor">底部</div>
</body>
</html>

对比：个人觉得table简单好理解，就像垒砖一块挨一块，踏实。 而div更具特色，就像泼墨，随便勾画几笔便是巨作。

简单 说table 和 div 各有各的好处。

头部

左半部分

右半部分

底部