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进行布局的页面都会出现这样的情况
,由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应,而出现留白。相比之下传统的table方式更容易规避这样情况的发生
。以上我们只是讨论某一技术在某一领域的可用性,而非技术本身。说了这么多并不是说DIV这种布局方式不好,
而是说我们应该正确的看待Table在以内容为基础的大型门户中的作用,而不是人云亦云。之所以DIV的布局方式没有在大型网站应用,
不是说门户没有用DIV是技术落后,是里面的人没有前瞻性,而是多种原因决定的。网易之所以全部采用DIV的方式是因为内容并不是他们主攻方向。
而对于其他门户来说,这样的决策是要靠时间来验证的。只是现在这个时机还不成熟而已。
分享到:
相关推荐
讲述div与table在设置边框时的区别
"table转div工具"就是为了帮助开发者将原有的基于table的布局转换成更现代、更优化的div+CSS布局。 首先,我们需要理解table和div之间的主要差异。Table元素主要用于显示结构化数据,如表格或矩阵。它的布局是固定...
标题"table转div、table转css"所指的就是这一过程,即利用特定工具将原本用表格布局的内容转化为更灵活的div+CSS布局。这种转换可以提高页面加载速度,提升用户体验,并更好地适应不同设备的显示需求。 描述中提到...
首先,我们要理解Table和Div+CSS的区别。Table是一种早期的网页布局方式,它主要用于数据展示,但在复杂的网页设计中,表格布局可能导致页面加载速度慢,且不易于调整和扩展。相比之下,Div是HTML中的一个通用容器...
本文将深入探讨如何在服务器端利用存储过程生成`table`数据,并将其嵌入到`div`容器中,以实现更灵活的页面布局。 首先,`div`(division)是HTML中的一个块级元素,它主要用于对页面内容进行分组和布局。通过CSS...
为了解决这些问题,开发者们常常选择使用CSS和JavaScript来模拟表格(Div Table)以实现更丰富的功能。本主题"Div仿制table送自定义Scrollbar支持排序"正是探讨这种技术的应用。 首先,Div仿制table是通过CSS布局...
通过组合多个 div,可以实现复杂的网页结构,而且由于样式与内容分离,改版和维护更为便捷。此外,CSS+div 的布局方式对搜索引擎友好,有利于提高网站的 SEO 排名。 然而,table 元素最初是为了展示数据而设计的,...
标题“div模拟table滚动时表头固定,兼容ie6”正是针对这一需求,描述了如何使用div元素来模拟表格的滚动,并确保在滚动过程中表头能够固定显示,同时实现列宽的自动适配,使得表头边框与表体边框对齐。 在传统的...
在网页设计领域,传统的`table`布局曾是构建网页结构的主要方式,但随着Web标准的发展,`div`结合`CSS`布局(层叠样式表)逐渐成为主流。`table`布局虽然简单易用,但在复杂性和可维护性上存在诸多问题,如不易控制...
标题"div模拟table兼容ie620140424"指出,这是一个关于在2014年时如何使用div元素来模拟table布局,并确保在IE6中达到兼容性的技术问题。描述中提到,目标是实现table的自适应功能,以及表头的列宽与表体列宽保持...
标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素,特别是DIV和Table,并且处理其中的数据。这在Web开发中非常常见,尤其是在构建交互式用户界面时。下面将详细阐述这...
"将table转换成div+css"这个主题正是针对这一转变,旨在优化网页性能,提升用户体验。下面将详细探讨这一转换过程中的关键知识点。 1. **表格(table)与CSS布局的差异** - 表格布局:HTML表格是为数据展示而设计...
Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 这个软件原来是老外做的,收费的,但是经北京采摘在线Nodody汉化破解,已经没什么限制,完全可用了。 ...
本文将探讨Div与Table在速度和加载方式、网页应用以及大型网站可用性等方面的区别。 1. 速度和加载方式的区别: - Div的加载方式是渐进式的,遇到<div>标签就开始加载内容,即使没有找到相应的</div>,内容也会...
Table2CSS3.0.0完美汉化破解...成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 更新说明: 3.0.0 +增加DOM(文档对象模型)查看器,允许调整转换设置. +通用CSS前缀配置默认值"gen". +增加视频转换教学帮助
Table to Div Tools! Just for you!
标题和描述中提到的是关于网页设计中两种常见元素——`Div`和`Table`的比较,主要关注它们在速度、加载方式以及网页应用中的差异。`Div`和`Table`在网页布局中都有其特定的用途,但在Web标准中,通常推荐使用`Div`...
在网页设计领域,"table转换div+css"是一种常见的优化网页布局的方法。表格(table)在HTML中主要用于数据展示,但其布局方式相对固定且难以调整,不适用于响应式设计和现代网页的灵活布局。而Div(division)配合...
成DIV+CSS方式的软件。 支持外部CSS,支持网页及目录批量转换。 Table2CSS在线演示视频:(演示视频为英文版本,软件为中文版本) http://www.table2css.com/demo-video 下载注意:估计软件内自带宏,安装后会被...
JS+CSS+DIV+Table实现C#中DataGridView控件可修改单元格的值 点击Table中的TD弹出DIV..输入值点确认就可修改TD的值