收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 4993|回复: 21

[讨论] 如何向别人解释DIV与TABLE的优劣

[复制链接]
发表于 2009-7-6 11:03:05 | 显示全部楼层 |阅读模式
DIV + CSS 这个称呼不知道是谁最早提出来的,然而经过这么多年大家也约定俗成了。 从DIV + CSS 诞生开始,有一些争论就没有停止过:

        “为什么要使用DIV,TABLE也可以用啊。”
        “为什么要改成DIV,DIV很容易引起布局混乱耶。”

        在设计师中也出现几个不同的论调

        1、唯table论,这一派的设计师通常工作时间都比较久,一直都用table,认为没必要改用DIV, 觉得DIV反而是一个不稳定的因素。常常让人诟病的行为是,多层嵌套TALBE,做一些1PX高度的TABLE然后设背景色,让TABLE充当分割线。

       2、唯Div论,这一派的设计师通常是这几年内接触网页设计的,认为必须使用DIV,用TABLE做 的页面都不好意思跟别人打招呼。甚至出现一种DIV偏执狂,不考虑语义,所有地方都使用DIV,连UL,LI,SPAN等统统都抛在一旁。

        3、折中论,这一派的说法是:在IE6没有消亡之前都不使用 DIV+CSS,使用DIV+TABLE也挺好不用考虑太多兼容性的问题。这是一个无奈的选择,当各大浏览器都在向W3C标准靠拢的时候,微软也在IE8中加入了这方面的支持,但软件更替有相当大的滞后性,IE6依然占据了巨大的市场份额,而为了这样一个技术失败,市场成功的作品,互联网不得不放缓脚步,等待它的消亡。

        4、理性论,这一派认为WEB设计应该向W3C标准考虑,DIV应用于布局中,TABLE做数据呈现,本身并不排斥使用TABLE,只是不把TALBE当作布局工具。但对设计师的要求最高,为了推动技术的革新,为了页面的兼容性调试,付出了太多的汗水。

        其实每一种说法都有自己的根据,我也在面临这个选择的时候犹豫过,特别是当一些资格比我老 的设计师问我这个问题时候:

        “你为什么一定要改用DIV+ CSS?TABLE也可以做到这个效果啊。"

        最初,我会说原因是DIV的结构比TABLE简单,能给页面减肥,减少嵌套,而且DIV不像TABLE 必须把内容全部加载完才能显示。

        然后,当我学习W3C标准的精神后,我开始在回答中强调 html的标签的语义,在布局结构方面 使用table是不符合语义的,TABLE这个标签应该完成的是数据呈现的工作,布局交给DIV来做就好了。在这个阶段,我常常觉得把这个技术叫做DIV+CSS真是一个愚蠢的想法,DIV只是这个技术的一部分 而不是全部。

        而现在我认为DIV +CSS并不是字面上的含义那么简单,而有两重内在含义:

       1、结构与表现分离,用DIV完成结构,用CSS控制表现,这样带来的好处非常多,DIV精简了页面,提高了灵活性。而精通CSS的设计师能避免DIV的重复嵌套,从而大大提高页面加载速度,以及站点的可以维护性。

       2、选用DIV 来配合CSS的原因,CSS 的核心是 “盒子模型”,而没有哪个标签能比DIV更好的诠释“盒子模型”的精髓,TABLE的结构过于复杂,并不能很好的做到这一点,虽然TABLE+CSS也是一种选择,但别忘了DIV还有另外一个优势,浮动层叠,而且用TABLE进行布局的网站是不能通过W3C验证的。

       其实DIV的好处还远远不止这些,例如弹性布局,用户自定义布局,DIV都展现出不可思议的灵活性,而富有语义的结构对搜索引擎的友好度也比TABLE要来的高,更不用说跨平台的应用。DIV+CSS为我们提供了一个优雅而规范的技术框架,让我们能用最少的重复劳动,完成更多更美观的页面,从而提升整个团队的效率,甚至改变长期以来网页设计师与网页程序员无法同步工作的问题。

       在我亲身经验中,使用DIV+CSS的团队,与使用TABLE+CSS的团队相比,工期缩短30%-50%。

欢迎访问我的网站,阅读更多相关内容。

[[i] 本帖最后由 heavenhao 于 2009-7-6 11:08 编辑 ]
发表于 2009-7-6 11:15:08 | 显示全部楼层
为什么要解释?

都是好标签.

让他们各司其职就行了.
回复 支持 反对

使用道具 举报

发表于 2009-7-6 11:15:46 | 显示全部楼层
我怎么感觉用div+css来做页面比用table+css做的页面要慢
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-7-6 11:19:57 | 显示全部楼层
原帖由 [i]Ncolor 于 2009/7/6 11:15 发表
为什么要解释?

都是好标签.

让他们各司其职就行了.


原因是现在有很多团队中有些人使用TABLE,有些人使用DIV,意见难以统一
所以才需要讨论
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-7-6 11:21:53 | 显示全部楼层
原帖由 [i]lzhh 于 2009/7/6 11:15 发表
我怎么感觉用div+css来做页面比用table+css做的页面要慢


如果你从PS中直接是导出HTML,而不进行优化,那可能你会觉得TABLE+CSS比较快,
但是在项目开发中,团队合作中DIV+CSS的速度优势明显优于TABLE+CSS,因为程序
员能更早的介入。
回复 支持 反对

使用道具 举报

发表于 2009-7-6 11:30:40 | 显示全部楼层
该用table就table 没必要完全DIV
回复 支持 反对

使用道具 举报

发表于 2009-7-6 16:11:27 | 显示全部楼层
刚刚学CSS没多9 原先也一直用TABLE
说一下个人感觉吧
其实一些公司用TABLE很简单
速度 个人感觉在调试阶段上要快
尤其是一些中小企业网站
在一些单子比较多的公司 速度效率在第一位
而且这部分客户对CSS与TABLE没有明确的认识 他们需要看到的就是效果
即使你说CSS优越性在高 客户也不会多加钱给你
不是每个网站都一定要过W3C的测试= =!···
回复 支持 反对

使用道具 举报

发表于 2009-7-6 16:27:52 | 显示全部楼层
解释给谁听?
回复 支持 反对

使用道具 举报

发表于 2009-7-6 16:37:49 | 显示全部楼层
解释给面试官听
回复 支持 反对

使用道具 举报

发表于 2009-7-6 17:23:00 | 显示全部楼层
原帖由 [i]heavenhao 于 2009-7-6 11:21 发表


如果你从PS中直接是导出HTML,而不进行优化,那可能你会觉得TABLE+CSS比较快,
但是在项目开发中,团队合作中DIV+CSS的速度优势明显优于TABLE+CSS,因为程序
员能更早的介入。



在项目工作中你会直接用ps导出?程序员不K你?你这个假设不成立
中小企业站,table+css 成手 不到2小时一个站 ps切图+全站全部包含页;
项目多的网络公司对于一些中小企业站,还是要求制作人员table+css; 大型平台站,行业站,优化站等会跟据客户要求及项目收益调整是用xhtml+css 还是talbe+css

但是在项目开发中,团队合作中DIV+CSS的速度优势明显优于TABLE+CSS

你这么去解释,是站不住脚的
回复 支持 反对

使用道具 举报

发表于 2009-7-7 09:16:10 | 显示全部楼层
各司其职,哪个合适就用哪个,DIV+TABLE+CSS
回复 支持 反对

使用道具 举报

发表于 2009-7-7 11:22:31 | 显示全部楼层
原帖由 [i]geminids 于 2009-7-7 09:16 发表
各司其职,哪个合适就用哪个,DIV+TABLE+CSS


支持,提高效率,减少解决烦人的兼容问题
回复 支持 反对

使用道具 举报

发表于 2009-7-7 11:43:12 | 显示全部楼层
代码整洁、易读、易维护,DIV和TABLE都可以

但是DIV+CSS整个页面代码更清晰,当然并不是什么地方都用DIV,应该像标准靠拢
回复 支持 反对

使用道具 举报

发表于 2009-7-7 13:14:26 | 显示全部楼层
div 布局
table显示复杂数据

追求 结构 表现 行为 的完全分离 ,且考虑 SEO
回复 支持 反对

使用道具 举报

发表于 2009-7-7 13:54:37 | 显示全部楼层
我来说说:

一、使用div的方式进行程序的嵌套,特别是使用php这样的代码嵌套,可以减少出现像table中那样繁重的代码,对于页面嵌套可以减少因table代码而带来的问题。

二、使用div对于设计使用AJAX等的时候,可以减少Js代码对于页面控制时候的复杂度,因为使用table的时候,层次关系最起码有三层,table-tr-td以上,而使用div则基本上只有两层(div-div)的概念。

三、用div对于页面的定位更准确,因为使用div的代码的宽度高度等都使用css或者页面的style方式控制,即在需要修改一个框(box)的大小、位置时候,可以直接修改css的代码或者该标签的style代码即可实现。而几乎不用修改其他代码,但是使用table的情况下,则可能会因为 table的位置出现变动,而影响到对整片代码的修改。

四、在页面效果来说,由于FF等浏览器再对table方面进行了很多的优化,才使得目前FF在处理页面的输出时候可以这么接近 IE的效果,但是在对于一些table的排版,用FF会存在一下莫名起码的以为等问题。这些问题在IE中可能不存在,但是在使用FF等其他引擎的浏览器就可能会出现了。

五、就是输出的代码将更小。由于使用div进行页面代码的组织,而布局由CSS等文件进行控制,因此从输出的html中产生输出的代码要一般比使用table的页面少50-70%。从系统的负载上考虑,将会更好解决因为代码上面的损耗,对维护系统的稳定起到一定的帮助。

六、更方便搜索引擎的搜索,目前的搜索引擎只是对页面的代码进行分析,因此页面代码更小而且有语意页面,搜索引擎的效能会更高,用户的文字信息会更容易被搜索引擎进行收集,对于web网站来说被将会更容易被搜索引擎所引用。

七、无可避免,在页面的一些位置,我们还是依旧使用table方式表现,比如说一些商品列表,订单列表,提交表单等,我们依旧使用table的方式来实现,因为对于这样的表格表现形式,使用div实现时候还不太成熟。

八、最后W3C标准是目前网站开发的主流,作为专业的web开发团队,哪有理由不使用这种技术呢!
回复 支持 反对

使用道具 举报

发表于 2009-7-7 14:15:00 | 显示全部楼层

..........

我觉得DIV的最大优势就是它的扩展性,TABLE没得比的
回复 支持 反对

使用道具 举报

发表于 2009-7-8 16:51:20 | 显示全部楼层
原帖由 [i]singlesoho 于 2009-7-7 13:14 发表
div 布局
table显示复杂数据

追求 结构 表现 行为 的完全分离 ,且考虑 SEO

同意!那些大型门户还是有用TABLE的!
回复 支持 反对

使用道具 举报

发表于 2009-7-8 17:19:53 | 显示全部楼层
都09年了

这么解释吧:你看人家都不用table了,都改用div+css了
回复 支持 反对

使用道具 举报

发表于 2009-7-8 17:31:50 | 显示全部楼层
新学的,不知道用table怎么做网页
回复 支持 反对

使用道具 举报

发表于 2009-7-9 14:45:17 | 显示全部楼层
一般正规的项目要有基准的吧,把那条写上去,不就意见统一了?

各司其职:兼容性,还有 css/js要写在独立的文件里,而且要避免重复
回复 支持 反对

使用道具 举报

发表于 2009-7-10 14:57:54 | 显示全部楼层
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td></td>
  </tr>
</table>
____________________________________
<div></div>
——————DIV多简单  写点CSS就完事了

个人支持div+table+css。
回复 支持 反对

使用道具 举报

发表于 2009-7-12 00:30:05 | 显示全部楼层

这个还需要讨论讨论研究研究

使用DIV+CSS的团队,与使用TABLE+CSS的团队相比,工期缩短30%-50%----????

这个有必要讨论讨论研究研究
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2020-2-26 19:10 , Processed in 0.109099 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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