使用div+css布局过程中在什么时候使用table呢

所属分类: 网页制作 / CSS 阅读数: 520
收藏 0 赞 0 分享
关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路!

关于表格

  使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很多年的,用表格来排版是不明智的,表格归根截底是一种显示"数据"的方式,大家可以想象一下EXCEL,表格就是起这个使用的,有的时候信息使用表格显示让我们能清晰易读,所以才使用表格,比如公司员工联系表,产品与型号对应表等.

  那么所谓表格大餐呢,其实意见上升到了一个层次,也就是说你如果能像专业市场分析公司那样,灵活使用表格来显示客户数据和调查数据等消息的时候,那才是真正利用了表格的优势.

  所以,关于那句使用以久的话,应该改为"使用表格作为网页排版,布局页面元素是不合理的,表格是用来显示数据的".

关于其它元素

  我这里按我的使用经验,把XHTML标准中的一些元素,分为三大类:

  第一类是我称之为辅助布局设计元素:

  这里我指的是DIV,SPAN等,这类元素的主要功能是用来布局整个页面的,灵活使用这些元素的各种属性,可以让你的页面表现丰富多彩.

  第二类我称为结构化元素或叫信息元素

  这里指的是TABLE,UL,PRE,CODE类元素是一种信息显示与整理方式,比如TABLE很明显就是用来显示表格信息的,UL是用来显示列化信息的,当需要用表格或列表的时候,用这二种方式来显示是明智的

  第三类指的是A meta这样的,完全是为了实现一些功能,如填上关键字的META keyword,还有做链接的A.

  那么正确的符合标准的设计思路是:

   使用DIV等布局元素来制作页面的设计布局,定位,色块,图片等
   使用TABLE,UL等这样的元素来显示页面中需要展示数据
   当然,DIV也起整理数据的作用,使用DIV的ID属性可以很方便的将一个DIV作为一个你名命的数据块

所以使用WEB标准来制作网站,实际是一个信息合理化整合的一个过程,什么地方该用什么元素还是照用不误,别把表格当布局工具就行.
更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多