使用<div>元素布局网页，div 元素是用于分组 HTML 元素的块级元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS、HTML</title>
</head>
<body>
<div id="container" style="width:500px">
  <div id="header" style="background-color:#FFA500">
    <h1 style="margin-bottom:0;">主要的网页标题</h1>
  </div>
  <div id="menu" style="background-color:#FFD700; height:200px; width:100px; float:left"><b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript<br>
  </div>
  <div id="content" style="background-color:#EEEEEE; height:200px; width:400px; float:left;">内容在这里 </div>
  <!--clear属性两边不允许出现浮动元素-->
  <div id="footer" style="background-color:#FFA500; clear:both; text-align:center;">版权©runoob.com</div>
</div>
</body>
</html>

     使用<table>元素布局网页，可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS、HTML</title>
</head>
<body>
<table width="500px" border="0px">
  <tr>
    <td colspan="2" style="background-color:#FFA500;"><h1>主要的网页标题</h1></td>
  </tr>
  <tr>
    <td style="background-color:#FFD700; width:100px;"><b>菜单</b><br>
      HTML<br>
      CSS<br>
      JavaScript</td>
    <td style="background-color:#EEEEEE; height:200px; width:400px;">内容在这里</td>
  </tr>
  <tr>
  <td style="background-color:#FFA500; text-align:center;" colspan="2">版权 © runoob.com</td>
  </tr>
</table>
</body>
</html>