1. Web
  2. HTML
  3. 参考
  4. 元素
  5. <table>

<table>：Table 元素

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

<table> HTML 元素表示表格数据，即以二维表格形式呈现的信息，该表格由包含数据的行和列组成。

试一试

<table>
  <caption>
    Front-end web developer course 2021
  </caption>
  <thead>
    <tr>
      <th scope="col">Person</th>
      <th scope="col">Most interest in</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Chris</th>
      <td>HTML tables</td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">Dennis</th>
      <td>Web accessibility</td>
      <td>45</td>
    </tr>
    <tr>
      <th scope="row">Sarah</th>
      <td>JavaScript frameworks</td>
      <td>29</td>
    </tr>
    <tr>
      <th scope="row">Karen</th>
      <td>Web performance</td>
      <td>36</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Average age</th>
      <td>33</td>
    </tr>
  </tfoot>
</table>

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

thead,
tfoot {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td:last-of-type {
  text-align: center;
}

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

属性

此元素包含全局属性。

已弃用属性

以下属性已弃用，不应使用。它们仅在更新现有代码时作为参考和出于历史兴趣而在此处记录。

align

指定表格在其父元素中的水平对齐方式。可能的枚举值包括left、center和right。请改用margin-inline-start和margin-inline-end CSS 属性，因为此属性已弃用。

bgcolor

定义表格的背景颜色。该值是 HTML 颜色；可以是带#前缀的6 位十六进制 RGB 代码，也可以是颜色关键字。不支持其他 CSS <color> 值。请改用background-color CSS 属性，因为此属性已弃用。

border

定义围绕表格的框架大小（以像素为单位的非负整数值）。如果设置为0，则frame属性将设置为空。请改用border CSS 属性，因为此属性已弃用。

cellpadding

定义单元格内容与其边框之间的空间。此属性已过时：请改用将padding CSS 属性应用于<th>和<td>元素。

cellspacing

定义两个单元格之间空间的尺寸。此属性已过时：请改用在<table>元素上设置border-spacing CSS 属性。请注意，如果<table>元素的border-collapse CSS 属性设置为collapse，则此属性无效。

frame

定义必须显示表格周围框架的哪一侧。可能的枚举值包括void、above、below、hsides、vsides、lhs、rhs、box和border。请改用border-style和border-width CSS 属性，因为此属性已弃用。

rules

定义表格中规则（边框）的显示位置。可能的枚举值包括none（默认值）、groups（<thead>、<tbody>和<tfoot>元素）、rows（水平线）、cols（垂直线）和all（每个单元格周围的边框）。请改用在适当的表格相关元素以及<table>本身上设置border CSS 属性，因为此属性已弃用。

summary

定义总结表格内容的替代文本。请改用<caption>元素，因为此属性已弃用。

width

指定表格的宽度。请改用width CSS 属性，因为此属性已弃用。

注意：虽然 HTML 规范中不包含height作为<table>属性，但某些浏览器支持对height的非标准解释。无单位值设置最小绝对高度（以像素为单位）。如果设置为百分比值，则最小表格高度将相对于父容器的高度。请改用min-height CSS 属性，因为此属性已弃用。

表格内容的视觉布局

以下元素是表格结构的一部分

<table>框建立了一个表格格式化上下文。<table>内的元素根据以下规则生成矩形框

  1. 行框按照源代码顺序从上到下填充表格。每个行框占据一列单元格。
  2. 行组框占据一个或多个行框。
  3. 列框按照源代码顺序彼此相邻放置。根据dir属性的值，列从左到右或从右到左排列。列框占据一个或多个表格单元格列。
  4. 列组框占据一个或多个列框。
  5. 单元格框可以跨越多个行和列。用户代理会修剪单元格以适应可用的行和列数。

表格单元格具有内边距。构成表格的框没有外边距。

表格图层和透明度

出于样式目的，表格元素可以被认为是放置在六个叠加层上

Table element layers

仅当其上方的图层具有透明背景时，一个图层上设置的元素背景才可见。缺失的单元格将像一个匿名表格单元格框占据该位置一样呈现。

无障碍

标题

通过提供一个清晰简洁地描述表格用途的<caption>元素，可以帮助人们决定是否需要查看表格的其余内容或跳过它。

这有助于借助辅助技术（如屏幕阅读器）进行导航的人、视力低下者以及有认知障碍的人。

作用域行和列

在简单上下文中，表头单元格（<th>元素）上的scope属性是多余的，因为作用域是推断出来的。但是，某些辅助技术可能无法进行正确的推断，因此指定表头作用域可以改善用户体验。在复杂的表格中，可以指定scope以提供有关与表头相关的单元格的必要信息。

复杂表格

屏幕阅读器等辅助技术可能难以解析过于复杂的表格，因为表头单元格无法以严格的水平或垂直方式关联。这通常由colspan和rowspan属性的存在表示。

理想情况下，考虑其他方式呈现表格内容，包括将其分解为一组更小的、相关的表格，这些表格不必依赖使用colspan和rowspan属性。除了帮助使用辅助技术的人理解表格内容外，这还可能使有认知障碍的人受益，他们可能难以理解表格布局所描述的关联。

如果表格无法拆分，请结合使用id和headers属性，以编程方式将每个表格单元格与其关联的表头（<th>元素）关联起来。

示例

以下示例包含复杂性逐步增加的表格。另请参阅我们的初学者表格样式指南，了解表格样式信息，包括常见且有用的技术。

由于<table>的结构涉及使用多个表格相关的 HTML 元素以及各种关联属性，因此以下示例旨在提供一个涵盖基础知识和常见标准的简化解释。可以在相应的链接页面上找到更多详细信息。

这些表格示例演示了如何创建使用 HTML 构建并使用 CSS 样式化的可访问表格。

由于 HTML 表格的结构方式，标记可能会迅速增长。因此，明确定义表格的用途和最终外观以创建适当的结构非常重要。使用语义标记开发的逻辑结构不仅更容易设置样式，而且能够创建有用且可访问的表格，所有人都（包括搜索引擎和辅助技术用户）都能理解和导航。

第一个例子是基础的，随后的例子复杂性逐渐增加。首先，我们将为表格开发一个非常基本的 HTML 表格结构。前两个例子不包含定义的头部、主体或底部等表格分区组，不涉及单元格跨越或明确定义的单元格关系。甚至没有提供标题。在我们完成这些例子时，它们将逐步增强以包含复杂数据表格应具备的所有表格特性。

基本表格

此示例包含一个非常基本的表格，有三行两列。为了演示默认浏览器表格样式，此示例中未包含任何 CSS。

HTML

表格行由<tr>元素定义，列由其中的表头和数据单元格定义。第一行包含用作数据单元格（<td>元素）列标题的表头单元格（<th>元素）。每行中的每个元素（<th>或<td>）都位于其各自的列中——即，一行中的第一个元素位于第一列，该行中的第二个元素位于第二列。

html
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Maria Sanchez</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Michael Johnson</td>
    <td>34</td>
  </tr>
</table>

结果

此表格未应用自定义 CSS 或 用户样式表。样式结果纯粹来自 用户代理样式表。

带表头单元格的扩展表格

此示例扩展了基本表格，扩展了内容并添加了基本的 CSS 样式。

HTML

该表格现在包含四行（<tr>元素），每行有四列。第一行是表头单元格行（第一行只包含<th>元素）。随后的行包括一个表头列（<th>元素作为每行的第一个子元素）和三个数据列（<td>元素）。由于未使用表格分区元素，浏览器会自动定义内容组结构，即所有行都包含在隐式<tbody>元素的表格主体中。

html
<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

使用 CSS，我们提供了基本样式，在表格组件周围创建线条，以使数据结构更清晰。CSS 在<table>周围和表格的每个单元格周围添加了一个实心边框，包括那些用<th>和<td>元素指定的单元格，从而划分每个表头和数据单元格。

css
table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

结果

指定表格单元格关系

在以更高级的方式扩展表格之前，建议通过定义表头和数据单元格（<th>和<td>元素）之间的关系来提高可访问性。

HTML

这通过在<th>元素上引入scope属性并将其值设置为相应的col（列）或row值来完成。

html
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">ID</th>
    <th scope="col">Member Since</th>
    <th scope="col">Balance</th>
  </tr>
  <tr>
    <th scope="row">Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th scope="row">Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th scope="row">Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS 和视觉结果不变——该适配为屏幕阅读器等辅助技术提供了有价值的上下文信息，以帮助识别表头与哪些单元格相关。

注意：如果表格结构更复杂，在<th>和<td>元素上（额外）使用headers属性可以改善可访问性并帮助辅助技术识别单元格之间的关系；请参阅复杂表格。

明确指定表格分区组

除了通过指定单元格关系来提高可访问性之外，还可以通过引入表格分区组来改进表格的语义。

HTML

由于第一行（<tr>元素）只包含列标题单元格并为表格其余内容提供标题，因此可以将其包含在<thead>元素中，以明确指定该行作为表格的头部。此外，浏览器自动完成的内容也可以明确定义——表格的主体部分，包含表格的主要数据，通过将相应的行包含在<tbody>元素中来指定。明确使用<tbody>元素有助于浏览器创建预期的表格结构，避免不需要的结果。

html
<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">ID</th>
      <th scope="col">Member Since</th>
      <th scope="col">Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

再次强调，CSS 和视觉效果不变——指定此类表格分区组为辅助技术（包括屏幕阅读器和搜索引擎）以及 CSS 中的样式提供了有价值的上下文信息，这将在后续示例中展示。

列和行跨越

在此示例中，我们通过添加一列并引入多行头部部分来进一步扩展表格。

HTML

在迄今为止创建的表格基础上，在每个主体行中添加了一个新的“会员结束日期”列，使用<td>元素。在头部部分（<thead>元素）内还添加了一行（<tr>元素），以引入“会员日期”标题作为“加入”和“取消”列的标题。

第二个标题行的创建涉及向<th>元素添加colspan和rowspan属性，以将标题单元格分配到正确的列和行。

html
<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

结果

头部部分现在有两行，一行包含标题单元格（<th>元素）“姓名”、“ID”、“会员日期”和“余额”，以及一个“会员日期”标题，该标题在第二行中包含两个子标题：“加入”和“取消”。这是通过以下方式实现的

  • 第一行的“姓名”、“ID”和“余额”标题单元格使用rowspan属性跨越了两个表格标题行，使它们各高两行。
  • 第一行的“会员日期”标题单元格使用colspan属性跨越了两列，使其宽度为两列。
  • 第二行只包含“加入”和“取消”这两个表头单元格，因为其他三列与第一行中跨越两行的单元格合并。这两个表头单元格正确地位于“会员日期”表头下方。

表格标题和列摘要

为表格内容提供摘要是一种常见且值得推荐的做法，它可以让用户快速判断表格的相关性。此外，“余额”列通过显示各个成员的余额总和进行汇总。

HTML

通过使用表格标题（<caption>元素）作为<table>的第一个子元素来添加表格摘要。标题为表格提供了可访问名称或可访问描述。

最后，在表格主体下方添加了一个表格脚注部分（<tfoot>元素），其中包含一行，通过显示总和来汇总“余额”列。应用了之前介绍的元素和属性。

html
<table>
  <caption>
    Status of the club members 2021
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Total balance</th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

结果

基本表格样式

让我们为表格应用基本样式，调整字体并为头部和脚部行添加background-color。这次 HTML 没有变化，所以我们直接来看 CSS。

CSS

虽然这里向<table>元素添加了font属性以设置更具视觉吸引力的字体（或根据您的个人观点，可能是一种令人厌恶的无衬线字体），但有趣的部分是第二个样式，其中位于<thead>和<tfoot>内的<tr>元素被样式化，添加了浅蓝色background-color。这是一种快速同时为特定部分中的所有单元格应用背景颜色的方法。

css
table {
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

thead > tr,
tfoot > tr {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

结果

高级表格样式

现在我们将全力以赴，对标题和正文区域中的行都进行样式设置，包括交替行颜色、根据行内位置的不同颜色单元格等等。这次我们先看看结果。

结果

这是最终表格的外观

HTML 再次没有变化。看到了吗，适当的 HTML 结构准备能带来什么？

CSS

这次 CSS 更加复杂。它不难，但涉及的内容很多。让我们来分解一下。

这里添加了border-collapse和border-spacing属性，以消除单元格之间的间距，并使相互接触的边框合并为一个边框，而不是出现双重边框。此外，<caption>使用caption-side属性放置在表格的bottom

css
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

接下来，使用padding属性为所有表格单元格的内容周围留出空间。vertical-align属性将表头单元格的内容与单元格的bottom对齐，这可以在跨两行的表头单元格上看到

css
th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 6px;
}

th {
  vertical-align: bottom;
}

下一个 CSS 规则设置表格头部（使用<thead>指定）中所有<tr>元素的background-color。然后将头部的下边框设置为两像素宽的线。然而，请注意，我们使用:nth-of-type选择器将border-bottom属性应用于头部的第二行。为什么？因为头部由一些单元格跨越的两行组成。这意味着实际上有两行；将样式应用于第一行不会得到预期的结果

css
thead > tr {
  background-color: rgb(228 240 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid rgb(140 140 140);
}

让我们用绿色和红色来样式化“已加入”和“已取消”这两个表头单元格，分别代表新成员的“好”和取消会员资格的“遗憾”。这里我们使用:last-of-type选择器深入到表格头部部分的最后一行，并给它里面的第一个表头单元格（“已加入”表头）一个绿色调，给它里面的第二个表头单元格（“已取消”表头）一个红色调

css
thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225 255 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255 225 225);
}

由于第一列也应该突出显示，这里也添加了一些自定义样式。此 CSS 规则使用text-align属性将表格主体每行中的第一个表头单元格（成员姓名）左对齐，并使用略微不同的background-color进行样式化

css
tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225 229 244);
}

通过交替行颜色来提高表格数据的可读性是很常见的——这有时被称为“斑马条纹”。让我们为每个偶数行添加一点background-color

css
tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

由于在表格中右对齐货币值是标准做法，我们在这里也这样做。这只是将每个主体行中最后一个<td>的text-align属性设置为right

css
tbody > tr > td:last-of-type {
  text-align: right;
}

最后，对表格的脚部部分应用了类似于头部的样式，使其也突出显示

css
tfoot > tr {
  border-top: 2px dashed rgb(140 140 140);
  background-color: rgb(228 240 245);
}

tfoot th,
tfoot td {
  text-align: right;
  font-weight: bold;
}

在小空间中显示大型表格

网页表格的一个常见问题是，当内容量很大时，它们在小屏幕上的原生表现不佳，而且使其可滚动的方式并不明显，特别是当标记可能来自 CMS 且无法修改以包含包装器时。

此示例提供了一种在小空间中显示表格的方法。我们隐藏了 HTML 内容，因为它非常大，并且没有什么值得注意的地方。此示例中的 CSS 更值得检查。

CSS

查看这些样式时，您会注意到表格的display属性已设置为block。虽然这允许滚动，但表格失去了一些完整性，并且表格单元格会尝试变得尽可能小。为了缓解这个问题，我们已将white-space设置为<tbody>上的nowrap。但是，我们不对<thead>执行此操作，以避免长标题强制列比显示数据所需的宽度更宽。

为了在向下滚动时保持表格标题在页面上，我们将position设置为<th>元素的粘性。请注意，我们没有将border-collapse设置为collapse，因为如果我们这样做，标题就无法正确地与表格的其余部分分离。

考虑到<table>具有固定大小，此处将overflow设置为auto是重要部分，因为它使表格可滚动。

css
table,
th,
td {
  border: 1px solid black;
}

table {
  overflow: auto;
  width: 100%;
  max-width: 400px;
  height: 240px;
  display: block;
  margin: 0 auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: white;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}

结果

技术摘要

内容类别 流内容
允许内容 按此顺序
  1. 一个可选的<caption>元素，
  2. 零个或多个<colgroup>元素，
  3. 一个可选的<thead>元素，
  4. 以下两者之一
    • 零个或多个<tbody>元素
    • 一个或多个<tr>元素
  5. 一个可选的<tfoot>元素
标签省略 无，起始标签和结束标签都必须存在。
允许父级 任何接受流内容的元素
隐式 ARIA 角色 table
允许的 ARIA 角色 任意
DOM 接口 HTMLTableElement

规范

规范
HTML
# the-table-element

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后修改于 ，由 MDN 贡献者修订。

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