日期:2014-05-20  浏览次数:20443 次

div+css和table布局的讨论,欢迎拍砖!
其实从本身来讲,这两种布局没有差异,原因很简单,DIV是一种元素容器,table也是一种元素容器,两者能有什么差别呢,真有差别的话也只是table多了个<tr>和<td>。

但DIV可以加CSS,table一样可以加CSS。

那么,为什么现在人们如此鼓吹div+css,一味排斥传统的table布局呢,我觉得,无非是两种种情况。

1: 设计师用table布局就过于依赖table,而不用css,但这只能说作为设计人员的问题,不能说是table布局的错!

2: 人们追逐潮流,一味虚荣、比较的心态!


下面我就针对第2个问题,来探讨下div+css和table布局的优劣。

首先,说速度。

这是一味鼓吹div+css的人最善于比较的。难道table布局速度真的就慢?

当然不是,我们知道,我们打开一个网址,实际上是去一个远程服务器上取得一个文件,那么在带宽有限的情况,决定速度的唯一问题就是获取文件的大小,文件越大,传输时间越长!

一旦文件下载完成到本地,浏览器打开网页都是一瞬间的,以现在电脑CPU的处理速度,可以说再复杂的表格嵌套,那么有10层,也是在一瞬间打开。再者而且难道div就没有嵌套了吗?可以毫不怀疑的说,用table有多少嵌套,div也要有多少嵌套。只不过还是上面所说的table多了一个<tr>和<td>,

看似页面文件字节是大了些。但是不要忘了纯粹的div要大量的css去修饰,css也是要占用字节的。

就拿一个简单的例子说,目前的垂直居中对于所有的浏览器来说,table的td的垂直居中都是通用的。显示上不会有任何差别。但是如果用DIV就累的要死,ie6+ie7+ff都不相同。想法设法弄好几个DIV才能去实现通用。

那么,在此我不禁想table如此简单的居中,为什么非要用div去呢,这有人又会说了,为了数据和显示分离呗!

OK,下面,说这个数据和显示分离!

首先,我说明我的观点,简单的网页,数据和显示可以分离,但复杂的网页,像门户类的,那么琐碎,那么精细!根本无法分离!
但需要更换美工页面,可以肯定的说,需要花费的力气不会比table+css少,绝不会像传说种那样随便动动css就可以了。

下面我举一个例子来说明。

就像通常用的圆角矩形,有人说div+css我就可以首先,好,你是怎么实现的,无非也就是弄4个块状布局元素放在4角,然后用css去修饰嘛,你只不过是用文本去作了一个圆角,但,你的数据和显示还是相互黏贴在一起,这实现了数据和显示的分离了吗?这和表格用4个角作背景图片有什么差别呢?

完全跟table是一个思路!!!只是实现方式的差别!

而且这种方式并不万能的,稍微复杂一点的圆角怎么弄,我想要带阴影,而且要外带发光的圆角,有办法吗?没有,还是要用table的方式去实现。

而如果你要想真正的实现 数据和显示 完全的分离,你大可以把这 一整个圆角矩形,用做一个css类的背景图片(这样做的代码又违背了节省带宽的初衷)。然后把这个类应用到div上,这才叫真正的分离,但这和用到table,也或者是段落P标记上有什么差别呢,还是说,只不过是table多了一个tr,td,但是还是说,那么垂直居中的问题就能累死你!

所以,真正的数据和显示分离。是要把一切的显示效果都做成背静图片,才能完全分类。但对于门户网站这样琐碎的、页面和显示耦合性如此紧密的页面,估计很难!

真正优化的方式应该div+table+css,而不是一个table都不用!


------解决方案--------------------
div比table相对灵活一些,但并不是说div就一定比table好。