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 各有各的好处。
头部
左半部分
右半部分
底部
时间： 2024-10-21 17:55:23