基于PHP和AJAX创建RSS聚合器 移动IP与DHCP、VPN等技术的比较 五招让Vista电脑更具个性化 Oracle 如何搞垮他的数据库——谈Oracle安全

div+css和table布局的讨论,欢迎拍砖!

[ 570 查看 / 100 回复 ]

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

div+css和table布局的讨论,欢迎拍砖!

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

div+css和table布局的讨论,欢迎拍砖!

没人回应啊~
TOP

div+css和table布局的讨论,欢迎拍砖!

div比table相对灵活一些,但并不是说div就一定比table好。
TOP

div+css和table布局的讨论,欢迎拍砖!

况且DIV布局的效率实在是低的很
TOP

div+css和table布局的讨论,欢迎拍砖!

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

div+css和table布局的讨论,欢迎拍砖!

最大的痛苦莫过于该别人的样式,尤其是微软的产品样式
TOP

div+css和table布局的讨论,欢迎拍砖!

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

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

div+css和table布局的讨论,欢迎拍砖!

引用

----------“从理论上来说:div中的内容是边下栽边显示,而table中的内容下载完再显示”


不敢苟同。我上面已经说了div是布局元素,table也是布局元素,为什么div是边下载边显示,table就是下载完再显示?

其实从理论上,DIV+css的速度要慢,为什么?因为下载完DIV后,浏览器还要去找相应的CSS去修饰!这个解释需要时间!

当然,table+css也一样,也需要解释,但table的布局特性可以节省一些无必要的css,所以解释的时间会相当少一些!
TOP

div+css和table布局的讨论,欢迎拍砖!

另外,我不是说大家都去table好了,我只是说能table的地方绝对不用div+css去麻烦的修饰,table用来显示数据是它的强项。当然,能用div简单的去布局,绝不用table去麻烦。
TOP

div+css和table布局的讨论,欢迎拍砖!

你必须明白div+css的基本精神之一:结构与表现的分离。
这才是目的。

并不是说什么table显示慢,或什么鼓吹的问题。

我建议你看看css zen garden的源代码。很简单的。你看一下就知道div+css的目的了。
TOP

div+css和table布局的讨论,欢迎拍砖!

楼上的,我贴子中已经说了 数据和显示 分离的问题,请你看清楚再发表看法!

TOP

div+css和table布局的讨论,欢迎拍砖!

抛开“从理论上来说:div中的内容是边下栽边显示,而table中的内容下载完再显示”这一条,
div的确要比table有点优势:
如果布局要结合动态的下拉菜单,弹出框等等,用div就有明显优势,好象table难做到这一点!!
TOP

div+css和table布局的讨论,欢迎拍砖!

各有各的特点,要看具体情况啊,当然也不排除个人习惯!
TOP

div+css和table布局的讨论,欢迎拍砖!

程序员都转行当美工了?
在.net区讨论这个?
TOP

div+css和table布局的讨论,欢迎拍砖!

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

div+css和table布局的讨论,欢迎拍砖!

顶楼主。 另外 补充:没有专业美工做css,只有用表格布局。  有美工的话,让人家发挥一下嘛。 商业网站肯定要弄漂亮点。 企业用的 CRM Erp 什么的,弄整齐就好。毕竟要是用户天天使用。花哨的东西也会看烦了。朴素就好
TOP

div+css和table布局的讨论,欢迎拍砖!

CCS+DIV布局很好用,http://www.googlebattle.com.cn,TABLELESS的布局,做测试用的,不过文字在不同分辨率显示器上会偏移的,不晓得是什么问题。。。
TOP

div+css和table布局的讨论,欢迎拍砖!

table可不是布局元素呀。楼主别搞混哦
table 是个容器,跟html的其他标签是一样的。比如h1 h2  form 之类
div可是个真正的布局元素,虽然之前table布局盛行一时,
但是现在的网站越来越复杂,不管是table还是div。做起来都很耗时
目前我了解到的div的优势就是内容与表现分离。
管理起来很方便。内容少了看不出来。当内容很多的时候。div布局就体现出优势了
你说div很繁琐。可能是对代码优化的不够吧,
而且div对seo也是有帮助的呀。table就完全不能了
个人看法。大家互相交流
TOP

div+css和table布局的讨论,欢迎拍砖!

楼上的,table不是布局元素,什么是布局元素?你说的div 其实 P <A> 都一样,都是容器,都可以当布局元素!

你把所有的DIV 都换成 P ,换成<A> ,换成TABLE都一样用。
TOP