近日开发中，总感觉页面布局方面力不从心。以前也曾学过这方面的内容，但是不够系统，因此我打算整理一下。
在web 页面中一般有 table 和 css+div 两种布局方式。
其中css+div 又分为原生css 和css 框架 两种。
现在一般网站已经不再使用table布局，但是一些简单对齐的页面也可以使用一下，因此在此处做一个简单的总结。
一、table 布局
html 标签中 跟table 布局相关的标签 有 <table> <th> <tr> <td>，另有两个比较重要的属性 是 rowspan，colspan。
table 布局也非常强大，在css 出现之前，所有的网页几乎都是用table 布局的。但是现在几乎不再使用了。以前看过的一话转载在此处：
为什么我们不建议用Table布局
Table要比其它html标记占更多的字节。
(延迟下载时间，占用服务器更多的流量资源。)
Tablle会阻挡浏览器渲染引擎的渲染顺序。
(会延迟页面的生成速度，让用户等待更久的时间。)
Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。
(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)
在某些浏览器中Table里的文字的拷贝会出现问题。
(这会让用户不悦。)
Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)
(这会限制你页面设计的自由性。)
一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。
(先花时间学一些CSS知识，会省去你以后大量的时间。)
table对对于页面布局来说，从语义上看是不正确的。
(它描述的是表现，而不是内容。)
table代码会让阅读者抓狂。
(不但无法利用CSS，而且会你不知所云)
table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。
(你看过CSS Zen Garden吗?)
Tables的好处
在某些场合，使用Table是100%的适合、恰当和正确。比如，用table做表格是完全正确的。
如果你无法判断是否应该使用table，参考一下上面的几条，相信你能找到答案。
英文：Why Tables Are Bad.
译文：webhek
table 布局需要使用table 标签把一块区域圈起来 ，化为布局区域，可以指定大小等,页面的内容应该放在<td> 标签内。
代码1：
<table width="500" height="500" border="1"> <tr> <td> 这是一个table 布局 </td> </tr> </table>
代码1就在页面上布置了一个单元格，显示在了页面左上角。
如果我想把页面居中显示怎么办呢？方法就是在外层嵌套一个table ，然后把这个table 放在外层table 的td 单元格中，设置单元格对齐样式为居中。
代码2：
<table width="100%" border="1"> <tr> <td align="center" valign="middle"> <table width="500" height="500" border="1"> <tr> <td> 这是使用table 布局。 </td> </tr> </table> </td> </tr> </table>
另外一个常用的就是合并单元格：包括横着合并和竖着合并。使用colspan 和rowspan 实现。
代码3：
<table width="100%" border="1"> <tr> <td align="center" valign="middle" > <table width="300" height="300" border="1"> <tr> <td colspan="2"> 这是使用table 布局。 </td> <td> 这是使用table 布局。 </td> </tr> <tr> <td> 这是使用table 布局。 </td> <td rowspan="2"> 这是使用table 布局。 </td> <td> 这是使用table 布局。 </td> </tr> <tr> <td> 这是使用table 布局。 </td> <td> 这是使用table 布局。 </td> </tr> </table> </td> </tr> </table>
colspan="2"指定了该单元格占两列位置。
rowspan="2" 指定了该单元格占两行位置。
经过上面代码扩展，现在的表格布局效果如下图所示：
基本上复杂布局就靠表格之间的嵌套来实现，最复杂的布局甚至要几十个table 来嵌套完成。
另外表格还有很多属性和标签，设置不同的属性就能达到想要的效果。
下一篇介绍css 布局。