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

DIV+CSS和Table区别

众所周知,这(DIV+CSS和Table)两种语句都经常被开发人员使用了来控制界面显示,但是这两种语法也有很大的不同,下面分别从这两种语句的优缺点进行分析: 一、制作效率 我想...
  • lurao
  • lurao
  • 2016年05月11日 23:27
  • 2736

DIV+CSS和TABLE的区别

现在全国大大小小的网站都在搞一场技术“革命”,就是所谓“网站重构”说简单点就是DIV+CSS进行网站制作。用DIV+CSS代替传统的Table制作框架和美化页面。百度搜索优化     在重构之前,...
  • wangboxian
  • wangboxian
  • 2012年05月24日 19:24
  • 5091

table和div的比较

其实并不是div比table快,只是div有些优点会使它“快”过table。 1、div可以下载一个显示一个,而table要完整下载才能显示。 2、div可以用更少的div来排版。 原因...
  • cpp_lzth
  • cpp_lzth
  • 2012年03月06日 10:06
  • 6511

table 转换成div的代码

  • lieri111
  • lieri111
  • 2010年04月27日 09:05
  • 3579

js 向 div 动态 添加 内容 table

/** * @author heardy * @time 2011/02/11 * @version 1.0 */ 设置style="height:28px" 预留位置...
  • heardy
  • heardy
  • 2011年02月11日 10:58
  • 14173

HTML中div标签与table标签组合使用问题

 1.div标签直接包容tr标签:语法检测通过,但div不生效。例如,对于如下代码,table的内容还会在页面上显示出来。Code highlighting produced by Actipro C...
  • xuezini1955
  • xuezini1955
  • 2007年11月29日 10:57
  • 5341

html div和table的嵌套

标签可以写在外面,也可以写在里面. 但是不能写在外,来控制批量的 可以使用的class属性进行操作...
  • xufan601391682
  • xufan601391682
  • 2017年11月06日 12:05
  • 127

DIV+CSS布局和Table布局对比

转自:http://www.toutiao.com/i6429288122151862786/ 虽然目前大多数网页都是采用的DIV+CSS布局的方式,但是也有少数的老式Web网页采用的是Ta...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017年06月14日 19:42
  • 628

在一个div里放一个table,如果不设置border="0" cellpadding="0" cellspacing="0",当table 的高和宽与div相等时,会超出div

在一个div里放一个table,如果不设置border="0" cellpadding="0" cellspacing="0",当table 的高和宽与div相等时,会超出div...
  • dotNET25
  • dotNET25
  • 2013年11月19日 15:21
  • 3064

防止div被里边的table撑大

style type="text/css">   .tabWordBreak{table-layout:fixed;word-wrap:break-word;word-break:break-all...
  • zhushouchen
  • zhushouchen
  • 2015年10月30日 15:00
  • 915
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Div与Table,我们应正确对待
举报原因:
原因补充:

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