对DIV和Table运用的理解,大家都有不同的看法,本人看资料及自己开发的经验作如下总结,希望对迷茫的朋友有帮助!
网页布局一直是WEBpage开发人员关注的内容,从早期table构架页面到DIV再到DIV+Table,可以说我们的需求一直在变,但是目的一直没有改变。Why?,很明显从简单到复杂,再从复杂到简单;从简单运用到复杂运用;一切都是围绕需求性来做的。很多开发设计人员在从事页面布局开发的时候都要考虑到几点:布局是否合理,结构是否紧凑,是否有充分的扩展性,可读性是否强。而合理使用Table和DIV来构架我们的web是我们探讨的一个重要问题。对此要从几个不同的方位来看待:
一.定位。
首先,严格意义来说,table和div都是可用合理的布局方法,你不能否认table的价值,或者div只有优点没有缺点。可以说web架构即可以使用table也可以div。那么关键就是你对你的web需求的定位。 我们需要考虑到web页面给我们的站点会带来多大的影响。如我们的站点针对的海量的访问,海量的数据,(当然cache问题这里不讨论)那么在构架上通常会减少table使用量,尤其是大量的循环的时候,当然table也是有用的。对于复杂的站点来说,div+css有时候很难准确定义出我们所表达的内容这时候table就是很好的选择。这也是开发前要考虑的问题,在要达到开发目的的同时保证所需要的成本。同样用div+css来实现一个结构复杂的page时往往不如用一个table就能简单得搞定。
二.特性。
table和div有其各自得特征。这也意味着他们价值取向有不同,对于开发设计的人员来说很重要的。
table可以很容易建立起结构化的界面,通过table自身的参数定义,我们能把页面布局很快定义成我们所需要的效果。当然css的配合就可以相对减少。缺点就是扩展性和可读性相对较差,扩展性差表现在维护和修正上面,一个复杂的table布局的站点,她的海量页面在随着需求变化下,开发人员将一筹莫展,大量的修改需求会把web的界面开发工作彻底粉碎。可读性差,这个也是相对来说. 从web设计来说,给技术人员最大的一个障碍便是当table容器内内容过多时,使页面的加载时间增加,因为浏览器首先要加载
之前,table里的内容不会显示。也就是说,当涉及到双列或三列布局时,给技术人员制造了很大的麻烦。单单从布局上来说,表格是不具有优势的。
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,火狐浏览器对div css设置上非常挑剔,往往同一个css在2种浏览器上会有不同的结果,对开发人员来说是个可怕的问题。我们不可能对用户的浏览器进行排斥,因此只有通过在开发的时候调整我们的语法和布局方法。div要求我们严格css支持,而table可以不用考虑这么多。table的严谨在不同浏览器中得到了很好的表现。
在考虑我们的定位,特征,兼容问题后,如何布局,采用何种构架方案我想大家心里应该都很清楚了,我想说对于真正的开发者来说善用其利是最重要的理念。而不是一味偏好,或者体现自己技术能力来做开发设计工作。对于div我们可以充分发挥其灵活清晰的架构特性,配合table的严谨来实现各种webpage的需求。
分享到:
相关推荐
ps切出来的table,直接转div,转css超级方便的一款工具。
总结 css+div和table+css各自优点缺点!!
讲述div与table在设置边框时的区别
table转div工具,很棒的工具,直接把table转为div+css
Div仿制table送自定义Scrollbar支持排序,支持IE6及以上浏览器
在服务器端生成的table写到页面的一个Div中去:通过存储过程来实现 存储过程
div模拟table滚动时表头固定,兼容ie6;且table自适应,表头的列宽与表体列宽一致,即表头边框与表体边框对齐
有好多做网站和喜欢SEO的朋友都青睐把网站用DIV+CSS构建,但对于DIV+CSS技术不是很熟练的网友来说,因为考虑到网站CSS在不同兼容性等问题,重新构建一次的确很麻烦。 Table2CSS3.0的出现,让这一切工作都变得简单化...
div模拟table兼容ie620140424。table自适应,表头的列宽与表体列宽一致,即表头边框与表体边框对齐
Table to Div Tools! Just for you!
Table2CSS3.0.0完美汉化破解...成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 更新说明: 3.0.0 +增加DOM(文档对象模型)查看器,允许调整转换设置. +通用CSS前缀配置默认值"gen". +增加视频转换教学帮助
div和table在网站中的可用性比较.docx
成DIV+CSS方式的软件。 支持外部CSS,支持网页及目录批量转换。 Table2CSS在线演示视频:(演示视频为英文版本,软件为中文版本) http://www.table2css.com/demo-video 下载注意:估计软件内自带宏,安装后会被...
这个工具可以将原来table的html转换为div+css
table转换div+css 开发是table+css的话可以用此工具转换成div+css
针对table中cell或div等中得值进行html编辑和保存
能快速的将table标签转换成div+css,在网页运行时减少带宽,更迅速的出现网页。增强客户体验!
JS+CSS+DIV+Table实现C#中DataGridView控件可修改单元格的值 点击Table中的TD弹出DIV..输入值点确认就可修改TD的值
table布局网页转换为div+CSS布局的转换软件. 非常快捷方便,一转眼一个老式样table布局网页的网页就转换成div+CSS布局的了,支持绝对定位和流定位.