济南盈讯科技有限公司

19. HTML 表格

序言

你如何使用 Web 标准来组织大量的数据呢？如果使用数量庞大的嵌套元素，将所有的数据都有序地放入行和方框中，一定会让你伤透脑筋。不过对此有一个好的解决办法，那就是使用表格。

对网页设计师来说，使用表格是将数据组织整理为表格形式的好方式。换句话说，表格、图表及其它信息图表可以帮助你阅读和处理经过整理的大量信息，让你可以对照和比较不同的数据。你在网上随时都可以看到各种表格和图表，如政治选举结果的摘要或比较、体育比赛的统计、价格比较表、尺码表等。

在互联网发展的早期，那时候 CSS 作为一种将表现从 HTML 的结构中分离出来的方法尚未得到运用，网页设计师普遍使用表格来进行页面布局，创建表格和方框等来安排页面内容的摆置。当然这是不正确的做法。使用表格进行页面布局，会使页面充斥着大量的嵌套表格和无用代码，从而导致文档体积膨胀，难于维护且难于修改。即使是现在，你都还能看到这类网站。不过你们一定要记住，应该只将表格用作其本身的用途，即把数据列入表格之中。至于页面布局，则应使用 CSS 来控制。

在本篇文章中，我将讲述如何恰当地使用 HTML 表格。本篇文章的内容目录如下：

• 最基本的表格
• 为表格添加一些特性
• 进一步调整表格的结构
• 使用 CSS 为表格添加样式，使表格更好看
• 总结
• 延伸阅读
• 练习题

最基本的表格

我首先以语义化的 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>

上面的代码渲染后的样子：

让我们一项一项地分析一下以上代码中的 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>

上面的代码渲染后的样子：

所使用的新元素包括：

• <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>

以上代码在浏览器中的样子如下：

所添加的新元素/属性如下所示：

• 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 标记的属性，对你创建的表格的边框、填充距、单元格间距进行样式化，并添加背景色和设置字体。

• < 上页
• 下页 >