Home >Web Front-end >HTML Tutorial >How to lay out a web page when writing html
There are two commonly used layouts in html. The first one is div layout, which has the advantage of being more convenient and concise, with less code, and easier to create and maintain. However, in some places, different browsers have different compatibility and may have different displays. The second type is the table layout, which has a lot of code and is very troublesome to maintain later. However, the table layout avoids many browser incompatibility issues.
1.div layout
<!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 layout
<!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>Summary:
The layout of table is relatively limited, while div is more open, with more design styles and beautiful effects. The advantage of table is that all browsers are compatible with div. The disadvantage of div is that compatibility is very troublesome.
Related recommendations:
HTML layout calculator (div css)_html/css_WEB-ITnose
html layout problem. _html/css_WEB-ITnose
##HTML layout_html/css_WEB-ITnose
htmlLayout problem_html/css_WEB-ITnose
The above is the detailed content of How to lay out a web page when writing html. For more information, please follow other related articles on the PHP Chinese website!