表格的语义与结构化 thead、tbody、scope、summary标签


大家都在学习、应用CSS布局,WEB标准的发展在现在已经是非常普及的事情了,也是大家所热门讨论的话题,我们已经离表格布局时代越来越远了。但不要否认表格在网页中的作用,表格是数据的载体,不再是以表格的方式进行布局,虽然我们不需要表格来进行网页布局了,但很多表格式的数据,还是需要表格这一形式发挥它的作用!

但是在实现表格类的数据时,也应该做到“表现与内容分离”。所建立的表格并不是在dreamweaver中设置即可。应该是建立具有语义和良好结构的HTML文档,然后表格部分的设置通过CSS进行。

结构与语义明确。数据内容与表现分离。这样才是WEB标准的宗旨所在。看最终的效果图:

                              

首先我们来熟悉几个不常用的标签thead、tbody、scope、summary,正确的使用这些标签使我们的代码具有良好的结构与语义。

thead 标签  表示HTML表头
  表格的头部thead,可以使用单独的样式定义表头,并且在打印时可以在分页的上部打印表头。

tbody 标签  表示HTML表体
浏览器显示表格时,通常是完全下载表格后,再全部显示,所以当表格很长时,可以使用tbody分段显示。

scope 属性  定义了行或列的表头
scope可以定义行或列的表头
取值
col - 定义列表头
row - 定义行表头
colgroup - 定义列组的表头信息,是column group的缩写
rowgroup - 定义行组的表头信息,是row group的缩写

 

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3