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>上面的代码渲染后的样子： Volcano Name Location Last Major Eruption Type of EruptionMt. LassenCalifornia1914-17Explosive EruptionMt. HoodOregon1790sPyroclastic flows and MudflowsMt .St. HelensWashington1980Explosive 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> 上面的代码渲染后的样子： Recent Major Volcanic Eruptions in the Pacific Northwest Volcano Name Location Last Major Eruption Type of EruptionMt. LassenCalifornia1914-17Explosive EruptionMt. HoodOregon1790sPyroclastic flows and MudflowsMt. St. HelensWashington 1980Explosive 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> 以上代码在浏览器中的样子如下： Recent Major Volcanic Eruptions in the Pacific Northwest Volcano Name Location Last Major Eruption Type of EruptionRecent Major Volcanic Eruptions in the Pacific Northwest Volcano Name Location Last Major Eruption Type of EruptionCompiled in 2008 by Ms JenMt. LassenCalifornia1914-17Explosive EruptionMt. HoodOregon1790sPyroclastic flows and MudflowsMt. St. HelensWashington 1980Explosive Eruption所添加的新元素/属性如下所示：thead，tbody 和 tfoot 元素：这三个元素分别定义表格的表头、表体和 表脚。