table布局与div布局

  DIVTABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的。让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛。

  DIV是标准,是大势所趋,但并不意味着所有的页面都适合用它来做。

  中国的门户和国外的有很大的区别,中国网民并不喜欢信息量少的页面,YAHOO到了中国页面上的内容就多了不少,而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改了回来。正式由于中国的国情造就了搜狐、新浪这样门户。

  为什么DIV不适合他们?下面从几个方面来逐一说明:
  精简代码:

  大家都说DIV的布局精简代码,但是用DIV替代TABLE所节约的代码又被CSS(样式)所占用,而这些样式大多用于控制DIV的排版布局。那你会说了,CSS可以放在外部重用啊,要想得到这个问题的答案请往下看。

  重用性与下载量:

  统一使用一个.css的样式表文件,可以实现修改一次,全站修改的效果,这样使得维护的成本更低。但是请大家换一个角度想,如果所有页面在加载时都要访问一个文件,那这个文件每天的下载量,特别时在搜狐、新浪的网站平台上将达到几亿次,这就需要后面有很多台前端web服务器在做支撑,那后台的成本无形中也提高了很多。如果后台支撑没有做好,那么页面就会出现花屏,之前所作的工作也是白费。很多人会问,这样的几率太小了。我们所作的工作就是为了避免这一两次意外的发生,如果意外发生了,对于门户后果将是不堪设想的。

  HTTP通讯:

  统一的样式表文件采用外部调用的形式,这样每次加载单个页面都会多一次对服务器的http请求服务器都会增加一次响应,这样对前端web服务器会是很大的消耗。而原来很长时间都是将css和js写在页面前端,而不是作为外部调用的形式,也是为了尽量避免给服务器增加消耗。

  页面缓存:

  每次用户访问的页面,都会在浏览器缓存中保存一定时间,以保证用户下次再访问该页面时能够大大提高页面显示速度。而每次修改都会使页面重新下载,对于每个外部导入的样式文件也是如此,如果CSS文件修改,那么访问网站的每一个页面都会重新下载,而以往的将样式写在页面中的方式,只是修改的页面需要重新下载。

  兼容性:

  对于CSS(样式表)并不是所有浏览器的所有版本都支持的很好,比如IE5以前的浏览器对于CSS的支持就不是很好。而现在使用IE5以前版本浏览器的用户不在少数,这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试,以保证兼容性,无形中也增加很多工作量(至少我接触的开发人员制作div页面比table页面的标准时间要长一些)。

  横切与延展性:

  横切——传统的布局方式为了使页面下载的更快,把页面自上而下分成若干个块,但是往往采用DIV进行布局的页面都会出现这样的情况,由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应,而出现留白。

  说了这么多并不是说DIV这种布局方式不好,而是说我们应该正确的看待Table在以内容为基础的大型门户中的作用,而不是人云亦云。之所以DIV的布局方式没有在大型网站应用,不是说门户没有用DIV是技术落后,是里面的人没有前瞻性,而是多种原因决定的。网易之所以全部采用DIV的方式是因为内容并不是他们主攻方向。而对于其他门户来说,这样的决策是要靠时间来验证的。只是现在这个时机还不成熟而已。

Div布局页面和Table布局页面的优缺点

一、使用Table布局带来的问题

      1、把格式数据混入你的内容中。这使得文件的大小无谓的变大,而用户访问每个页面时都必须下载一次这样的格式信息,带宽并非免费。

2、这使得重新设计现有的站点和内容极为消耗劳力

3、这还使我们保持整个站点的视觉的一致性极难,花费也极高。

4、基于表格的页面还大大降低了它对残疾人和用手机或PDA浏览者的亲和力。

二、使用Css进行网页布局的优势

     1、使你的页面载入的更快

2、降低你的流量费用

3、让你在修改设计时更有效率而代价更低

4、帮助你的站点保持视觉的一致性

5、让你的站点可以更好地搜索引擎找到

6、使你的站点对浏览者和浏览器更具亲和力

7、在世界上越来越多人采用采用Web标准时,它还能提高你的职场竞争实力。

网上有一篇文章,转过来,文章着重介绍了Div三点优势。下面是作者对Css布局页面的三点优势及理解:

1、内容和形式分离,网页前台只需要显示内容就行,形式上的美工就交给Css来处理。生成的HTML文件代码精简,更小打开更块。

2、改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动Css文件就完成了所有改版。对于门户网站来说,改版就像换衣服一样简单容易。

3、搜索引擎更友好,排名更容易考前。

    第一点、内容和形式分离

这个是Div+Css技术最显著的特点,也是CSS存在的根源。完全的颠覆现在传统(table)网页设计技术。所有现在用table制作的内容,都可以用Css来解决掉,而且解决的更完美,更强大。不需要大家再表格套表格,让生成的网页文件大小更精简,更小。table 时代,一个页面表格达到10 个以上是非常普遍的事情,但是现在用DIV+CSS,一个table 都可以不用,就完全达到之前的效果,这就直接导致网页文件大小比使用table 时减少50%-80%,更节约各位站长的硬盘空间,访问者打开网页时更快,而且用div+CSS 时,不像以往使用table 时,必须把全部table 读取完了才显示页面内容,现在是可以读一个div 就显示一个效果,大家打开网页不用等。好处真是明显而强大。这个优点的确是显著的,凡是使用传统table 建的网页,内容多的话,有时候达到30K 左右都有可能,文件打了打开时,肯定就有0.0 几秒的延迟。使用DIV+CSS,你前台打开看到的全是直接内容,CSS 文件都是导入链接的,是另一个文件,根本和HTML 文件大小没关系,这种生成的HTML 文件,一个也就10K 左右大小。

第二点、改版网站更简单容易了

     只需要重新写Css,在用新Css覆盖以前的Css就可以实现改版了。

第三点、搜索引擎更友好,确实能够对SEO起到一定的帮助

     通过Div+Css对网页的布局,可以让一些重要的链接、文字信息,优先让搜索引擎蜘蛛爬取,这对于SEO也有帮助。

table与div布局的比较

  论代码的复杂程度来说,不管table还是div都是很冗长的。css的网页比table的网页体积也许要小一点,但是复杂程度相差不大。网络访问上

css网页稍微会快点,但是总体的用户体验感觉差别不是很大。搜索引擎优化方面,我曾经用过cms数据采集,里面的程序用的HtmlParser类库解析

html网页,然后将元素中的数据用java dom转化为xml导入到数据库。这个类似蜘蛛的程序在爬行的时候table数据和div中数据爬行起来效率是一样的,

现在的大型搜索引擎不会因为div这种趋势而抛弃table我认为,如果一个网页架构的不好,不论table还是div都会被引擎所抛弃。

  但是网上的大部分人对于div+css的开发时间上是table的很多倍,而且还一个问题,网友说了,需要写很多代码用于适应不同浏览器,这个我现在

维护的公司网站在早期也有这个问题。其实这个问题是是否熟悉div的问题,如果一个熟悉div的话应该不会比table慢太多。

  "W3C规范中说Table是用来传数据的,但并没有指出Table不可以用来布局。搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。"

  “Div+CSS和Table+CSS都是合法的设计,谁更简单就用谁。根据我的经验,当你能预见你的内容的格式,对你即将加入的内容有能力完全控制其显示格式时,应当使用Div+CSS;当你即将加入的内容是不固定的,你无法预见其格式,如果不想让页面坍塌,使用Table+CSS是一种保险的做法。”

  以上2句话网友的话我是比较认同。但是不管怎么样,用css将内容和修饰分离倒是可以肯定的

时间: 2024-10-07 04:27:23

table布局与div布局的相关文章

HTML学习笔记 div布局及table布局案例 第三节 (原创)参考使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table布局</title> </head> <body marginheight="0px" marginwidth="0px"> <table width="100%&qu

HTML中table和div布局的优缺点

由于html文件中的table标签的浏览速度较慢,所以,使用嵌套表格的方法来布局网页框架会使网页浏览的速度变慢.因为table是中的内容是自适应的,为了自适应,它要计算嵌套最深的节点以满足自适应,所以有可能会有一断时间出现空白才显示.所以是会有问题的.       使用DIV的方法布局网页框架的优点:可以通过css样式给框架进行功能强大的属性设置以及给网页的局部进行任意的定位,制作出来的页面浏览速度较快,同时页面的风格可以通过修改单独的css文件进行随意的修改和更新:缺点:每个div容器都需要定

常用布局,div竖直居中

常用两列布局,多列布局和div竖直居中 body { margin: 0; padding: 0; } .w200 { width: 200px; } .mar-left200 { margin-left: 200px; } .red { background-color: red; } .middle { vertical-align: middle; } .block { width: 80%; height: 300px; border: 1px solid #eee; margin: 0

6.4 DIV布局制作淘宝首页

为了加深对DIV层布局的理解,下面就来体验一把什么是DIV层布局. 使用Dreamweaver来绘制如图1所示的层布局页面,具体操作岁骤如下: 图1 DIV层布局页面 (1) 打开Dreamweaver,新建一个空白文档. (2) 在插入栏的“布局”类别中单击“绘制层”按钮. (3) 在“文档”窗口的“设计”视图中,执行下列操作之一: ●  按下鼠标左键拖动以绘制一个层. ●  通过按住Ctrl键并按下鼠标左键进行拖动来连续绘制多个层(只要不松开Ctrl键,就可以继续绘制新的层). (4) 绘制

浅谈分析表格布局与Div+CSS布局的区别

(1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表格下载完毕后才能显示所有内容,所有表格布局浏览速度较慢[2]. (2)CSS+DIV布局 通常要实现比较精确和自适应的层布局需要设置层的样式,即用CSS控制层的位置.CSS+DIV布局采用Div来定位,通过Div的border(边框).padding(填充).margin(边界)和Float(浮动)

使用display:table使两栏布局高度相等

两栏布局大家应该经常用了,但是遇到坑爹的要两栏的高度对齐的话要怎么办呢? 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</titl

1.HTML复习(常用的标签,属性,div布局,meta)

基础不牢,地动山摇 2018-07-29 以前没有好好的学html,现在做web项目有一种无从下手的感觉,虽然有现成的页面,但是要调整一下样式,还是会遇到不少困难,还是重头再来复习一遍,编写的效率才会高些. 常用标签 p:段落标签 hr:分割线  ol 有序 ol 无序 li 列表  table 表格 tr行 td列 form 表单 span范围   br 换行 img-alt--titile(用于提示) 图像 常用属性:input控件中--text 文本  button 按钮  submit

关于css+div布局的疑问 2017-03-19

第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确到每一像素(是否含有边框像素):但是,在纸上花的草图再好再精确,也需要实际操练. 2.定位问题:明明都定位了,为什么还出现div布局混乱的现象? (未解)为什么可以通过设置margin-left/right的值为负数可以解决,但是在其他浏览器显示效果仍错误? 3.div中图片的定位,为什么按照理论设

CSS布局:div高度随窗口变化而变化(BUG会有滚动条)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS布局:div高度随窗口变化而变化</