Div与Table,我们应正确对待

原创 2012年04月25日 20:15:53

   近日,在着手做界面原型的设计,其中在divtable的选择上,我是换来又换去,于是对二者进行了一下比较。

 

   我的观点是两者没有好与坏的区别,而是各有所长

   在这个极度推崇div+css的时代,人们对于table有了一些偏,就我个人而言,我觉得两者是各有优点。

 

  从用途上来说,div用于布局,table用于显示数据

  当然div不仅仅用于布局,也可以用来显示数据,而table也同样可以用于布局和显示数据;这么说是因为div在布局方面应用要好一些,而table在显示表格数据方面比较好一些。

 

  为什么div的布局比table布局要好?

  div是一个轻量级的web标签,所以它代码精简,加上和css样式的结合,div布局更加美观和多样化;反之,table要死板很多,因为它本身就自带了很多格式,而我们布局不需要这些格式,于是就有些强加于人的嫌疑(强加了一些代码和格式,导致代码臃肿),而且我们也知道,table的确没有div美观。

 

  既然table有这么多缺点,那它是怎么在显示表格数据上体现优势的呢?

  说这个问题之前,我想先说一句,我认为大家对于table有一个误解,大家都知道table打开网站的速度不如div快,但是这是针对一些显示简单的数据而言,比如单纯的这是显示几个字,这是table<tr><td>就显得很多余,造成代码冗余,于是打开网页的速度自然变慢了。

 

   但是在显示表格数据时,table则正好体现出了它的优势,这时这些<tr><td>不再多余,而是必须,然而正是因为table已经为我们提供了一些基本样式的封装,所以我们也省了不少力气。

  

   再回头来说如果用div显示表格数据的情况,用div显示成表格形式,你也需要写一些类似于<tr><td>的标签,而且还要为其添加样式,这些工作就已经使得整体的代码跟table的代码量不相上下(所以两者的速度此时不相上下),但是相比来说,使用table的工作量会更少。

 

  我做了一个简单的测试,同样加载1W条数据(divtable都没有使用样式),测试页面加载时间(在IE9下测试),使用table结果是1.6s左右,不加样式div的结果是1.3s左右,添加样式后,即将div的样式做成表格的效果,则div的加载时间是1.6s左右。(ps:测试代码可见附件)

 

  但是我们知道div有它独特的好处,样式的可重用,美观这个是需要table来借鉴的,所以我比较支持两者一起使用,在table中添加div,将两者的优点都发挥出来,达到双赢。 

 

  当然,除了上面的两点,divtable还有它们各自其他的优缺点,下面我们来看一下这二者都有什么优缺点:

div

优点:

  1.轻量级、代码精简,div是一个轻量级的web标签(它自身所带的只有换行格式),所以它的代码精简。

  2.可重复利用样式,比如一个网页中需要用到2-3Div,用户只需在css里定义一个样式就可同时对这几个div同时添加样式。

  3.打开网页速度快,因为代码精简,所以服务器读取代码时间短,相比较table而言要快一些。

 

缺点(div也不是万能的哈):

  1.可观性差,用户在编辑的时候并不能立即看到编辑效果,需要预览才可看到效果。

  2.可读性差,网站代码几乎全是div /div"而且在代码页面看不到此样式。必须要进css样式才可看到定义样式。

  3.操作繁琐,相对于初入门的用户,对代码不是很了解的人来说,操作起来很是麻烦。

  4.兼容性差,原因是CSS(样式表)并不是所有浏览器的所有版本都支持的很好,比如在IEFireFox下显示不一致等,这也是有些时候我们使用table来进行定位的原因。

 

table:

优点:

  1.可观性好,当用户插入一个Table的时候就可以立即看到效果。

  2.简单方便,适合初入门的用户操作,用表格不需要过多了解代码,只需插入表格,然后设置长宽,对齐方式,表格属性等等。

  3.可读性好,稍懂些html语言的都可以看的懂,无非就是"table /tabletd /tdtr /tr"等等。

 

缺点:

  1.代码冗余,"table tr td /td /tr /table"这是构成一个表格的最基本元素(此为一行一列的表格)。

  2.打开网页速度慢,由于代码太多,所以导致网站打开速慢。

  3.样式死板,虽然table也可以使用css样式,但是它总是先要穿上一层自己的盔甲,显得格外的死板沉重。

 

附件下载地址:http://download.csdn.net/detail/zhaodandan19910306/4256095

相关文章推荐

正确对待外链,以及如何建设外链,根据我自己在外链建设和网站诊断中发现的。

1、正确认识外链的价值   不管搜索引擎如何发展,外部链接和搜索引擎都会紧密相连并不可分割。迄今为止,链接在google的排名所有因素中占首位,以后唯一会变动的,就是外链所占网站排名机制的比值。 ...
  • nailwl
  • nailwl
  • 2011年11月25日 15:32
  • 592

观点:如何正确对待设计模式

自从接触设计模式以来,一般看到的评论是以推崇为多。不过比较欣慰的是,最近在看《编程人生》中,有两个人对设计模式比较不屑。  之所以欣慰,并不是因为凑个热闹看他们互相攻击,互相批评——而是因为出现了不同...

正确对待来客码微信营销的市场重要性

继微博之后,微信大热,各种微信神乎其神,餐饮企业是否就该跟风而上。微信虽好,却 不是万能的,餐饮企业的老板们要看清楚、想明白,理性对待微信营销。 最近微信大热,因此常常在市场上感受到,就像当年微博最...

从AlphaGo/Master到最强大脑小度机器人——我们要怎么正确对待人工智能

去年AlphaGo以大比分战胜李世石一时间激起了一波人工智能讨论的狂潮;最近,AlphaGo改头换面以Master的身份围棋领域再次被阿尔法狗血洗,未尝一败的成绩再次震撼了人类世界。对人工智能的思考开...

正确对待大学课程

大学

如何正确对待设计模式

自从接触设计模式以来,一般看到的评论是以推崇为多。不过比较欣慰的是,最近在看《编程人生》中,有两个人对设计模式比较不屑。   之所以欣慰,并不是因为凑个热闹看他们互相攻击,互相批评——而是因为出现了...

table+div+iframe打造高度自适应的后台布局框架(需要用JS控制大小)

discuz后台用的就是这种结构,用table撑开布局,在table里写div,用于菜单栏目的布局,在主体区域用iframe,作为页面容器。 html代码: 1 2 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Div与Table,我们应正确对待
举报原因:
原因补充:

(最多只允许输入30个字)