新手站长论坛

 找回密码
 注册会员

QQ登录

只需一步,快速开始

阿里云优惠                阿里云1折活动进行中                 免费领取阿里云代金券800元
查看: 3519|回复: 19

div+css和table布局的讨论

  [复制链接]
发表于 2010-3-28 10:08 | 显示全部楼层 |阅读模式
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 最好的优化就是混着应用。该用的地方就得用。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2010-11-24 14:52 | 显示全部楼层
学习中……
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2010-12-2 09:37 | 显示全部楼层
谢谢
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2010-12-3 09:35 | 显示全部楼层
顶一个。  支持老大哈。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2010-12-3 09:36 | 显示全部楼层
老大,我的网站有一个CSS错误,能不能帮我解决呢?
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-3-15 10:43 | 显示全部楼层
学习中 不错 很好的教程
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-5-29 15:34 | 显示全部楼层
顶一下,不错不错....
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-6-8 16:52 | 显示全部楼层
现在都用div+css似乎 table已经很少有人用
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-6-11 17:50 | 显示全部楼层
看看下, 这个不懂。。。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-8-5 09:52 | 显示全部楼层
不要等待机会,而要创造机会。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-8-18 11:29 | 显示全部楼层
好的支持了先

欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-11-14 17:24 | 显示全部楼层

说得不错,有收获,顶一下

有收获!!非常感谢您!
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-11-15 15:44 | 显示全部楼层
本帖最后由 xxjx888 于 2011-11-15 15:52 编辑

教程看的再多,不如自己实践操作,确实是这样的
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-11-15 17:25 | 显示全部楼层
大家有什么好看法,赶快说说
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-11-17 14:56 | 显示全部楼层
默默等等楼下的回复
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-11-17 15:12 | 显示全部楼层
table可控性不如css,但操作方便
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-11-23 15:57 | 显示全部楼层
都会了 想用哪个用那个
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-1-10 16:45 | 显示全部楼层
我就来看看,顶顶贴!!
此贴必火,不解释~~~~~~~~~~
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2017-2-9 15:18 | 显示全部楼层
不错 学习中 支持
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2019-8-28 15:30 | 显示全部楼层
路过,进来看一下,支持一下楼主的分享,不错不错。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

基础教程 HTML(网页制作基础课) Dreamweaver(网页制作课程) CSS基础知识视频教程 Photoshop(作图基础课) 进阶教程 SEO教程 PHP教程 ASP教程 JavaScript
分步教程: 域名注册教程 空间购买教程 域名解析教程 网站备案教程 域名绑定教程 上传下载教程 思路方法: 菜鸟起步教程 通用建站思路 新手建站过程 本地免费空间
实例教程 Discuz(论坛) Phpwind(论坛) ECshop(网店) Shopex(网店) Dedecms(文章资讯) PHP168(文章资讯) 114la(网址导航) uchome(交友) Wordpress(博客) | 更多
特色板块: 新手站长交流(注册后即可发帖) 数据百度大课堂授课内容 cnzhanzhang学院 站长在线答疑(建站问题免费解答) 建站教程学习区 发外链 发广告 seo交流站长群

QQ|广告报价|Archiver|手机版| 新手站长网 ( 豫ICP备14019290号 )

GMT+8, 2020-10-25 07:46 , Processed in 0.084606 second(s), 21 queries .

Powered by Discuz! X1.5

Copyright © 2007-2020, yuntaokeji.com.

快速回复 返回顶部 返回列表