DIV布局和Table布局的区别

本文和大家重点讨论一下DIV布局和Table布局的区别，DIV可以理解成一个块，是有个比表格简单的元素，从语法上只有<div></div>这样简单的定义。

DIV布局和Table布局的区别

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

表格布局的代码最常见的是在HTML标签之间嵌入一些设计代码，如width=100%,border=0等。表格布局的混乱代码就是这样编写的，大量样式年设计代码混杂在表格，单元格中，使得可读性大大降低，维护起来成本也相当高，尽管有类似于Dreamweaver（以下简单称dw）这样可视化的界面进行编写，只要你需要什么，他帮你写入什么样式，最终结果是表格中到处留下设计的足迹，混合式代码也由此而成。

DIV可以理解成一个块，是有个比表格简单的元素，从语法上只有<div></div>这样简单的定义。DIV***的好处就是样式是由CSS来控制。

但总体上而言：

1.DIV+CSS布局比Table布局节省页面代码，代码结构也更清晰明了.

2.DIV+CSS的页面对搜索引擎支持好，而且速度更快了,能够比Table更加快速的显示网站内容.

3.DIV+CSS布局使网站版面布局修改变的更简单,因为版面代码都写在独立的css文件里修改起来方便多了,不象Table要在页面中修改很多信息.

页面中：

 
 
 

  
  
  
<divclassdivclass=\"style2\"></div>//表示调class名为style2的样式。  
  
  
  
 
 
 
 

也可以这样写 

 
 
 

  
  
  
<dividdivid=\"style2\"></div>不过CSS表示就有所不同了。  
  
  
  
 
 
 
 

CSS代码： 

 
 
 

  
  
  
.style2{  
  
  
  
width:800px;//宽度  
  
  
  
height:100%;//高度  
  
  
  
margin:0pxauto;//页面边距离，  
  
  
  
如margin-top：10px表示上边距为10像素,这里是为自动  
  
  
  
margin-bottom:20px;//下边距  
  
  
  
border:1pxsolid#9BDF70;//边框  
  
  
  
background-color:#F0FBEB//背景色  
  
  
  
}  
  
  
  
(在样式指定为divid=的时候必须这样写)  
  
  
  
#style2{……  
 
 
 

***种写法明显可以提高代码重用率。
 

【编辑推荐】

1. DIV和table页面布局的区别和联系
2. CSS层叠与继承用法手册
3. DIV布局规范中CSS类及id命名方式
4. DIV+CSS中border和clear属性用法剖析
5. 将XHTML+CSS页面转换为打印机页面技巧