HTML宝典(第 1 版)
2.5 表格元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

文本语义元素

链接元素

表格元素

在日常生活中,我们对表格已经非常熟悉了,表格的基本作用是用来存放数据,它是数据的二维容器,人们常常用它来记录财务数据、列车时刻表、电视节目单等。

大多数情况下,表格都是由列标题或行标题,加上数据本身构成。表格可以很复杂,不过很少需要实现特别复杂的表格,除非是具有丰富数据的网站。

一个HTML表格由 table元素来定义,表格由行组成,行又由单元格组成,单元格可以是标题单元格或数据单元格。

为了帮助访问者理解表格,可以使用 caption元素为表格定义一个标题。为了方便应用样式,通常使用 thead、tbody、tfoot 元素,将表格划分为三个逻辑部分,分别是头部、主体和尾部。还可以使用 colgroup 元素对列进行分组,使用 rowspan 和colspan 属性来合并相邻的单元格。

table

table元素用来定义表格,并通过 summary 属性定义表格的摘要。摘要用于概括整个表格的内容,它不会显示在表格上,但对浏览器可见,并为搜索引擎提供有用的信息,是SEO的重要内容,故备受SEOer的青睐。

caption

caption元素用来定义表格的标题,它可以出现在 <table> 和 </table> 标签之间的任何位置。不过,通常习惯放在表格定义的第一行,即紧跟着 <table> 标签。

尽管 caption元素不是必须的元素,但无论是对于好的编码习惯,还是搜索引擎而言,caption 都非常有用。

默认情况下,表格的标题出现在整张表格的上方,如果希望它出现在表格的下方,只需把CSS的 caption-side 属性的值设置为 bottom 即可轻松实现。

thead、tbody和tfoot

thead、tbody、tfoot 元素,用于从结构上将表格划分为几个逻辑部分,它们不会影响表格的布局,也不是必需的(不过推荐使用它们)。

一个表格中,如果包含了 thead 或 tfoot 元素,就必须至少包含一个 tbody 元素。并且,一个表格中只能包含一个 thead 或 tfoot 元素,但可以包含任意多个 tbody 元素。

thead 元素可以显式地将一行或多行标记为表格的头部,通常用来放置行或列的标题;tbody 元素用于放置所有的数据行;tfoot 元素可以显式地将一行或多行标记为表格的尾部。

在 thead、tbody 和 tfoot 元素中,都必须包含行,每个行都包含标题单元格或数据单元格,或同时包含这两种单元格。

行由 tr(table row)元素定义;标题单元格由 th(table head)元素定义,并通过 scope 属性来定义它是行标题还是列标题,取值 "row" 为行标题,取值 "col" 为列标题;数据单元格由 td(table data)元素定义,它的内容可以是任何HTML元素,如文本、图片、列表、段落、表单、水平线、表格等等。

标题单元格的内容内容默认会加粗显示,并居中对齐。数据单元格的内容按正常文档流显示,没有特殊格式。不过,可以通过CSS来设置单元格的格式。

colgroup和col

使用 tbody 和 tr 可以对整行应用样式,而很难对整列应用样式。为了解决这个问题,W3C引入了 colgroup 和 col 元素。

colgroup 元素能够使用 col 元素对表格的列进行分组,分组的目的是为了方便为整列应用样式。在 colgroup 元素内部,通过 col 元素的 span 属性指定该组所包含的列数。

遗憾的是,几乎所有浏览器都取消了对 colgroup 和 col 元素的支持。因此,在定义表格时,很少有人使用这两个元素。

其实也没什么可遗憾的,使用CSS3的 :nth-child 伪类选择器,可以非常方便地为特定的列设定样式。如,以下规则可以让第 4 列的所有单元格中的内容水平居中对齐:

td:nth-child(4) {
   text-align: center;
}

当然,IE9以下的版本并不支持CSS3,对于这些老掉牙的浏览器,只能退而求其次,还得定义单独的类或其他选择器,来特定的列设定样式。

rowspan和colspan

默认情况下,一个 th 和 td 只占据一个单元格的空间,当某个单元格需要跨越多行或多列时,可以使用 rowspan 和 colspan 属性来合并相邻的单元格。

rowspan 属性指定该单元格所跨越的行数,colspan 属性指定该单元格所跨越的列数。如,<td rowspan="3">,就表示该单元格跨越 3 行,<td colspan="3">,就表示该单元格跨越 3 列。

HTML表格就这么简单,下面是一个HTML表格的完整示例,它包含除 colgroup 和 col 之外的所有元素。代码如下:

<table summary="HTML表格示例">
<caption> HTML表格示例</caption>
<thead>
<tr>
       <th>&nbsp;</th>
       <th>th</th>
       <th>th</th>
       <th>th</th>
</tr>
</thead>
<tbody>
<tr>
       <td>tr-1</td>
       <td>td</td>
       <td>td</td>
       <td rowspan = "2">td rowspan = "2"</td>
</tr>
<tr>
       <td>tr-2</td>
       <td>td</td>
       <td>td</td>
</tr>
<tr>
       <td>tr-3</td>
       <td>td</td>
       <td colspan = "2">td colspan = "2"</td>
</tr>
</tbody>
</table>

上述代码的运行结果如图 2‑47 所示:

HTML表格示例
图2-47 HTML表格示例

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验