页面用div与用table定位的区别汇总！

页面用div与用table定位的区别汇总！

2010年01月07日 星期四 10:04

【转】页面用div与用table定位的 区别 汇总！2008年09月28日 星期日 13:04 div布局和table布局的最重要区别在于“分离”两字 1.页面布局的块分离——不同区域显示不同的内容，其中一个有改变， div对其他块的影响很小，table则有可能产生“联动”，令外观改变 当然也可以分成很多小table的“块”，但这样做比起div只是徒增麻烦 2.代码分离——html里面的“l”是language，无论你用什么软件辅助设计，它最终还是一种语言的依归，所以无可避免就是写代码的规范；基于上述第一点div能把不同功能的“块”的代码各自分离，对代码的简洁规范有绝对帮助 3.前后台分离——从第二点引申，table制作的网页，交给后台编程人员加入php/jsp/asp什么的代码后，页面就成型，前台人员就很难更改样式，不需要更改程序进行二次设计基本属不可能 div因为代码分离清晰，所以有多次设计的可能 4.岗位分离——曾经看过某人的博客，上说“web2.0的发展其实就是网络大分工的发展”， 从上面几点可以看到，前后台分离、数据库与编程分离（这个在较早已经实现）、网站制作与网站架设分离，令工作分工更细致，团体工作效率更高。 举个简单的例子： 假设163.com的首页，新闻部、体育部、娱乐部……都需要同时更改首页内容 你觉得用一个大table布局的网页容易改还是div布局的网页容易改？ 又比如google的个性化首页，table布局做这个…… 如果你将来学到xml+xslt对这些感受会更深 当然，如果一个人包揽从硬件/linux/apache/php/sql/html以及网站推广的话，完全可以忽略上述观点，布什说过“独裁的管理绝对是效率最高的”（语指萨达姆）…… 不是div与table的比较了。 而是网站标准web standard和传统作网站方法比较了。概念要清洗 web standard推崇地是内容与样式和行为分析。 分成三步实现网站标准化： 一、结构（以div span == 无语义标签布局，ul li p h1 pre语义标签修饰文本和图片。视频和音乐用object标签，如果显示数据就用table，数据表格就是用来显示数据的)； 二、表现css； 三、行为javascript； 结构与表现分离，这样分工明确，可以让编辑更注专注于内容，设计者关注样式，程序员关注行为。并不是每个人都可以做超人的了。分工细致才能提高整体团队地效率。 对于访问者来讲，他们注重于看到地结果，而不在乎我们是如何实现的。不能因为客户没有需求，就自己停止前进了。 如果可以做到结构内容与表现样式分离，table也一样可以用来布局。不是不可的了，只是我们在使用table的时候，最好清楚这个标签地语义就是用来表现数据的 其实并不是div比table快，只是div有些优点会使它“快”过table。 1、div可以下载一个显示一个，而table要完整下载才能显示。 2、div可以用更少的div来排版。 和webpage打交道起页面布局就一直是我关注的内容，从早期table构架页面到DIV再到DIV＋Table，可以说我们的需求一直在变，但是目 的一直没有改变。为什么这么说，很明显从简单到复杂，再从复杂到简单；从简单运用到复杂运用；一切都是围绕需求性来做的。很多开发设计人员在从事页面布局 开发的时候都要考虑到几点：布局是否合理，结构是否紧凑，是否有充分的扩展性，可读性是否强。而合理使用Table和DIV来构架我们的web是我们探讨 的一个重要问题。对此要从几个不同的方位来看待： 一. 定位 首先，严格意义来说，table和div都是可用合理的布局方法，你不能否认table的价值，或者div只有优点没有缺点。可以说web架构即可以使用table也可以div。那么关键就是你对你的web需求的定位。 我们需要考虑到web页面给我们的site会带来多大的影响。如我们的site针对的海量的访问，海量的数据，（当然cache问题这里不讨论）那么在 构架上通常会减少table使用量，尤其是大量的循环的时候，当然table也是有用的。对于复杂的site来说，div+css有时候很难准确定义出我 们所表达的内容这时候table就是很好的选择。这也是开发前要考虑的问题，在要达到开发目的的同时保证所需要的成本。同样用div+css来实现一个结 构复杂的page时往往不如用一个table就能简单得搞定。 二. 特性 table和div有其各自得特征。这也意味着他们价值取向有不同，对于开发设计的人员来说很重要的。 table可以很容易建立起结构化的界面，通过table自身的参数定义，我们能把页面布局很快定义成我们所需要的效果。当然css的配合就可以相对减 少。缺点就是扩展性和可读性相对较差，扩展性差表现在维护和修正上面，一个复杂的table布局的site，她的海量页面在随着需求变化下，开发人员将一 筹莫展，大量的修改需求会把web的界面开发工作彻底粉碎。可读性差，这个也是相对来说，来看个例子：我们用同一效果table和div来显示一个 page －－－－table－－－－ －－－－table－－－－ －－－－div 1－－－－ －－－－div 1－－－－ －－－－div 2－－－－ －－－－div 2－－－－ ... table在表现上更加“严谨”，有局限性。在表现复杂的结构时会非常难懂。往往我们的website的程序内容又十分庞大，对开发人员来说要把代码马上从头脑中有清晰的轮廓十分不易。 div呢，在html语法中我们知道div的含有和作用，如果用它来实现布局页面的话，几乎完全要靠css来支撑，可以说div不能单独使用，尤其是针 对性强的web，给用户视觉上的效果要求十分严格，div的使用要配合专业的css参数来实现。从前面的例子可以看出div布局更加灵活，能简单也能够复 杂。相同的显示效果在css和div的配合上可以产生不同的搭配方式。扩展性强是她的优点，开发设计人员只要对相应的css做调整就能让布局焕然一新，这 点是table远远不及的。但在对结构相对复杂的局部，往往div+css开发难度高，一个简单效果div和css要写半天，这点table就好很多了， 用dw之类的所见即所得的软件下我们可以轻易做出用div+css写半天才能做出的东西。 三. 兼容 这是每个website的一个重要课题，浏览器的兼容问题。table和div在兼容问题中，table更具有优势。 我们常用的ie，ff浏览器对div css设置上非常挑剔，往往同一个css在2种浏览器上会有不同的结果，对开发人员来说是个可怕的问题。我们不可 能对用户的浏览器进行排斥，因此只有通过在开发的时候调整我们的语法和布局方法。div要求我们严格css支持，而table可以不用考虑这么多。 table的严谨在不同浏览器中得到了很好的表现。 在考虑我们的定位，特征，兼容问题后，如何布局，采用何种构架方案我想大家心里应 该都很清楚了，我想说对于真正的开发者来说善用其利是最重要的理念。而不是一味偏好，或者体现自己技术能力来做开发设计工作。对于div我们可以充分发挥 其灵活清晰的架构特性，配合table的严谨来实现各种webpage的需求。 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的ID属性可以很方便的将一个DIV作为一个你名命的数据块。 该文章出自《Deeka-Blog》,原文链接：http://www.deeka.cn/read.php/78.htm 转载时间是: 2008-09-28 10:47:45 请保留此链接，谢谢！