HTML 表格基础

本文将带你了解 HTML 表格，涵盖行、单元格、标题等基础知识，以及如何使单元格跨越多列和多行，以及如何将列中的所有单元格分组以进行样式设置。

预备知识	熟悉 HTML 基础，如HTML 基础语法中所述。
学习成果	表格的用途——组织表格数据。表格的非用途——布局，或任何其他用途。基本表格语法——`<table>`、`<tr>` 和 `<td>`。使用 `<th>` 定义表头。使用 `colspan` 和 `rowspan` 跨越多列和多行。

什么是表格？

表格是由行和列组成的结构化数据集（表格数据）。表格允许你快速轻松地查找表示不同类型数据之间某种连接的值，例如人与年龄、星期几，或当地游泳池的时间表。

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

A swimming timetable showing a sample data table

表格在人类社会中被广泛使用，并且已经使用了很长时间，如这份 1800 年的美国人口普查文件所证明

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

因此，HTML 的创造者提供了在网络上结构化和呈现表格数据的方法也就不足为奇了。

表格是如何工作的？

表格的要点在于它的严格性。通过在行和列标题之间建立视觉关联，信息可以轻松解释。例如，查看下表，找出拥有 62 颗卫星的木星气体巨行星。你可以通过关联相关的行和列标题来找到答案。

<table>
  <caption>
    Data about the planets of our solar system (Source:
    <a href="https://nssdc.gsfc.nasa.gov/planetary/factsheet/"
      >Nasa's Planetary Fact Sheet - Metric</a
    >).
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <th scope="col">Name</th>
      <th scope="col">Mass (10<sup>24</sup>kg)</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Density (kg/m<sup>3</sup>)</th>
      <th scope="col">Gravity (m/s<sup>2</sup>)</th>
      <th scope="col">Length of day (hours)</th>
      <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
      <th scope="col">Mean temperature (°C)</th>
      <th scope="col">Number of moons</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      <td>4,879</td>
      <td>5427</td>
      <td>3.7</td>
      <td>4222.6</td>
      <td>57.9</td>
      <td>167</td>
      <td>0</td>
      <td>Closest to the Sun</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      <td>12,104</td>
      <td>5243</td>
      <td>8.9</td>
      <td>2802.0</td>
      <td>108.2</td>
      <td>464</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>5.97</td>
      <td>12,756</td>
      <td>5514</td>
      <td>9.8</td>
      <td>24.0</td>
      <td>149.6</td>
      <td>15</td>
      <td>1</td>
      <td>Our world</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>0.642</td>
      <td>6,792</td>
      <td>3933</td>
      <td>3.7</td>
      <td>24.7</td>
      <td>227.9</td>
      <td>-65</td>
      <td>2</td>
      <td>The red planet</td>
    </tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <td>1326</td>
      <td>23.1</td>
      <td>9.9</td>
      <td>778.6</td>
      <td>-110</td>
      <td>67</td>
      <td>The largest planet</td>
    </tr>
    <tr>
      <th scope="row">Saturn</th>
      <td>568</td>
      <td>120,536</td>
      <td>687</td>
      <td>9.0</td>
      <td>10.7</td>
      <td>1433.5</td>
      <td>-140</td>
      <td>62</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giants</th>
      <th scope="row">Uranus</th>
      <td>86.8</td>
      <td>51,118</td>
      <td>1271</td>
      <td>8.7</td>
      <td>17.2</td>
      <td>2872.5</td>
      <td>-195</td>
      <td>27</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Neptune</th>
      <td>102</td>
      <td>49,528</td>
      <td>1638</td>
      <td>11.0</td>
      <td>16.1</td>
      <td>4495.1</td>
      <td>-200</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planets</th>
      <th scope="row">Pluto</th>
      <td>0.0146</td>
      <td>2,370</td>
      <td>2095</td>
      <td>0.7</td>
      <td>153.3</td>
      <td>5906.4</td>
      <td>-225</td>
      <td>5</td>
      <td>
        Declassified as a planet in 2006, but this
        <a
          href="https://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/"
          >remains controversial</a
        >.
      </td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}

如果实施正确，HTML 表格可以很好地被屏幕阅读器等辅助工具处理，因此一个成功的 HTML 表格应该能同时提升有视力障碍和无视力障碍用户的体验。

表格样式

你还可以查看 GitHub 上的行星数据实时示例！你会注意到，那里的表格看起来更具可读性——这是因为你在此页面上看到的表格样式极少，而 GitHub 版本则应用了更重要的 CSS。

毫无疑问，为了让表格在网络上发挥作用，你需要使用 CSS 提供一些样式信息，并使用 HTML 提供良好的坚实结构。在本课中，我们将重点关注 HTML 部分；你将在我们未来的表格样式课程中了解表格的样式。

在本模块中，我们不会重点介绍 CSS，但我们为你提供了一个最小的 CSS 样式表，你可以使用它使你的表格比没有任何样式时的默认表格更具可读性。你可以在此处找到样式表，你还可以找到一个应用了样式表的HTML 模板——它们将为你尝试 HTML 表格提供一个很好的起点。

何时应避免使用 HTML 表格？

HTML 表格应用于表格数据（易于处理行和列的信息）——这是它们设计的初衷。不幸的是，很多人过去使用 HTML 表格来布局网页，例如一行包含页面标题，一行包含每个内容列，一行包含页脚等。这种技术过去之所以被使用，是因为浏览器对 CSS 的支持曾经非常有限。现代浏览器对 CSS 有很好的支持，因此不再需要基于表格的布局。表格布局现在极为罕见，但你可能仍然会在网络的某些角落看到它们。

简而言之，使用表格进行布局而不是CSS 布局技术是一个糟糕的主意。主要原因如下：

布局表格降低了视障用户的可访问性：盲人使用的屏幕阅读器会解释 HTML 页面中存在的标签并向用户朗读内容。由于表格不是布局的正确工具，并且标记比 CSS 布局技术更复杂，因此屏幕阅读器的输出会让用户感到困惑。
表格会产生标签汤：如上所述，表格布局通常涉及比适当布局技术更复杂的标记结构。这可能导致代码更难编写、维护和调试。
表格并非自动响应式：当你使用适当的布局容器（例如<header>、<section>、<article> 或<div>）时，它们的宽度默认为其父元素的 100%。另一方面，表格默认根据其内容调整大小，因此需要额外的措施才能使表格布局样式在各种设备上有效工作。

创建你的第一个表格

我们已经讨论了足够的表格理论，现在，让我们深入研究一个实际示例，让你构建一个简单的表格。

首先，在本地机器上的新目录中复制 blank-template.html 和 minimal-table.css。HTML 模板已经包含一个 <link> 元素来将 CSS 应用到 HTML，所以你无需担心。
每个表格的内容都包含在以下两个标签中：<table></table>。将它们添加到 HTML 的 body 中。
表格中最小的容器是表格单元格，它通过 <td> 元素创建（“td”代表“table data”）。将以下内容添加到你的表格标签中
html
```
<td>Hi, I'm your first cell.</td>
```
如果我们想要一行四个单元格，我们需要复制这些标签三次。更新你的表格内容，使其看起来像这样
html
```
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
```

正如你所看到的，单元格不是彼此放置在下方，而是自动在同一行中对齐。每个 <td> 元素创建一个单元格，它们共同构成第一行。我们添加的每个单元格都会使行变长。

为了阻止此行增长并开始在第二行放置后续单元格，我们需要使用 <tr> 元素（“tr”代表“table row”）。现在我们来研究一下。

将你已经创建的四个单元格放置在 <tr> 标签内，如下所示

html

<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>

现在你已经创建了一行，尝试再创建一两行——每行都需要用额外的 <tr> 元素包裹，每个单元格都包含在 <td> 中。

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<table>
  <tr>
    <td>Hi, I'm your first cell.</td>
    <td>I'm your second cell.</td>
    <td>I'm your third cell.</td>
    <td>I'm your fourth cell.</td>
  </tr>

  <tr>
    <td>Second row, first cell.</td>
    <td>Cell 2.</td>
    <td>Cell 3.</td>
    <td>Cell 4.</td>
  </tr>
</table>

你还可以在 GitHub 上找到此代码：simple-table.html（也可在此处查看实时运行）。

使用 <th> 元素添加标题

现在让我们把注意力转向表头——位于行或列开头，定义该行或列所含数据类型的特殊单元格（例如，本文第一个示例中显示的“人物”和“年龄”单元格）。为了说明它们的用途，请看以下表格示例。首先是源代码

html

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

现在是实际渲染的表格

这里的问题在于，虽然你大致可以理解发生了什么，但交叉引用数据并没有那么容易。如果列和行标题以某种方式突出显示，那会好得多。

为狗的表格添加标题

现在我们希望你尝试通过添加一些标题来改进狗的表格示例。

首先，在本地计算机上的新目录中复制我们的 dogs-table.html 和 minimal-table.css 文件。
要将表格标题识别为标题，无论是在视觉上还是语义上，你都可以使用 <th> 元素（“th”代表“table header”）。它的工作方式与 <td> 完全相同，只是它表示标题，而不是普通单元格。进入你的 HTML，将所有围绕表格标题的 <td> 元素更改为 <th> 元素。
保存你的 HTML 并在浏览器中加载它，你应该会看到标题现在看起来像标题。

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<table>
  <tr>
    <td>&nbsp;</td>
    <th>Knocky</th>
    <th>Flor</th>
    <th>Ella</th>
    <th>Juan</th>
  </tr>
  <tr>
    <th>Breed</th>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <th>Owner</th>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <th>Eating Habits</th>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

你还可以在 GitHub 上找到此代码：dogs-table-fixed.html（也可在此处查看实时运行）。

标题为何有用？

我们已经部分回答了这个问题——当标题清晰突出时，更容易找到你要查找的数据，而且设计通常看起来更好。

注意：表格标题带有默认样式——它们是粗体和居中的，即使你不向表格添加自己的样式，以帮助它们突出显示。

表格标题还有一个额外的好处——结合 scope 属性（我们将在下一篇文章中学习），它们可以通过将每个标题与同一行或列中的所有数据关联起来，从而使表格更具可访问性。然后，屏幕阅读器能够一次性读出整行或整列数据，这非常有用。

允许单元格跨越多行和多列

有时我们希望单元格跨越多行或多列。以下是一个简单的示例，展示了常见动物的名称。在某些情况下，我们希望在动物名称旁边显示雄性和雌性的名称。有时我们不希望，在这种情况下，我们只希望动物名称跨越整个表格。

最初的标记如下所示

html

<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

但输出结果与我们想要的并不完全一致

使用 `rowspan` 和 `colspan` 修复布局

我们需要一种方法让“动物”、“河马”和“鳄鱼”跨越两列，而“马”和“鸡”向下跨越两行。幸运的是，表格标题和单元格具有 colspan 和 rowspan 属性，它们允许我们做这些事情。两者都接受一个无单位的数字值，该值等于你希望跨越的行数或列数。例如，colspan="2" 使一个单元格跨越两列。

让我们使用 colspan 和 rowspan 来改进这个表格。

首先，在本地计算机上的新目录中复制我们的 animals-table.html 和 minimal-table.css 文件。HTML 包含你上面看到的相同的动物示例。
接下来，使用 colspan 让“动物”、“河马”和“鳄鱼”跨越两列。
最后，使用 rowspan 让“马”和“鸡”跨越两行。
保存代码并在浏览器中打开，查看改进效果。

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<table>
  <tr>
    <th colspan="2">Animals</th>
  </tr>
  <tr>
    <th colspan="2">Hippopotamus</th>
  </tr>
  <tr>
    <th rowspan="2">Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th colspan="2">Crocodile</th>
  </tr>
  <tr>
    <th rowspan="2">Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

你还可以在 GitHub 上找到此代码：animals-table-fixed.html（也可在此处查看实时运行）。

总结

这总结了 HTML 表格的基础知识。在下一篇文章中，我们将探讨一些可以使 HTML 表格对视障人士更易于访问的更多功能。

帮助改进 MDN

了解如何贡献

本页面最后修改于2025 年 8 月 28 日，由MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题