div+css和table布局的讨论

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都不用！

据我知道,用table或用div都能够达到你需要的布局,这点没什么好说的, 究竟哪个方便纯属个人习惯,但有一点是不同的,从理论上来说:div中的内容是边下栽边显示,而table中的内容下载完再显示, 速度比较快的时候很难感觉差异, 但决定网速的快慢因素很多,所以用div总觉得效率高一点,也可能仅仅是一种感觉吧!!

主要是呈现的方式不同和目标不同，
就好比Table 可以看作 Office中Excel和div 好比 Office中的Word.

Div是读多少显示多少？而table是要读全所有内容元素之后才显示的。
对于一些网络带宽很低或者经常有网络问题的用户来说。如果页面全局是用Table布局的话，要读完整个页面才能显示的。所以国际性，大型网站的布局如果用Table布局显然是不合理的。

你说的DIV+CSS中国人用的最多，因为受招聘方限制，这没办法。你去看下现在市面上的招聘广告，凡是和界面美化有关的都必须是DIV+CSS，有的甚至连写BLL以及DAL的都需要了解DIV+CSS。
大家只要去看下微软一些.NET服务器控件，经过浏览器解释基本都是table，最多就是table外面包了层div 最好的优化就是混着应用。该用的地方就得用。