网页布局对改善网站的外观非常重要,请慎重设计您的网页布局,大多数网站会把内容安排到多个列中（就像杂志或报纸那样）,大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
e.g:虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
HTML 布局 - 使用<div> 元素/div 元素是用于分组 HTML 元素的块级元素
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div id="container" style="800px"> 6 7 <div id="header" style="background-color:#FFA500;"> 8 <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> 9 10 <div id="menu" style="background-color:#FFD700;height:200px;100px;float:left;"> 11 <b>Menu</b><br> 12 HTML<br> 13 CSS<br> 14 JavaScript</div> 15 16 <div id="content" style="background-color:#EEEEEE;height:200px;700px;float:left;"> 17 Content goes here</div> 18 19 <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 20 Copyright © w3cschool.cn</div> 21 22 </div> 23 24 </body> 25 </html>
HTML 布局 - 使用table表格
使用 HTML <table> 标签是创建布局的一种简单的方式;大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <table width="500" border="0"> 6 <tr> 7 <td colspan="2" style="background-color:#FFA500;"> 8 <h1>Main Title of Web Page</h1> 9 </td> 10 </tr> 11 12 <tr> 13 <td style="background-color:#FFD700;100px;"> 14 <b>Menu</b><br> 15 HTML<br> 16 CSS<br> 17 JavaScript 18 </td> 19 <td style="background-color:#eeeeee;height:200px;400px;"> 20 Content goes here</td> 21 </tr> 22 23 <tr> 24 <td colspan="2" style="background-color:#FFA500;text-align:center;"> 25 Copyright © w3cschool.cn</td> 26 </tr> 27 </table> 28 29 </body> 30 </html>
HTML 布局/使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。同时由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
概括：一开始我们接触网页制作的时候，就了解到html代表结构、css代表样式、javascript代表行为，网页制作中，我们一直强调结构与表现相分离的原则，这里面的结构一般指HTML，此外分离是说把它们写在不同的文件加以引用吗？当然不是，在这里的学习中了解到，分离不单是一种方法更是一种思想，简而言之，一个平面二维坐标，其中x轴代表技术发展，y轴代表网页制作需求，分离是根据技术发展和我们的网页制作需求完成的！