当前位置:园子博客 » 网页标准 » DIV布局和table布局的区别

DIV布局和table布局的区别

1月 9th, 2009 | Filed under 网页标准 | 共有15,909次浏览

基于WEB标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为三者分离。只有真正实现了结构分离的网页设计,才是真正意义符合web标准的网页设计。

传统table布局方式实际上是利用了HTML table表格元素具有无边框特性,由于table元素可以在显示时使得单元格的边框和间距设置为0,即不显示边框,因此可以将网页中的各个元素按版式划分放入表格的各个单元格中,从而实现复杂的排版组合。table布局的核心在于设计一个能满足版式要求的表格结构,将内容装入每个单元格中,间距及定格则通过gif进行占位来实现,最终的结构是一个复杂的表格,不利于设计与修改。

表格布局代码最常见的是在HTML标签<>之间嵌入一些设计代码,如width=“100%”,border=“0”等,表格布局的混合式代码就是这样编写的,大量样式设计代码混合在表格,单元格之间,使得可读性大大降低,维护起来成本也相当高,尽管现在有像Dreamweaver这样优秀的软件能帮我们可视化的进行这些代码的编写,而又经验的网页设计师都知道,Dreamweaver永远不会智能地帮你缩减代码或是重用代码,只有你需要什么,它帮你写入什么样式,最终结果是表格中到处留下设计的足迹,混合代码也由此而成。

复杂表格设计使得设计极为不易,修改更为复杂,最后生成的网页代码除了表格本身的代码,还有许多无意义的透明gif占位图及其他元素,文件量庞大,最终导致浏览器下载及解析速度变慢。而使用css 布局则可以从根本上改变这种情况。CSS布局的重点不再放在table元素的设计中,取而代之的是HTML中的另一个元素div,div可以理解为图层或是一个“块”,div是一种比表格简单的元素,从语法上只有<div>开始以及</div>结束这样一个简单的定义,div的功能仅仅是用于将一段信息给标记出来用于后期的样式定义,这里将信息标记,就是我们前面所提到的网页的“结构”部分,通过div的使用,我们可以将网页中的各个元素划分到各个div中,成为网页中的结构体,而样式表现则由CSS来完成。

还有个很重要的区别就是div在使用时不需要像表格一样通过其内部的单元格来组织版式,通过CSS强大的样式定义功能可以比表格更简单更自由的来控制页面版式及样式。

我们来看一个代码示例:
xhtml部分:
<div class =”content”>[……内容……]</div>
表示页面中定义了一个div并使用content这个class名称:
CSS部分:
#content {
float:right   /*表示div在页面中出现在右侧,右对齐;*/
margin-top:10px;      /*表示div居上有10像素的上边距;*/
margin-right:20px;   /*同上,表示外边距;*/
margin-bottom:10px;    /*同上,表示下外边距;*/
margin-left:10px; /*同上,表示左外边距;*/
background-color:blue;   /*表示对象里的文字居中显示;*/
text-align:center; /*表示对象里的文字居中显示;*/
line-height:160%; /*表示对象中的文字行高为原高的160%;*/
width:50%;/*表示这个对象的宽度为页面的50%;*/
}

.content {}区域表示在CSS中定义了一个名为content的样式,用于对页面中所有class为content的对象(此处应用content的元素是div)进行样式控制。HTML中只保留了div标签的内容,所有的样式设计代码均在CSS文件编写,这也就实现了CSS布局的第一个目标——表现与内容分离。

从样式设计角度来看,CSS对当前名为content的div定义了许多属性,如上边距(margin-top)、浮动方式(float)、背景色(background-color)、文本对齐方式(text-align)等样式,这些样式有些在HTML标签中可以直接实现,而类似上边距(margin-top)等设计形式则是HTML本身不具备。不仅如此,这套代码可以应用到所有使用class=“content”的div或其他对象使用,充分提高代码利用率,效率大大提高。这样无论对于设计者的代码重用率还是后期维护成本都有显著的改善。

  1. 9月 14th, 201220:18

    有一行错了哦
    background-color:blue; /*表示对象所在容器的背景色;*/

  2. 御泥坊
    10月 23rd, 201018:04

    呵呵 最近在学CSS 感觉不是很顺手啊 还在用DW练习中

您必须在 登录 后才能发布评论.