从Table向Css过渡的优缺点比较

CSS布局提倡者的声音正被"表格布局的优点"的声音所覆盖。一个荒诞的说法是CSS是难学的。事实上，CSS一点也不比其他网页技术难。问题在于：对于表格设计已经相当有经验的web设计师不得不完全放弃他们的思维模式改用CSS方法。

我曾经用表格布局设计过许多年，当我第一次开始使用CSS布局时，我也遇到了问题。"用表格多简单呀"我想。但是，那只是因为我已经用惯了表格，我知道如何巧妙的处理它们。任何改变，哪怕是小小的一点，都会让我觉得麻烦，更不用说这么激烈的变化。

回忆起我第一次学习用表格布局，同样有一大堆的问题困绕着我。回头想想那些rowspans, colspans以及空白的GIF图片，公平的说这两种布局方法，用表格布局更加难些。

另一个陈旧的观点是：CSS设计的页面(字节数)非常大，比表格设计的页面大。理由是：因为你将整个站点所有的样式都放在一个文件里，当用户访问一个页面，包含整个站点样式的样式表都需要下载，因此页面非常大。

那么为什么你要将所有样式都放在一个CSS文件里？没有人限制你只能用一个CSS文件，你完全可以为某部分章节的细节样式设立单独的子样式表文件。在我的经验里，从简单的手册型站点到大型的数据库驱动，多功能的系统网站，我从来没有只用过单独一个样式表文件，没有一个首页的代码比用表格设计的多。那些table,tr,td标签占据了大量空间，立刻行动起来吧，用CSS布局方法将你的文件尺寸猛砍下来。

当你用表格布局时，你失去了标签本身的语意。web标准方法布局分离了内容和表现层将带来巨大的好处。当你用表格锁定了你的设计，一旦你需要改变它，你必须找到这个页面，然后再分析出表格结构，再一页一页修改，而CSS文件可以简单的改变整个站点的设计。用CSS你根本无须考虑设备无关性，无须考虑用户选择他们自己的样式。

还听说一个表格的"好处":设计forms。但是forms可以用任何方法实现表格排列。是为了Netscape4? 我从来没听说过支持这么老的浏览器是一个理由。大部分主流浏览器的用户利益远远大于少数的用不支持样式表的浏览器的用户的利益(先不说CSS也支持纯文本)。

那些"超级表格"支持者的观点归结起来就是一点："表格更容易。"这是胡说！如果你满足于一个低效率的方法，那随你的便。如果你想突破限制，使页面内容更加通用、易用，代码更加少，那就努力转变吧。当然如果你是新学网页设计，从头开始，你就不会有这些问题。

"小车不倒只管推","这只是设计师工具箱里的工具而已。"这是一些讨论者的观点。表格布局象一把老式的木头柄螺丝起子，你可以仍旧使用它来钻进一面墙。而我宁愿使用电动的螺丝起子，CSS布局更加高效，不会让我的手再起水泡。

赞 (0)

相关推荐

  • 从Table向Css过渡的优缺点比较

    CSS布局提倡者的声音正被"表格布局的优点"的声音所覆盖.一个荒诞的说法是CSS是难学的.事实上,CSS一点也不比其他网页技术难.问题在于:对于表格设计已经相当有经验的web设计师不得不完全放弃他们的思维模式改用CSS方法. 我曾经用表格布局设计过许多年,当我第一次开始使用CSS布局时,我也遇到了问题."用表格多简单呀"我想.但是,那只是因为我已经用惯了表格,我知道如何巧妙的处理它们.任何改变,哪怕是小小的一点,都会让我觉得麻烦,更不用说这么激烈的变化. 回忆起我第

  • Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)

    以一个toggle按钮控制p元素显隐为例,如果不使用过渡效果,则如下所示 <div id="demo"> <button v-on:click="show = !show">Toggle</button> <p v-if="show">蓝色理想</p> </div> <script> new Vue({ el: '#demo', data: { show: tru

  • 如何利用vue实现css过渡和动画

    如何利用vue实现css过渡和动画

    目录 一.过渡和动画的区别 二.使用Vue实现基础得css过渡与动画 1. 动画 2. 过渡 三.使用transition标签实现单元素/组件的过渡和动画效果 1. transition 的基本介绍 2. transition 的过渡class 3. 过渡示例 4. 动画示例 5. transition的name属性 6. 自定义过渡类名 7.同时设置过渡和动画 8. duration属性 9. 使用js实现动画 四.组件和元素切换动画的实现 五.列表动画 六.状态动画 总结 一.过渡和动画的区

  • 详解Vue学习笔记进阶篇之列表过渡及其他

    详解Vue学习笔记进阶篇之列表过渡及其他

    本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现. 列表过渡 目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group>组件.在我们深入例子之前,先了解关于这个组件的几个特点: 不同于 <transition>, 它会以一个真实元素呈现:默认为一个<span>.你也可以通过 tag 特性更换为其他元素. 内部元素 总是需要 提供唯一的

  • Vue.js每天必学之过渡与动画

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作. 为了应用过渡效果,需要在目标元素上使用 transition 特性: <div v-if="show" transition="my-transition"></div> transition 特性可以与下面资

  • javascript css在IE和Firefox中区别分析

    一.document.formName.item("itemName") 问题  问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

  • Bootstrap Table服务器分页与在线编辑应用总结

    Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据的起止时间,查询一定时间范围的数据.在线编辑功能通过扩展Bootstrap Table实现,使用X-editable实现. Bootstrap Table有两种使用方式: 1.对普通的 table 设置 data 属性: 2.通过JavaScript 来启用 Bootstrap Table 插件.

  • SpringMVC+bootstrap table实例详解

    SpringMVC+bootstrap table实例详解

    bootstrap-table下载地址:https://github.com/wenzhixin/bootstrap-table/ 先来看一张效果图: 下载下来后,需要导入的css:由于需要bootstrap的支持,所以需要导入bootstrap的css <!-- Bootstrap --> <link href="${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external no

  • 用CSS实现表单form布局

    出处:http://blog.donews.com/dodo/archive/2005/06/18/434979.aspx 在TABLE布局中设计Form,一般都是用2个td来布局,如果不用table,用CSS怎么做呢?看看下面的代码 <style type="text/css"> label{float: left;width: 80px;}form{margin:0px}input{width: 180px;border:1px solid #808080} texta

  • Jquery 实现table样式的设定

    上一篇我们使用jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看<锋利的Jquery>,说实话正在看了.由于正在学习中,我就想把项目中经常要用的jquery效果自己写成通用方法,可以在大家的帮助下完善这些方法,也可以让不会的了解到一种做法,最后形成自己的Jquery 方法库,方便以后的使用,这些例子都是我自己写的,没有参考,所以有很多地方需要改进. 1:为什么要写这个方法 在项目中,一些table都要设置样式,为了样式的

随机推荐