19. HTML 表格
- 详细资料
- 发布于 2012年9月18日
- 点击数:6008
序言
你如何使用 Web 标准来组织大量的数据呢?如果使用数量庞大的嵌套元素,将所有的数据都有序地放入行和方框中,一定会让你伤透脑筋。不过对此有一个好的解决办法,那就是使用表格。
对网页设计师来说,使用表格是将数据组织整理为表格形式的好方式。换句话说,表格、图表及其它信息图表可以帮助你阅读和处理经过整理的大量信息,让你可以对照和比较不同的数据。你在网上随时都可以看到各种表格和图表,如政治选举结果的摘要或比较、体育比赛的统计、价格比较表、尺码表等。
在互联网发展的早期,那时候 CSS 作为一种将表现从 HTML 的结构中分离出来的方法尚未得到运用,网页设计师普遍使用表格来进行页面布局,创建表格和方框等来安排页面内容的摆置。当然这是不正确的做法。使用表格进行页面布局,会使页面充斥着大量的嵌套表格和无用代码,从而导致文档体积膨胀,难于维护且难于修改。即使是现在,你都还能看到这类网站。不过你们一定要记住,应该只将表格用作其本身的用途,即把数据列入表格之中。至于页面布局,则应使用 CSS 来控制。
在本篇文章中,我将讲述如何恰当地使用 HTML 表格。本篇文章的内容目录如下:
最基本的表格
我首先以语义化的 HTML 代码编写一个最基本的表格,这个用作示例的表格列入的是,北美的太平洋地区最近火山爆发的比较数据。在我还是一个小孩子时,就喜欢火山,在我们一家人夏季去探访我祖母的旅程中,曾说服我母亲带我去看了几座火山。当时我非常希望亲眼看到某一座太平洋西北部的火山的爆发,不过未能如愿。第一个表格的代码如下所示:
<table> <tr> <td>Volcano Name</td> <td>Location</td> <td>Last Major Eruption</td> <td>Type of Eruption</td> </tr> <tr> <td>Mt. Lassen</td> <td>California</td> <td>1914-17</td> <td>Explosive Eruption</td> </tr> <tr> <td>Mt. Hood</td> <td>Oregon</td> <td>1790s</td> <td>Pyroclastic flows and Mudflows</td> </tr> <tr> <td>Mt .St. Helens</td> <td>Washington</td> <td>1980</td> <td>Explosive Eruption</td> </tr> </table>
上面的代码渲染后的样子:
Volcano Name | Location | Last Major Eruption | Type of Eruption |
Mt. Lassen | California | 1914-17 | Explosive Eruption |
Mt. Hood | Oregon | 1790s | Pyroclastic flows and Mudflows |
Mt .St. Helens | Washington | 1980 | Explosive Eruption |
让我们一项一项地分析一下以上代码中的 HTML 标记:
<table></table>
:这个table
元素是必须的,用来告诉浏览器你想以表格方式排列内容。<tr></tr>
:tr
元素定义表格的一行。这可以让浏览器将<tr>
和</tr>
标签之间的所有内容组织到表格的一行中。<td></td>
:td
元素定义表格的单元格,或者行中各个单独的内容。所使用的td
单元格的数量应仅为将数据放入单元格所实际需要的数量。不要使用空的td
单元格来创建空格或填充距,而应该使用 CSS 来创建所需的空格或填充距,这不仅是将 HTML 文档的结构和表现相分离的好方式,同时还可以使那些靠屏幕阅读器,为他们朗读表格中内容的视力受损的用户,更容易理解表格。
请注意,这些基本元素必须像下面那样被嵌套:
<table> <tr> <td>content</td> <td>content</td> <td>content</td> </tr> </table>
如果以其它顺序排列这些元素,将导致浏览器以非常奇怪的方式渲染表格,甚至无法渲染表格。
为表格添加一些特性
现在这个基本的表格已创建出来,接下来可以为表格添加一些复杂一点的特性。首先,我将加入标题和表头,使表格里的数据更语义化并更能为屏幕阅读器所易读。加入这些代码后,表格的标记如下所示:
<table> <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption> <tr> <th>Volcano Name</th> <th>Location</th> <th>Last Major Eruption</th> <th>Type of Eruption</th> </tr> <tr> <td>Mt. Lassen</td> <td>California</td> <td>1914-17</td> <td>Explosive Eruption</td> </tr> <tr> <td>Mt. Hood</td> <td>Oregon</td> <td>1790s</td> <td>Pyroclastic flows and Mudflows</td> </tr> <tr> <td>Mt. St. Helens</td> <td>Washington</td> <td>1980</td> <td>Explosive Eruption</td> </tr> </table>
上面的代码渲染后的样子:
Volcano Name | Location | Last Major Eruption | Type of Eruption |
---|---|---|---|
Mt. Lassen | California | 1914-17 | Explosive Eruption |
Mt. Hood | Oregon | 1790s | Pyroclastic flows and Mudflows |
Mt. St. Helens | Washington | 1980 | Explosive Eruption |
所使用的新元素包括:
<caption></caption>
:使用caption
元素,可让你为表格加入标题。除非你选择使用 CSS 设置不同的文本对齐方式,绝大多数浏览器会将表格标题居中显示,并将标题行的宽度渲染为和表格一样的宽度。<th></th>
:th
元素用于表格内的表头单元格。这不仅有助于更为语义化地描述表头内的内容的功能,还有助于各种不同的浏览器和设备更为准确地渲染表头。以上这个示例中显示的是使用th
元素最为简单的方式。
进一步调整表格的结构
作为调整这个表格的最后一个步骤,我将定义表头部分和表体部分,加入一个表脚,并定义行和列标题的范围。我还将就加入一个描述表格内容的摘要属性,最后写成的标记如下所示:
<table summary="a summary of recent major volcanic eruptions in the Pacific Northwest"> <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption> <thead> <tr> <th scope="col">Volcano Name</th> <th scope="col">Location</th> <th scope="col">Last Major Eruption</th> <th scope="col">Type of Eruption</th> </tr> </thead> <tfoot> <tr> <td colspan="4">Compiled in 2008 by Ms Jen</td> </tr> </tfoot> <tbody> <tr> <th scope="row">Mt. Lassen</th> <td>California</td> <td>1914-17</td> <td>Explosive Eruption</td> </tr> <tr> <th scope="row">Mt. Hood</th> <td>Oregon</td> <td>1790s</td> <td>Pyroclastic flows and Mudflows</td> </tr> <tr> <th scope="row">Mt. St. Helens</th> <td>Washington</td> <td>1980</td> <td>Explosive Eruption</td> </tr> </tbody> </table>
以上代码在浏览器中的样子如下:
Volcano Name | Location | Last Major Eruption | Type of Eruption |
---|---|---|---|
Compiled in 2008 by Ms Jen | |||
Mt. Lassen | California | 1914-17 | Explosive Eruption |
Mt. Hood | Oregon | 1790s | Pyroclastic flows and Mudflows |
Mt. St. Helens | Washington | 1980 | Explosive Eruption |
所添加的新元素/属性如下所示:
thead
,tbody
和tfoot
元素:这三个元素分别定义表格的表头、表体和表脚。除非你是在为确实是复杂,有很多数据行和数据列的表格写代码,使用这些元素可能显得多余。不过对一个复杂的表格,使用这些元素就是很恰当的,这样不仅可以按代码编写者的意图使用表格来组织内容,而且也可以让浏览器和其它设备更清楚地显示表格的结构。colspan
和rowspan
属性:使用colspan
属性,可创建跨度超过一列的表格单元格。在以上示例表格的表脚中,我想让一个表格单元格的跨度为整个表格的宽度,因此我就使用colspan
属性将表脚的跨度定义为 4列。另外,你也可以为表格单元格添加rowspan
属性,将单元格的跨度定义为跨越 x 行,例如<td rowspan="3">
。summary
属性:该属性用于定义表格内容的摘要,供屏幕阅读器使用(请注意,上面表格被渲染到浏览器时,这个属性不可见)。在万维网联盟过去发布的建议规范(包括 WCAG 1.0 和 HTML 4.0)中,都规定以我上面所述的方式使用summary
属性。不过在万维网联盟新近发布的规范草案中,未再提及summary
属性。看来是否可继续使用summary
属性尚未最后确定,但目前还是可以放心地使用的。毕竟这个summary
属性具有提供网页可访问性的作用,且也不会造成 HTML 代码出现任何问题。scope
属性:你们可能已经注意到th
标签中的scope
属性,实际上我是使用这个属性在数据行中把火山的名称定义为标题,这种做法是完全被允许的。可在th
元素中添加scope
属性,以告诉屏幕阅读器th
元素中包含的内容是一列或一行的标题。scope
属性仅在th
元素中使用。
使用 CSS 为表格添加样式,使表格更好看
以上这些列出的元素和属性,都是创建好的 HTML 表格必需的元素和属性。现在我已创建出这个示例 HTML 表格的结构,以下我将使用 CSS,为表格添加一些简单的样式,让它显得更好看一些:
body { background: #ffffff; margin: 0; padding: 20px; line-height: 1.4em; font-family: tahoma, arial, sans-serif; font-size: 62.5%; } table { width: 80%; margin: 0; background: #FFFFFF; border: 1px solid #333333; border-collapse: collapse; } td, th { border-bottom: 1px solid #333333; padding: 6px 16px; text-align: left; } th { background: #EEEEEE; } caption { background: #E0E0E0; margin: 0; border: 1px solid #333333; border-bottom: none; padding: 6px 16px; font-weight: bold; }
在加入这些 CSS 代码后,表格最后显示出来的样子如图1所示。你也可以点击这里观看表格在浏览器中显示出来的样子。
图1:现在表格的外观好看多了
看到了吧,现在表格的外观好看多了。在深入地学习了如何使用 CSS 对表格进行样式化(后面有专文讲述个主题)之后,你可以按照你喜欢的任何方式,为表格添加样式。现在我将简要地向你们讲述以上的 CSS 代码:
body
:在以上的 CSS 代码中,我加入了用于设置边距和填充距的属性(本示例中我将边距设为0),以及设置背景色(白色)、字号和字族、行高的属性。你们可以点击这里下载示例表格的代码,然后试着对 CSS 文件中的属性做一些改动,看看表格的外观会发生哪些变化。table
:使用 CSS 边框声明,添加了边框。为正确地加入边框,我将border-collapse
属性设置为collapse
,重设了表格内边框的属性值,并让border-bottom
成为一条横跨整行的直线,而不是在每个单元格的末端被分割开。我将表格的width
设置为百分比宽度,具体的值为 80%(这样表格宽度在显示时就为屏幕宽度的 80%,且会随着浏览器窗口宽度的变化而相应地变化)。th
和td
:在这个示例表格中,我使用 CSS 将文字对齐方式设为左对齐,不过你也可以将它们设为居中对齐,甚至还可以为各个th
和td
元素赋予类名称,然后使用 CSS 对每行或每列的样式进行控制(例如,如果要控制行的样式,可以为tr
元素赋予一个类名称)。我还为th
元素和td
元素都添加了一点填充距,使每行内的文字隔得更开一些,以提高易读性。在th
选择符内,我为标题设置了另一种颜色,以把标题和表格其它部分区分开来。caption
:如果你没有为caption
选择符设置 CSS 属性,这样即使标题的 HTML 标记是包含在table
标签之中,表格标题也不会有一个边框,其背景色也会和整个页面的背景色一样。因此,在以上这个示例中,我为表格标题设置了一个边框(无下边框,这是因为表格内的边框已提供了下边框),并设置了不同的背景色和字体(粗体),以把表格标题从表头行中分离开来。
总结
在本篇文章中,我已全面讲述了创建有效的 HTML 数据表格所需要了解的知识。以下是你们需要特别注意的:
- 以正确的代码创建可被各种浏览器、移动电话及其它设备访问的表格,这是相当重要的。你应以尽可能地精简的 HTML 创建表格的结构,同时使用 CSS 对表格进行样式化。关于 CSS,在后面的课程中将详细讲述。
- 只要你以精简的代码编写表格,并使用如
scope
和summary
这样的属性,以及caption
元素,清楚地指明表格的各个部分,那么表格是能被移动设备和屏幕阅读器正常访问的。此外,为确保表格的可访问性,不要使用空单元格来创建单元格间距(应使用 CSS 创建单元格间距)。
延伸阅读
- W3C HTML 4 Tables Recommendation
- W3C CSS 2 tables recommendation
- Roger Johansson’s “Bring on the Tables”
练习题
- 用 3个主要的表格元素,即
table
,tr
和td
元素,编写一个简单表格的代码。完成后将其保存,并在浏览器中观看。 - 参照正文中的第二个示例,为你创建的表格添加表格标题、表头和表脚。完成后,表格在浏览器中显示出来的样子会发生哪些变化?
- 为让你创建的表格能被屏幕阅读器和手持设备正常访问,你应该怎么做?
- 创建一个 CSS 文件。尝试仅使用 CSS,而不使用 HTML 标记的属性,对你创建的表格的边框、填充距、单元格间距进行样式化,并添加背景色和设置字体。