html常用的布局有两种。第一种一是div布局，优点是比较方便简洁，代码比较少，制作和维护也比较容易，就是有些地方不同的浏览器兼容性不一样，可能会有不同的显示。第二种是table布局，代码比较多，到后期维护起来是非常头疼的，但是table布局规避了许多浏览器不兼容的问题。
1.div布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style>
body{margin: 0; padding: 0;}
#header{width:100%; height: 90px; background: #b19f9d; }
#nav{margin: 0 auto; width:70%; height: 90px; background: #fcf;}
.content{width: 950px; height: 900px; background: #847369; margin: 0 auto;}
.left{width:30%; height: 900px; background: #decfd4; float: left;}
.right{width: 70%; height: 900px; background: #b3a19d; float: left;}
footer{width:100%; height: 150px; background: #a8817a;}
</style>
</head>
<body>
<header id="header">
<nav id="nav">空空</nav>
</header>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>
</html>2.table布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color:gray">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: aqua" ><td>
</tr>
<tr>
<td width="20%" height="80%" style="background-color: blue" ><td>
<td width="80%" height="80%" style="background-color: blue" ><td>
</tr>
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: black" ><td>
</tr>
</table>
</body>
</html>总结：
table布局比较局限，div 比较开放，设计样式比较多，效果美观，table好处是所有浏览器都兼容div缺点是兼容性很麻烦。
立即学习“前端免费学习笔记（深入）”；
相关推荐：
HTML布局之计算器(div+css)_html/css_WEB-ITnose
