Div与table的区别

我会带着你远行 2021-09-12 05:42 373阅读 0赞

看了几篇描述div和table区别的文章分享出来。

原文地址http://www.cnblogs.com/liuyudong0825/p/4776993.html

div与table用作布局的区别

本文向大家描述一下DIV和Table页面布局的区别和联系，一般来说Table开发快，容易控制，浏览器兼容也好些，另一部分认为DIV好，是以后的发展趋势，主要原因请看下文详细介绍。  
  
  
DIV布局和Table页面布局的区别和联系  
  
  
现在对于网页制作是选择传统的Table还是用新型的DIV，有分歧。一部分说还是用Table好，开发快，容易控制，浏览器兼容也好些;另一部分认为DIV好，以后的发展趋势,主要是如下原因：  
  
  
DIV+CSS布局比Table布局节省页面代码，代码结构也更清晰明了。  
  
  
DIV+CSS开发速度要比Table快，而且布局更精确，不过手写代码明显增加DIV+CSS布局，使网站版面布局修改变的更简单。  
  
  
DIV+CSS布局能够适应未来多种客户端需求。  
  
  
DIV+CSS布局节约站点所占空间和站点流量。这些都是DIV的好处。  
  
  
DIV有这么多好处是不是有些心动，决定学它。DIV布局和Table各有长处，通常情况下它们可以互换使用。  
  
  
我感觉正确的符合标准的设计思路是：使用DIV等布局元素来制作页面的设计布局，定位，色块，图片等。使用Table，UL等这样的元素来显示页面中需要展示的数据。因为DIV不会像Table一样，在IE下要将整个Table下载完后才全部显示内容(firefox不会)，所以用Table来布局显然是不合适的，尤其是数据量大时，在IE下用Table会发现慢的多。而DIV就好多了。当然,DIV也起整理数据的作用。  
  
  
DIV用于布局，Table用于显示数据，这是现在最基本的设计原则。  
  
  
1：Table里可以内嵌DIV。反之DIV可以内嵌Table吗??  
  
  
当然可以了。  
  
  
◆DIV定义  
  
  
表示一块可显示HTML的区域。  
  
  
SpecifiesacontainerthatrendersHTML.  
  
  
注释  
  
  
此元素在InternetExplorer3.0及以上版本的HTML中可用，在InternetExplorer4.0及以上版本的脚本中可用。  
  
  
此元素是块元素。  
  
  
此元素需要关闭标签。  
  
  
示例代码  
  
  
下面的例子使用了两个DIV元素对两段文字进行了不同的对齐处理。  
  
  
<DIV>   
此文本代表一段。可以在这里放你的HTML或文本    
</DIV>   
<DIVALIGNDIVALIGNDIVALIGNDIVALIGNDIVALIGNDIVALIGNDIVALIGNDIVALIGN=CENTER>   
此文本代表另外一段，其中文本居中显示。    
</DIV>   
   
DIV本身就是容器性质的，你不但可以内嵌Table还可以内嵌文本和其它的HTML代码。  
  
  
2:DIV是不是跟Table一样的作用?  
  
  
DIV的作用跟Table是差不多的，但是DIV对xml的支持更好而且使用起来比较灵活，因此被推荐为新的网页布局方式。  
  
  
3:DIVTable哪个速度快?

DIV相对比较快，网页内容的显示需要将相对一整块的内容下载完成后再显示。使用DIV布局是许多的独立的相对较小的范围，而使用Table布局一般都会表格嵌套多层形成较大的下载范围。

Div与table的区别  
原文地址：http://www.cnblogs.com/lovebear/archive/2012/04/18/2456081.html  
  
1：速度和加载方式方面的区别  
  
  
div 和 table 的差异不是速度，而是加载方式，速度只能是指网络速度，如果速度足够快，是没有差异的：  
  
  
div 的加载方式是即读即加载，遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容，读多少加载多少；table 的加载方式是完成后加载，遇到 <table> 后，在读到 </table> 之前，table 中的内容不加载，或者传输中断了(document.onload()事件)的时候加载，这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,IE才知道该怎么显示  
  
  
2：在网页应用中的差别  
  
  
如果页面首尾加 table ，那么必须等整个页面读完了才加载  
  
  
如果页面首尾加 div ，无任何影响  
  
  
   
  
  
3：DIV与Table布局在大型网站的可用性比较  
  
  
DIV与TABLE本身并不存在什么优缺点，所谓web标准只是推荐的是正确的使用标签，好比说:DIV用于布局，而TABLE则本来就是转二维数据的。让TABLE做该做的事，并不是说页面里不出现TABLE就是多么多么牛。  
  
  
用DIV进行排版的优势就是我不说，大家应该都比较清楚。DIV是标准，是大势所趋，但并不意味着所有的页面都适合用它来做。  
  
  
中国的门户和国外的有很大的区别，中国网民并不喜欢信息量少的页面，YAHOO到了中国页面上的内容就多了不少，而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改了回来。正式由于中国的国情造就了搜狐、新浪这样门户。  
  
  
为什么DIV不适合他们?下面我从几个方面来逐一说明:  
  
  
精简代码:  
  
  
大家都说DIV的布局精简代码，但是用DIV替代TABLE所节约的代码又被CSS(样式)所占用，而这些样式大多用于控制DIV的排版布局。那你会说了，CSS可以放在外部重用啊，要想得到这个问题的答案请往下看。  
  
  
重用性与下载量:  
  
  
统一使用一个.css的样式表文件，可以实现修改一次，全站修改的效果，这样使得维护的成本更低。但是请大家换一个角度想，如果所有页面在加载时都要访问一个文件，那这个文件每天的下载量，特别时在搜狐、新浪的网站平台上将达到几亿次，这就需要后面有很多台前端web服务器在做支撑，那后台的成本无形中也提高了很多。如果后台支撑没有做好，那么页面就会出现花屏，之前所作的工作也是白费。很多人会问，这样的几率太小了。我们所作的工作就是为了避 免这一两次意外的发生，如果意外发生了，对于门户后果将是不堪设想的。  
  
  
HTTP通讯:  
  
  
统一的样式表文件采用外部调用的形式，这样每次加载单个页面都会多一次对服务器的http请求服务器都会增加一次响应，这样对前端web服务器 会是很大的消耗。而原来很长时间都是将css和js写在页面前端(大家可以看看sohu和sina的页面，大多都是采用这样的形式)，而不是作为外部调用 的形式，也是为了尽量避免给服务器增加消耗。  
  
  
页面缓存:  
  
  
每次用户访问的页面，都会在浏览器缓存中保存一定时间，以保证用户下次再访问该页面时能够大大提高页面显示速度。而每次修改都会使页面重新下载，对于每个外部导入的样式文件也是如此，如果CSS文件修改，那么访问网站的每一个页面都会重新下载，而以往的将样式写在页面中的方式，只是修改的页面需要重新下载。  
  
  
兼容性:  
  
  
对于CSS(样式表)并不是所有浏览器的所有版本都支持的很好，比如IE5以前的浏览器对于CSS的支持就不是很好。而现在使用IE5以前版本 浏览器的用户不在少数，这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试，以保证兼容性，无形中也增加很多工作量(至少我接触的开发人员制作 div页面比table页面的标准时间要长一些)。  
  
  
横切与延展性:  
  
  
横切——传统的布局方式为了使页面下载的更快，把页面自上而下分成若干个块，但是往往采用DIV进行布局的页面都会出现这样的情况，由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应，而出现留白。  
  
  
以上我们只是讨论某一技术在某一领域的可用性，而非技术本身。  
  
  
说了这么多并不是说DIV这种布局方式不好，而是说我们应该正确的看待Table在以内容为基础的大型门户中的作用，而不是人云亦云。之所以 DIV的布局方式没有在大型网站应用，不是说门户没有用DIV是技术落后，是里面的人没有前瞻性，而是多种原因决定的。网易之所以全部采用DIV的方式是因为内容并不是他们主攻方向。而对于其他门户来说，这样的决策是要靠时间来验证的。只是现在这个时机还不成熟而已。  
  
  
   
  
  
4:DIV+CSS  
  
  
而现在我认为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%。