div和table的区别

作者&投稿:父詹 (若有异议请与网页底部的电邮联系)
div和table相比较有什么优势又有什么劣势~

1:速度和加载方式方面的区别
div 的加载方式是即读即加载,遇到 没有遇到 的时候一样加载 div 中的内容,读多少加载多少;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%。



劣势:table布局规避了许多浏览器不兼容的问题。而DIV则必须面对这些问题。

DIV的特点就是没有属性,本身就是一个抽象的块级容器,之所以有不很多人喜欢用这个东西就是高度可定制性,同时也有利于贯彻盒模型和DOM的设计模式,但滥用DIV会导致维护困难、兼容性差等问题,因为不同的浏览器对CSS解析不一样,离开CSS,DIV什么也不是。

Table就是表格,表格的特点就是表格,你也可以对表格用CSS,表格嵌套多了浏览器渲染速度慢,但一般来说表格标签成熟、浏览器支持好、框架稳固,不会出现元素满屏幕乱飞的诡异现象,缺点当然就是死板,定制自由度低。

总的设计建议就是不要过度偏执于某一种模式,W3C没有废弃table,还是可以独当一面的。

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并不是字面上的含义那么简单,而有两重内在含义:
4.1、结构与表现分离,用DIV完成结构,用CSS控制表现,这样带来的好处非常多,DIV精简了页面,提高了灵活性。而精通CSS的设计师能避免DIV的重复嵌套,从而大大提高页面加载速度,以及站点的可以维护性。
4.2、选用DIV 来配合CSS的原因,CSS 的核心是 “盒子模型”,而没有哪个标签能比DIV更好的诠释“盒子模型”的精髓,TABLE的结构过于复杂,并不能很好的做到这一点,虽然TABLE+CSS也是一种选择,但别忘了DIV还有另外一个优势,浮动层叠,而且用TABLE进行布局的网站是不能通过W3C验证的。
其实DIV的好处还远远不止这些,例如弹性布局,用户自定义布局,DIV都展现出不可思议的灵活性,而富有语义的结构对搜索引擎的友好度也比TABLE要来的高,更不用说跨平台的应用。DIV+CSS为我们提供了一个优雅而规范的技术框架,让我们能用最少的重复劳动,完成更多更美观的页面,从而提升整个团队的效率,甚至改变长期以来网页设计师与网页程序员无法同步工作的问题。


SQL求助 我有2条记录,有一个字段的值不一样 我现在想查询的时候
用case when 大致如下 select case when count(*)=0 then (select col from tab where colid=otherid) else col end col from tab where colid=paraid 只能取一列,取多列需要多个case when paraid为你的参数,otherid为另一行的标识 其实这个用存储过程就简单了,if else 既可 ...

明星资料
风尘三侠 1993 饰 Table for Six 女客 夜半1点钟(奇缘II之辫子姑娘)1995 饰 阿芝 孟波1996 饰 ...6、壹号皇庭IV 监制 邓特希 其他演员 欧阳震华、陈秀雯、陶大宇、林保怡、邓萃雯、苏永康、谭耀文、陈

关于美国常春藤英语解说
Ivy的来源是这样的:最初常春藤联盟只包括哈佛、耶鲁、哥伦比亚和普林斯顿4所大学,而4的罗马数字恰好为“IV”,在其后加一个y即成Ivy,意思就是常春藤,因此“常春藤联盟”由此而来。2、什么是“常春藤盟校”?美国常春藤大学包括哪几所高校?常春藤通常也被叫做常青藤,因此常春藤盟校也就是常青藤盟校,现在它一共包含8所...

怎么判断A、E、I、O、U是开音节还是闭音节。
如:no[+u], he[i:], table[ei]。 2. 在含有一个元音字母的重读音节中,在元音字母后有一个辅音字母(r除外)与一个不发音的字母e,也是开音节。这个元音字母发它本身的音。如:name[ei], fine[ai]。 闭音节含有一个元音字母,并以辅音字母(r, w除外)结尾的重读音节为闭音节。 元音字母...

求世界所有国家民主程度的排名!
美国和北朝鲜都是第一,只是北朝鲜是倒数第一

宣萱今年多大了
6、壹号皇庭IV File of Justice IV 角色名 程若晖(阿Sam)首播时间 1995年9月11日 7、天降奇缘 A Good Match from Heaven 角色名 洪丝丝(红娘)首播时间 1995年10月30日 另注:1995年TVB台庆剧,公认的Jessica上位作品。8、天地男儿 Cold Blood Warm Heart 角色名 张雪凝 首播时间 1996年2月...

四年级的英语单词有哪些?
sofa:['səufə]沙发shelf:[ʃelf]书架fridge:[fridʒ]冰箱table:['teibl]桌子 they:[ðei]他们aren’t=arenotthey’re=theyarekey:[ki:]钥匙 open:['əupən]打开look:[luk]看please:[pli:z]请on在……上面 no不;不是window:['wind&#...

求解英语第IV题。 急
Give some books to me.Which glasses do you want?I want the one on the table.Please give me two watches.I want those blue ones.

电视剧斗鱼2里面扮演南部老大洪虎的演员有谁知道?
《警察故事 IV:简单任务 Jing cha gu shi IV: Jian dan ren wu 》 (1996) ...Hong Kong Policeman 《电影故事 Dian ying gu shi 》 (1996) ...Chun 《麻雀飞龙 Ma qiao fei long 》 (1996) ...Naam Tin Lung 《赤子威龙\/父子武状元\/给爸爸的信 Gei ba ba de xin 》 (1995) .....

plsql中如何实现这种需求?IN相关,数组相关,高分
你声明一个临时表, 把需要的字段加进去,然后用select语句吧需要包含在IN 里面的内容用insert 添加到临时表。这样, 这个临时表相当于一个数据集, 或者一个数组,你可以简单而且反复的调用里面的数据进行比较!

吕梁市17017523877: DIV和TABLE的差别 -
贰利恒邦: DIV的特点就是没有属性,本身就是一个抽象的块级容器,之所以有不很多人喜欢用这个东西就是高度可定制性,同时也有利于贯彻盒模型和DOM的设计模式,但滥用DIV会导致维护困难、兼容性差等问题,因为不同的浏览器对CSS解析不一样,离开CSS,DIV什么也不是.Table就是表格,表格的特点就是表格,你也可以对表格用CSS,表格嵌套多了浏览器渲染速度慢,但一般来说表格标签成熟、浏览器支持好、框架稳固,不会出现元素满屏幕乱飞的诡异现象,缺点当然就是死板,定制自由度低.总的设计建议就是不要过度偏执于某一种模式,W3C没有废弃table,还是可以独当一面的.

吕梁市17017523877: div与table的区别 -
贰利恒邦: div的html代码少,但是css设置代码多,排列不好,据说兼容性没table好.table排序挺好,兼容性强,但在html的代码太多,看上去有点乱. 好像,div用做大框,table写小框.

吕梁市17017523877: div布局和table布局有什么不同? -
贰利恒邦: div更灵活,定位比table要好使简单,修改起来也方便,比如我定义一个区域显示在屏幕(300,200)的位置,用div会很简单,table就繁琐了,现在网页的整体布局都用div了;但是展示信息还是用table比较简单,比如显示课程表如果有div实现会建立许多div,很麻烦,谁也无法取代谁,各有利弊

吕梁市17017523877: 网页设计,标签div与table有什么不同? -
贰利恒邦: 使用div+css的目的是: 1、内容和形式分离. 2、改版网站简单,直接修改css. 3、精简代码,搜索引擎优化良好.而table也回到最根本的意图:那就是表单.div+css用来排版(盒子模型) table作为辅助吧.

吕梁市17017523877: table和div的区别
贰利恒邦: 属于不同的 html 元素 div是 块级元素 table则是表格

吕梁市17017523877: table 与div有什么区别?它们相比之下的优缺点有哪些?求详细一点的说明!
贰利恒邦: 1:速度和加载方式方面的区别div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的:div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少;...

吕梁市17017523877: div和table设计网页有什么区别
贰利恒邦: div是框架结构,table是表格结构,div适合做大布局,table适合做局部设计

吕梁市17017523877: 网站的DIV和表格 有什么区别? -
贰利恒邦: 说的学术一些,html不应该含有布局信息 html应该是文档化,结构化的 样式应该交给css来控制 这才是web标准的真实面目 不能错误的解读为div+css就是一种新的布局方式

吕梁市17017523877: CSS+DIV与Table+DIV有什么区别吗? -
贰利恒邦: div和table只不过是两个不同的HTML标签而以,talbe必须和tr td一起出现,而DIV可以单独出现,它没有任何默认样式.在以前的老是布局中很多人会运用table来布局,table布局非常容易操作,但是它也有很大的不便,修改不灵活.由于CSS的...

吕梁市17017523877: 在网页布局时,表格和布局表格有什么不同? -
贰利恒邦: 所说的表格通常是指table,布局表格就是把网页的整体布局通过表格实现,但是不推荐使用表格,div+css是一个比较流行的布局方式.

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网