html布局方式：div和table

最新推荐文章于 2025-05-21 22:19:12 发布

原创最新推荐文章于 2025-05-21 22:19:12 发布 · 826 阅读

0 ·

CC 4.0 BY-SA版权

web开发专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了两种常见的网页布局方式：使用div和table进行布局的方法。通过具体的代码实例展示了如何利用div实现灵活的响应式设计，并对比了table布局的实现过程。适合初学者了解基本网页布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div布局</title>
		<style type="text/css">
			body{
				margin: 0px;
			}
			#container{
				width: 100%;
				height: 950px;
				background-color: gray;
			}
			#heading{
				width: 100%;
				height: 10%;
				background-color: aqua;
			}
			#content_menu{
				width: 30%;
				height: 80%;
				background-color: bisque;
				float: left;
			}
			#content_body{
				width: 70%;
				height: 80%;
				background-color: #7FFF00;
				float: left;
			}
			div#footing{
				width: 100%;
				height: 10%;
				background-color: red;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="heading">头部</div>
			<div id="content_menu">内容菜单</div>
			<div id="content_body" >内容主体</div>
			<div id="footing">底部</div>
		</div>
	</body>
</html>

table

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>table布居</title>
	</head>
	<body marginheight="0" marginwidth="0">
		<table width="100%" height="950px" style="background-color: gray;">
			<tr>
				<!--colspan是合并单元格的意思-->
				<td colspan="3" width="100%" height="10%" bgcolor="#00FFFF">这是头部</td>
			</tr>
			<tr>
				<td width="20%" height="80%" bgcolor="#7FFF00">
					<ol>
						<li>ios</li>
						<li>android</li>
						<li>html</li>
					</ol>
				</td>
				<td width="60%" height="80%" bgcolor="brown">主体</td>
				<td width="20%" height="80%" bgcolor="red">右</td>
			</tr>
			<tr>
				<td colspan="3" width="100%" height="10%" bgcolor="darkblue">底部</td>
			</tr>
		</table>
	</body>
</html>