传统table布局方式实际上是利用了HTML table表格元素具有的无边框特性。由于table元素可以在显示时使得单元格格边框和间距设置为0，即不显示边框，因此可以将网页中的各个元素按版式划分放入各个表格中，从而实现复杂的排版组合。

table布局的核心在于设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及定格则通过插入图像进行占位来实现，最终的结构是一个复杂的表格，不利于设计和修改。

表格布局的代码最常见的是在HTML标签<>之间加入一些设计代码，入width="100%"，border="0"等，表格布局的混合代码就是这样编写的。大量样式设计代码混杂在表格、单元格之中，使得可读性大大降低，维护起来成本相当高。尽管Dreamweaver这样优秀的网页制作软件能帮助我们可视化的进行这些代码的编写，但是Dreamweaver永远不会智能的帮助你缩减代码或删除重复代码。

复杂的表格设计使得设计极为不易，修改更加复杂，最后生成的网页代码除了表格本身的代码，还有许多没有意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢。

而是用CSS布局则可以从根本上改变这种情况。CSS布局的重点不再放在table元素的设计中，取而代之的是HTML中的另一个元素DIV.DIV可以理解为图层或者一个“块”。DIV是一种比表格简单的元素，从语法上只有DIV简单的定义。DIV的功能仅仅是将一段信息标记出来用于后期的样式定义，这里将信息标记，就是我们前面所提到的页面的“结构”部分。通过使用DIV，我们可以将网页中的每个元素划分到每个DIV中，成为网页中的结构主体，而样式表现则有CSS来完成。

DIV在使用时不需要像表格一样通过其内容的单元格组织版式，通过CSS强大的样式定义功能可以比表格更简单更自由的来控制页面版式及样式。