一、常见的方法

多列布局并不是只能由CSS实现，也可以使用表格同样实现能够根据浏览器窗口的大小而自由缩放的（流动）布局。以前，设计者会考虑到使用列来实现，每一列都由一系列表格单元格来构造。

图中显示了一个常用的布局结构，有一个页头横跨顶部、两列内容以及一个横跨底部的页脚。

常会看到与此类似的一种两列的布局结构

以前，我们似乎很自然地会使用表格来构建这种结构，用colspan这个特性使页头和页脚横跨于内容列的上方与下方。大致的 HTML代码如下所示：

header

content	sidebar
footer

但大多数的设计者和开发者不会就此罢休。构造好了基础结构以后，会在这个结构中的每一个单元格中再嵌入表格，为布局创建边界和像素级别精度的间距。最终，为了使构造的结构和页面的样式能够更加变化灵活，会添加很多HTML代码。

为了达到流动可变性，可将表单元格的宽度设成百分比形式，这使得布局可以完全扩展而不需要考虑浏览器窗口的大小。

header

content

sidebar

footer

整个表格被设置成100%的宽度，列可以根据任意需要的宽度进行拆分。如图所示：左边是一个宽一些的内容栏，右边是一个窄一些的侧边栏。当浏览器窗口扩展或收缩而使布局的大小发生变化时，各列宽度的比例将保持不变。

这表明了表格能够用来构造布局，同时也表明了表格能够用来构造随浏览器窗口变化的流动布局。然而，还可以采用其他更完美的办法做到这一点。