当前位置:园子博客 » Xhtml » 丰富表格里的标签

丰富表格里的标签

2月 26th, 2009 | Filed under Xhtml | 共有6,422次浏览

表格,一个在网页设计中比较经典的工具。曾经,表格是网页设计人最重要的布局排版手段,但是它的存在其实并不是为了布局,在WEB标准中的表格更不应该用来布局(想了解DIV布局和表格布局的区别的话,请看我以前写的文章:DIV布局和table布局的区别)。相反,对于多维数据,你应该使用table。为了使数据表格有更强的访问性,了解和使用各种构造表格的组件就很重要了。例如表格标题(< caption >)、摘要(summary 属性)和表格头部单元格(<th>)等。今天园子给大家分享的是在表格里经常用到的一些标签的用法。

caption标签的使用

<caption>标签可以为表格提供一个简短的说明,也可以当成标题看待。使用的时候,<caption>标签一定要紧接着开始的<table>标签写,默认情况下,大部分可视化浏览器显示表格标题在表格的上方中央,css里的caption-side属性用来控制表格标题显示的地方,大部分浏览器只能把表格标题显示在表格的上方或者下方,只有少部分浏览器支持左边或者右边。

summary标签的使用

<summary>与<caption>的关系有点像标题与描述一样,不过这个属性的值是不会被可视化浏览器显示。如果我们是用看的方式看表格,基本内容都可以看出来,但是使用屏幕阅读器的人就不是那么容易了,他们必须依赖<caption>和<summary>属性才能相对快速地来了解表格的内容。当然,通过<summary>可以让表格有更多方面的应用,并非仅仅只是为了满足使用屏幕阅读器的人。

tr、th、td标签的使用

<tr>用于指定表格中的一行,而<th>是指标题列,大部分浏览器都会把标题列的内容居中并以粗体显示,<td>才是表格中的单元格。<th>跟<td>这两个都是表格最重要的组成部分,它们必须存在于<tr>的子级,内容都是通过这两者来显示的。

thead、tfoot、tbody标签的使用

表格也一样有很完整的结构,它有分头部、主体部分、底部。在HTML4中,它们早已经存在了,不过一直没什么人使用它,在xhtml的时代,我们更须要学习它。尝试创建一份声明是html4 strict类型的网页,使用这样的表格:

1
2
3
4
5
6
7
8
<table>
<tr>
<th>头部</th><th>头部</th>
</tr>
<tr>
<td>内容</td><td>内容</td>
</tr>
</table>

不管是HTML还是XHTML,这几个标签都是提倡使用,非一定要用,但是使用有什么好处呢?园子个人认为有重要的几点是:

  • 减少浏览器为渲染表格时额外的检查及错误的添加,可以加速表格的显示;
  • 保持打印时表格的结构;
  • 可以为CSS提供更多的控制条件等。

有个特别要注意的地方是:它们顺序是<thead>、<tfoot>、<tbody>,先是表格头部跟底部,然后才是表格的主体内容。

colgroup、col标签的使用

有了横向的划分(thead、tfoot、tbody),自然会有纵向的划分。col用于指定基于列的表格默认属性,嵌套的col 属性将覆盖 colgroup属性,而colgroup指定表格中一列或一组列的默认属性。

  1. 静脉曲张袜
    5月 6th, 201114:47

    我一直想用个漂亮的额标签,但是不会英文。唉~~

您必须在 登录 后才能发布评论.