14.5 CSS排版与传统的表格方式排版的分析

在学习完使用CSS的布局方法之后，再来回顾一下传统的使用表格布局的方法。实际上，在十多年前，互联网刚刚开始普及的时候，网页内容非常倚单，形式也非常单调。1997年，美国设计师David Siegel出版了一本里程碑式的网页制作指导书《Creating KillerWeb Sites》（创建杀手级网站），表明使用GIF透明间隔图像和表格可以创建出“魔鬼般迷人”的网站。

此后，使用表格布局几乎成为每一个设计师必须掌握的技术，而且Macromedia公司推出的Fireworks和Adobe公司的Photoshop等软件都提供了非常方便的自动生成表格布局的HTML代码的功能，使得这种方法更加普及。

这里简单介绍一下表格布局的原理，并与CSS布局进行一些比较。<table>标记的border属性可以设置为0，即表格可以不再显示边框以来，传统的表格排版使一直受到广大设计者的青睐；用表格划分页面的思路很简单，以左中右排版为例，只需要建立如下表格便可以轻松实现如前面“1-3-1”布局所示的排版方式，代码如下。

利用上面代码中的<table>标记就可以轻松地将整个页面划分成需要的各个模块，如果各个模块中的内容需要再划分，则可以通过再嵌套一层表格来实现。表格布局的整体思路清晰明了，无论是HTML的初学者还是熟手，制作起来都十分容易。这相对CSS排版中复杂的float和position而言无疑是很大的优势，也是目前网络上大多数网站都采用<table>标记排版的原因。

再者，由于表格中的各个单元格都是随着表格的大小自动调整的，因此表格排版不存在类似CSS排版中14.4节谈到的背景色问题，更不需要利用父表格的属性来调整。表格中块与块之间的关系十分清晰，这也是CSS排版所无法比拟的。而且表格中的<tr>和<td>等标记同样可以加入padding和border等CSS属性，简单地进行调整，更加方便易学。

表格排版也存在着各式各样的问题。首先利用表格排版的页面很难再修改或升级。像上面所示的构架，当页面制作完成后，如果希望将#left和#right的位置对调，那么表格排版的工作量相当于重新制作一个页面。而CSS排版利用float和position属性可以很轻松地移动各个块，实现让用户动态选择界面的功能。

利用表格排版的页面在下载时必须等整个表格的内容都下载完毕之后才会一次性显示出来，而利用div块的CSS排版的页面在下载时就科学得多，各个子块可以分别下载显示，从而提高了页面的下载速度，搜索引擎的排名也会因此而提高。

CSS的div排版方式使得数据与CSS文件完全分离，美工在修改页面时不需要关心任何后台操作的问题。而表格排版由于依赖各个单元格，因此美工必须在大量的后台代码中寻找排版方式。

总而言之，使用表格布局存在着大量无法克服的固有缺陷，因此当CSS布局方法通过一些先行者的探索逐渐被“驯服”以后，已经完全可以被普通的设计师所接受。

最后，总结一下CSS布局方法与表格布局方法比起来，有如下几点明显的优势。

● CSS使页面载人更快：

● CSS可以降低网站的流量费用；

● CSS使设计师在修改设计时更有效率，而代价更低；

● CSS使整个站点保持视觉的一致性；

● CSS使站点可以更好地教搜索引擎找到；

● CSS使站点对浏览者和浏览器更具亲和力；

● 在越来越多的人采用Web标准时，掌握CSS可以提高设计师的职场竞争实力。

对于CSS布局的网页应该努力实现如下要求：

● 宽度适应多列布局，并且保证页头和页脚部分能够正确昱示；

● 可以指定列宽度固定，其余列宽度自适应；lodidance.com

● 在HTML中，各列以任意顺序排列，最终效果都正确显示；

● 任意列都可以是最高的一列．且保证不会破坏布局，不会产生重叠；

● HTML和CSS都应该能够通过Web标准的验证；

● 良好的浏览器兼容性。

以上的要求中的第3条，上面的讲解中没有深入介绍，请读者自己探索，这一条原则的目的有两个：

(1) 如果页面最终效果和各列在HTML中的顺序相关，就没有真正实现内容与形式的彻底分离；

(2) 无论显示效果如何，在HTML中如果能按照内容的重要程度排列，会对网站在搜索引擎的排列很有帮助，因为搜索引擎通常更重视一个页面中前面的内容。

本章重点

本章核心的内容就是灵活地使用“绝对定位法”和”改进浮动法”，实现各种实际工作可能会遇到的布局要求。

本章几乎算是全教程最不容易理解的一章，因此如果读者希望透彻地理解和掌握本章的内容，就需要反复多实验几次，然后跟据14.3节的布局分类结构图中列出的各种分类，彻底地把它们搞清楚。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表