无表布局打开新的设计前沿
有很多原因不使用表格进行布局 。 人们继续使用它们的最常见原因之一是因为使用CSS进行布局很困难。 尽管CSS脚本确实需要一条学习曲线，但当您了解如何进行CSS布局时，您可能会对它的容易程度感到惊讶。 一旦你了解到了，你将解决人们不使用CSS的第二个常见原因 - “写入表格更快”。它更快，因为你知道表格，但是一旦你学习了CSS，你可能会快接着就，随即。
浏览器支持CSS定位
所有现代浏览器都支持CSS定位。 除非您正在为Netscape 4或Internet Explorer 4构建网站，否则读者不应该在查看CSS定位的网页时遇到任何问题。
反思你如何建立一个页面
当您使用表格构建网站时，您必须以表格格式来思考。 换句话说，你正在考虑单元格，行和列。 您的网页将反映这种方法。 当您转向CSS定位设计时，您会开始考虑内容方面的内容，因为内容可以放置在布局的任何位置，甚至可以放在其他内容的顶层。
不同的网站有不同的结构。 要构建一个有效的页面，请在为其分配内容之前评估任何给定页面的结构。 示例页面可能包含五个不同的部分：
- 标题 。 横幅广告，网站名称，导航链接，文章标题以及一些其他内容的主页。
- 右栏 。 这是搜索框，广告，视频框和购物区的页面右侧。
- 内容 。 文章，博客文章或购物车的文本 - 页面的肉和土豆。
- 内嵌广告 。 内容内嵌的广告。
- 页脚 。 底部导航，作者信息，版权信息，较低的横幅广告和相关链接。
而不是将这五个元素放在一个表中，使用HTML5切片元素来定义内容的不同部分，然后使用CSS定位将内容元素放置在页面上。
识别您的内容部分
在定义了网站的不同内容区域之后，您需要将它们写入HTML。 虽然通常可以按照任意顺序放置部分，但首先放置页面最重要的部分是一个好主意。 这种方法也有助于搜索引擎优化。
为了演示定位，设想一个包含三列但没有页眉或页脚的页面。 您可以使用定位来创建您喜欢的任何类型的布局。
对于三列布局，定义三个部分：左列，右列和内容。
这些部分将使用内容的ARTICLE元素和两列的两个SECTION元素进行实例化。 一切都会有一个属性来识别它。 当你使用id属性时，你必须为每个id赋予一个唯一的名字。
定位内容
使用CSS，为您的ID'd元素定义位置。 将您的位置信息存储在如下所示的样式调用中：
#content {
}
这些元素中的内容将占用尽可能多的空间，即当前位置或页面宽度的100％。 要影响某个部分的位置而不强制为固定宽度，请更改填充或边距属性。
对于此布局，将两列设置为固定宽度，然后将它们的位置设置为绝对，以便它们不会受到HTML中找到的位置的影响。
＃left-column {
位置：绝对;
左：0;
宽度：150px;
margin-left：10px;
margin-top：20px;
颜色：＃000000;
填充：3px;
}
＃右栏{
位置：绝对;
左：80％;
top：20px;
宽度：140px;
padding-left：10px;
z-index：3;
颜色：＃000000;
填充：3px;
}
然后对于内容区域，将右侧和左侧的边距设置为使内容不会与两个外侧列重叠。
#content {
top：0px;
margin：0px 25％0 165px;
填充：3px;
颜色：＃000000;
}
使用CSS而不是HTML表格定义页面需要更多的技术技能，但是回报则来自更灵活和响应式设计，并且稍后可以更轻松地对页面进行结构调整。