浅析div+css与表格布局的区别

avatar
avatar
jtxadmin
441
文章
0
评论
2018年8月23日14:46:07 评论 264 1494字阅读4分58秒

这是个老话题。每当谈起Web标准,CSS布局与表格布局哪种更优呢?CSS布局可以很简单实现网站换肤,CSS布局可以让网页一边载入一边显示,CSS布局可以让网页变得更小。CSS布局可以…。CSS布局的确在很多方法都不错,可是,当你直正使用上CSS布局时,你会发现原来CSs布局会有很多缺点的,例如:当你需要一个百分比减去一个固定宽度时。你必须添加额外的嵌套层,必须使用上margin的负位,通过取巧的方式来完成:当你要完成普通的垂直居中时,为了让某个浏览器兼容,你甚至必须利用浏览器的bug来完成。然而这个如果使用表格布局都可以很简单的完成。那为什么还有这么多人选择学习CSS布局呢?下面小编就来分析一下。

CSS布局的优缺点
以前我们使用表格布局时井不足没遇到问题,而是问题在我们看不到的情况下已经给可视化编辑器解决了,CSS不会像以前用表格的时候那样.只从简单的下拉几下就行,CSS面对的更多是手写代码.如果你以前做的方式改成手写的方式完成,你猜多少人能很好的完成呢?
CSS布局不算新技术。最多只能称新应用,就像AJAX一样,两者的核心技术都有多年的历史,它们只是在应用流行起来时才会给关注,也许不久以后,会有这样一种可视化编辑器,可以用“拉”的方式创建己经做好兼容的CSS布局,就像我们以前“拉“表格来布局一样,让我们期待吧!使用CSS布局在提高用户体验方面也是起着重要作用的。

但是CSS布局会遇到很多的浏览器兼容的问题是,CSS就出现了一个大问题,要兼容三四个浏览器,调整CSS是很困难的,但是如果使用table就会很好的处理浏览器这个兼容的问题。当你要完成普通的垂直居中时,为了让某个浏览器兼容,你甚至必须利用浏览器的bug来完成。

浅析div+css与表格布局的区别

表格布局的优缺点 Table的布局容易上手,可以形成复杂的变化,简单快速,表现上更加“严谨”,在不同的浏览器中都能得到很好的兼容。但是如果你的网站有布局变化的需要时,这样table的布局就会重新设计,再加table分行分列什么的,页面变化的比例会稍大一些,这就会影响你前期做好一些排名和搜索基础了,div就不同了,你可以把大部分更新的东东写在CSS里,页面的布局和改动不会太大,也就对搜索引擎的影响不大了。

浅析div+css与表格布局的区别

CSS布局与表格布局本质区别
1. CSS表现基于结构控制布局。
2. 表格属于结构叠加结构控制布局。

CSS布局与表格布局的联系
曾经尝试表格与CSS配合的混合布局,干净的表格做大布局.用CSS控制外观和表现.在两者中寻找平衡点,打造一个最优解决方案.然而网站这东西并不是一次性的产品,在之后的维护发现,有些变化一定要修改表格的结构才能完成。当结构发生变化时,表现也会受影响,有时足很大的彭响,几乎所有相关的CSS都要修改。这样仅仅是把以前传统的做法做了个大优化,并不像纯CSS布局那样自由,或者说是不可持续发展。
表格存在的意义就是显示数据内容,只是我们以前对于它并不了解,可视化编转器造就了一批优秀的网页设计师也毁灭了一批网页设计师。可视化编批器可以让人在不了解网站的情况下制作网站,就像我以前在读大学时那位负责网贞设计这门课的老师一样,他会用Dreamweaver教人做网贞,可他连HTML都不知道,我并不是说以前的书籍误人,因为我们也是一路转变过来的。就像是电视机出现了,收音机淘汰掉。但是不能因为收音机被淘汰就说曾今为收音机的发展而努力的那批人是误人的。

浅析div+css与表格布局的区别

总结
小编建议随着html的发展,我们要学会顺应发展好,还要学会承接以前的历史。虽然现在div+css已经成为主流,但是表格的制作也要懂一些,在解决一些兼容性的问题面前,往往表格起到很大的作用。

继续阅读
weinxin
我的微信
这是我的微信扫一扫
avatar
  • 本文由 发表于 2018年8月23日14:46:07
4个很有深意的哲理故事「荐读」 工作随笔

4个很有深意的哲理故事「荐读」

NO.1 一滴墨汁落在一杯清水里,这杯水立即变色,不能喝了;一滴墨汁融在大海里,大海依然是蔚蓝色的大海。为什么?因为两者的肚量不一样!不熟的麦穗直刺刺地向上挺着,成熟的麦穗低垂着头。为什么?因为两者的...
4个很有深意的哲理故事,让人反思 工作随笔

4个很有深意的哲理故事,让人反思

NO.1 小鸡问母鸡:可否不用下蛋,带我出去玩啊?母鸡道:不行,我要工作!小鸡说:可你已经下了这么多蛋了!母鸡意味深长地对小鸡说:一天一个蛋,菜刀靠边站,一月不生蛋,高压锅里见。 存在是因为你创造价值...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: