DIV+CSS和table的那些事

转载自逐浪CMS bbs.zoomla.cn



其实从本身来讲，这两种布局没有差异，原因很简单，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都不用！