Css和Table布局的区别

基于Web标准的网站设计的核心在于如何使用众多Web标准中的各项技术来达到表现与内容的分离，即网站的结构、表现、行为三者分离。只有真正实现了结构分离的网页设计，才是真正意上的符合Web标准的网页设计。不排除为了达到表现与内容分离，以后将诞生更多的新技术与结构。这里推荐使用XHtml，以更严谨的语言编写结构，并使用Css来完成网页的布局表现，因此掌握基于Css的网页布局方式，是实现Web标准的基础环节。

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

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

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

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

而使用Css布局则可以从根本上改变这种情况。Css布局的重点不再放在Table元素的设计中，取而代之的是Html中的另一个元素Div。Div可以理解为图层或一个“块”。Div是一种比表格简单的元素，从语法上只有<div>开始及</div>结束这样一个简单的定义。Div的功能仅仅是将一段信息标记出来用于后期的样式定义，这里的将信息标记，就是我们一直说的网页的“结构”部分。通过使用Div我们可以将网页中的各个元素划分到各个Div中，成为网页中的结构主体，而样式表现则由Css来完成。

Div在使用时不需要像表格一样通过其内部的单元格来组织版式，通过Css强大的样式定义功能就可以做到比表格更简单更自由地来控制页面的版式及样式。终上所述Css和Table布局的区别在哪，大家应该有所了解了吧！