首页 > 开发 > CSS > 正文

用CSS进行网页布局的好处

2024-07-11 08:21:46
字体:
来源:转载
供稿:网友

符合web标准的css网页布局相对于传统table布局的一些优势:

  一、代码臃肿

  首先,table里面唯一无法用css定义的属性只有cellspacing,cellpadding几个,其它属性都可以并且应当使用css,这样,剩下的,就是<table><tr><td>和<div>的对决,我相信一个动辄几十k大小的网页,即使使用了几十个table,因此多出来的代码也可以忽略不计,那些埋怨table代码臃肿的人其实该检查自己的编码习惯,能将table写得十分臃肿的人,写div相比也未必会简洁到哪里。

  代码臃肿:你至少需要写下<table><tr><td>这三个标签之后,才能开始真正的内容,另外,table的各种标签中还包含了复杂的属性定义,而div只需<div>一个标签。

  二、页面渲染性能问题

  我使用一台2004年的笔记本电脑,1.6g的cpu与1g内存,这种配置下,看不出table布局和div布局在页面渲染上有任何速度差别,其实这点差别即使有,相对网络本身的延迟也可以忽略。

  页面渲染性能问题:浏览器需要将整个表格完全读完后才会开始渲染。

  三、不利于搜索引擎优化seo

  如果你尽可能使用css而不是table的属性,前面说了,产生的代码和div的差别也不会很大,搜索引擎会歧视<table>标签吗,这种说法的依据我至今并没有找到。

  不利于搜索引擎优化:搜索引擎喜欢内容与修饰分开。

  四、可访问性差

  这是table固有的缺陷,不过多数div+css的拥趸似乎并不是基于这个原因才排斥table。

  可访问性差:屏幕朗读软件和盲文浏览器无法很好地理解table中的内容。

  五、不够语义

  语义web的含义要深远得多,并不是仅仅在table和div上纠缠,即使w3c,也并没有规定table只能用来显示表格数据,很多在table的语义上进行纠缠的人,其实不妨再等等html5,那才是真正的语义。

  不够语义(semantic):我们需要语义的web。

  本文的目的不是让你丢弃div投身table,相反,如果div能满足你的设计需要,div仍是首选,但没必要避讳table,否则会走入另外一个极端。很多使用div无法简单实现的设计,仍可以使用table,当然,不管使用什么,都应该用css将内容与修饰分离。div+css和table+css都是合法的设计,谁更简单就用谁。根据我的经验,当你能预见你的内容的格式,对你即将加入的内容有能力完全控制其显示格式时,应当使用div+css;当你即将加入的内容是不固定的,你无法预见其格式,如果不想让页面坍塌,使用table+css是一种保险的做法。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表