• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS 使用table布局网页是不明智

CSS 使用table布局网页是不明智

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含table,布局网页等相关知识,佚名 希望在学习及工作中可以帮助到您
使用Table布局页面为什么是不明智的?
大家看到标题,不要误解认为在页面中不能使用Table,而是可以使用Table,但是尽量不要用Table去布局页面,为什么这么说呢,因为使用Table布局页面会使页面失去灵活性,怎么个灵活法呢,比如今天你好不容易做出来的页面,第二天老板说我不喜欢登录模块放到右边,还是放到左边,通知板块放到右侧去,页面风格最好一个月换一种,如果遇到这种老板,提出这种要求,并且你的页面是用Table布局的,那么你会崩溃的,工作量那是大大滴~,如果不相信的话,你们自己可以找个页面,用Table布局出来,然后变换板块和风格,你就会体会到Table布局的不灵活性,这是为什么呢,因为Table的诞生是为存储数据用的,功能和Execel差不多,不是用来布局用的,只不过后来大家发现用Table可以把想放的页面元素,比如图片,放到任何自己想放的地方,且做出来的页面可以兼容多种浏览器,于是Table就承担起了布局页面的重担,这一做就是好几年... ...直到Web2.0时代的到来,Table才从布局页面的工作中逐渐解脱,专心的去存储数据^_^

    既然Table是为存储数据诞生的,那谁的诞生是为了页面布局呢?
    答案就是:DIV,DIV就是为布局页面而诞生的,只不过一直不被人认同,原因就是DIV去布局页面需要CSS的配合,使用比较繁琐,还不如Table拖拖拽拽页面就布局OK了,感觉还不如Table方便,从而DIV被人们放置在一个无人问津的昏暗角落里,暗暗的等待着伯乐的出现,直到2003年美国加州Scott Design公司参加了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲,使DIV看到了阳光,走出了阴霾... ...

    说了那么多,我们对比一下Table布局页面和DIV布局页面的优缺点
网上有一篇文章,转过来,文章着重介绍DIV三点优势,也许看完文章后,就像社区元老heflyaway说的感觉作者比较迷恋Table,每篇文章都不可避免的带有个人色彩,而转出来的目的,其实就是想给大家降降DIV+CSS的温度,免得“走火入魔”,视DIV+CSS是为万能的,如果想学好CSS布局页面,就要从多个方面看它,好了,不多说了,下面是作者对CSS布局页面的三点优势及理解:
    第一点、内容和形式分离
网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。
这个是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左右大小。


    第二点,改版网站更简单容易了
不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版。
DIV+CSS对于门户网站来说改版就像换件衣服一样简单容易,改版时,不用改动全站HTML页面,只需要重新写CSS,再用新CSS覆盖以前的CSS就可以实现改版了。方便吧。

    第三点,搜索引擎更友好,确实能够对SEO起到一定的帮助。
通过DIV+CSS对网页的布局,可以让一些重要的链接、文字信息,优先让搜索引擎蜘蛛爬取。这对于SEO也有帮助。

综上所述,个人感觉DIV+CSS不能太迷信它的很好很强大,它作为制作网页,美化网页的一个重要辅助是很强大方便的。可以弥补table制作框架和表格时的很多不足和美工上的缺点,但是完全只用它来做,太费时费力,对于全国中小型网站长来说,真的不太适合。我个人觉得用table+DIV+CSS是最好的组合,也是最省时省力的办法。

还需要再说明一下,本节讲得是Table布局页面和CSS布局页面的问题,讨论的是“布局页面”上用谁更好,并不是说在CSS布局的页面内不能用Table,真正厉害的人物是DIV、Table、CSS用得恰到好处,他们三个各做各的事情,DIV布局页面,Table存储数据,CSS给页面穿衣服!

您可能想查找下面的文章:

  • CSS中的table-cell属性使用实例教程
  • 使用CSS的table-cell属性实现左图右文的排版方法详解
  • table-cell完成左侧定宽,右侧定宽及左右定宽等布局的实现方法
  • Div+CSS对HTML的table表格定位用法实例
  • 不用table而实现等分DIV的方法
  • CSS:Table-cell属性的妙用让div也能享受table定位的好处
  • 利用CSS生成精美细线Table表格无需复杂style代码
  • 实现div垂直居中的display:table-cell方法示例介绍
  • CSS样式简单实现Table没有外边框只有内边框
  • table表格某一td内容太多导致样式混乱的解决方案

相关文章

  • 2017-08-06火狐在用offsetHeight获取div的高度时为0的解决方法
  • 2017-08-06css自动换行 防止撑破div影响排版
  • 2017-08-06纯css3制作网站后台管理面板
  • 2017-08-06下拉菜单select样式设置(兼容IE6/IE7/IE8/火狐)
  • 2017-08-06div等浮层在IE6下被下拉框遮挡的解决方法
  • 2017-08-06css 图片变黑白效果 使用CSS将图片转换成黑白的
  • 2017-08-06详解CSS五种方式实现Footer置底
  • 2017-08-06抽屉式导航的设计更能让用户专注于核心的功能
  • 2017-08-06CSS3感应鼠标的背景闪烁和图片缩放动画效果
  • 2017-08-06CSS选择器学习攻略

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 纯CSS打造兼容各种浏览器的几何图形打包
    • 浅谈css元素居中
    • CSS样式表中继承关系的空格与不空格
    • 当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同
    • 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
    • CSS3制作酷炫的三维相册效果
    • css3新增颜色表示方式分享
    • CSS 表单元素不继承body的字体属性
    • 超棒的跨浏览器纯CSS动画实现 Animate.css使用方法
    • css3背景图片透明叠加属性cross-fade简介及用法实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有