布局与表格布局的对比

4.6.5　CSS布局与表格布局的对比

目前互联网上最常用的布局是CSS布局和表格布局。CSS布局与传统表格(table)布局最大的区别在于:采用盒模型(div)来定位，通过盒模型的margin、padding、border等属性来控制板块的间距。而不像表格，通过表格的间距或者用无色透明的GIF图片来控制布局板块的间距。因为表格本来就是用来显示数据的而不是用来布局的。用表格布局会使得内容和样式混合在一起，并且代码出现大量的冗余，使得网页难以阅读和修改。

以下是一个用表格布局的极端的例子，在网页浏览的时候，由于其边框为0，我们是看不到边框的。如图4-3，一段看似非常普通的文本:

图4-3　复杂表格布局外观

可是在编辑状态下(这里我们用Dreamweaver 8)，可以看到这样复杂的表格布局:

对于这么复杂的表格，简单地修改单元格的内容还是可以。但是如果要修改单元格的结构，比如要增加某个地方的一行或一列，那可是一件非常困难的事情。因为表格嵌套层次太多，太复杂了。

我们可以设置一段CSS代码来简化这个表格布局要显示的内容(见图4-4):

图4-4　复杂表格布局的实质

由于使用的是类与id混合定义，这里我们假设使用第三种定义方法——外挂文件的方式定义CSS，设外挂文件为test1. css，并且就放在HTML同一层目录下。则在HTML文档中只要将CSS的导入语句:

放在HTML的head元素的内容中，则类的CSS的定义会自动对该HTML文档中所有表格生效。而对于td1，我们需要在第一列表格中加以引用:

我们可以看一下使用CSS的HTML在编辑状态下的结构(见图4-5):

图4-5　CSS布局的优越性

这里所有的代码总和仅仅为0.98 K，大概是表格布局的1/3。而且代码非常容易维护。

可以看出，用CSS布局有巨大的优势，那就是代码简洁，没有冗余，而且能够将表现与结构分离，表格需要更换样式的时候只需要将CSS文件内容更换即可。