<tbody>: 表格主体元素

Baseline 广泛可用 *

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

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

<tbody> HTML 元素封装了一组表格行（<tr> 元素），表示它们构成了表格主体（主要）数据。

试一试

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

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;
}

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

td {
  text-align: center;
}

属性

此元素包含全局属性。

已弃用属性

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

align 已弃用: 指定每个表格主体单元格的水平对齐方式。可能的枚举值为 left、center、right、justify 和 char。当支持时，char 值将文本内容与 char 属性中定义的字符对齐，并与 charoff 属性定义的偏移量对齐。请改用 text-align CSS 属性，因为此属性已废弃。
bgcolor 已弃用: 定义每个表格主体单元格的背景颜色。该值是 HTML 颜色；可以是带 # 前缀的6 位十六进制 RGB 代码，也可以是颜色关键字。不支持其他 CSS <color> 值。请改用 background-color CSS 属性，因为此属性已废弃。
char 已弃用: 指定每个表格主体单元格内容与字符的对齐方式。通常用于对齐数字或货币值，例如句点（.）。如果 align 未设置为 char，则此属性将被忽略。
charoff 已弃用: 指定表格主体单元格内容相对于 char 属性指定的对齐字符的偏移字符数。
valign 已弃用: 指定每个表格主体单元格的垂直对齐方式。可能的枚举值为 baseline、bottom、middle 和 top。请改用 vertical-align CSS 属性，因为此属性已废弃。

用法说明

<tbody> 放置在任何 <caption>、<colgroup> 和 <thead> 元素之后。
如果 <tr> 元素被指定为 <table> 的直接子元素（有关何时有效，请参阅技术摘要中的“标签省略”描述），则浏览器生成的标记将包含一个封装它们的 <tbody> 元素。因此，诸如 table > tr 之类的 CSS 选择器将不会选择这些元素。另请参阅不指定主体示例。
允许在一个表格中使用多个 <tbody>，只要它们都是连续的。这允许将大型表格中的行（<tr> 元素）分成多个部分，如果需要，每个部分都可以单独格式化。如果未标记为连续元素，浏览器将纠正此作者错误，确保任何 <thead> 和 <tfoot> 元素分别作为表格的第一个和最后一个元素呈现。
与其相关的 <thead> 和 <tfoot> 元素一样，<tbody> 元素提供有用的语义信息，可用于屏幕或打印渲染。指定此类表格内容组还为辅助技术（包括屏幕阅读器和搜索引擎）提供有价值的上下文信息。
打印文档时，如果表格跨多页，<thead> 和 <tfoot> 元素通常指定每页保持相同或至少非常相似的信息，而 <tbody> 元素的内容通常会逐页不同。
当表格呈现在一个无法显示整个表格的屏幕上下文（例如窗口）中时，用户代理可以允许用户在同一个父 <table> 元素中独立滚动 <thead>、<tbody>、<tfoot> 和 <caption> 块的内容。

示例

请参阅 <table> 以获取一个完整的表格示例，其中介绍了常见的标准和最佳实践。

不指定主体

此示例演示，如果表格行未嵌套在表格分组元素（<tbody>、<tfoot> 或 <thead>）中，并且像此示例一样是 <table> 元素的直接子元素，则浏览器会自动将 <tr> 元素封装在 <tbody> 元素中。

HTML

这里创建了一个非常基本的表格，其中包含一些表格行（<tr> 元素），其中包含有关学生的数据（<td> 元素）。

html

<table>
  <tr>
    <td>3741255</td>
    <td>Jones, Martha</td>
    <td>Computer Science</td>
    <td>240</td>
  </tr>
  <tr>
    <td>3971244</td>
    <td>Nim, Victor</td>
    <td>Russian Literature</td>
    <td>220</td>
  </tr>
  <tr>
    <td>4100332</td>
    <td>Petrov, Alexandra</td>
    <td>Astrophysics</td>
    <td>260</td>
  </tr>
</table>

CSS

请注意示例中的 CSS，其中为 <tbody> 元素指定了 background-color，并且 tbody 作为附加 CSS 选择器的一部分使用。或者，可以使用浏览器开发者工具来检查 DOM 中 <tbody> 元素的存在。

css

tbody {
  background-color: #e4f0f5;
}

tbody > tr > td:last-of-type {
  width: 60px;
  text-align: center;
}

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

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

结果

基本主体结构

此示例扩展和增强了上一个示例中的基本表格。

HTML

我们引入了表格头（<thead> 元素）并明确使用 <tbody> 元素将表格结构化为语义部分。表格头包含列标题（<th> 元素）。<tbody> 元素表示表格的主体部分，其中包含多行（<tr> 元素）表格的主要数据，即每个学生的数据。

使用此类表格内容组和语义标记不仅有助于视觉呈现（通过 CSS 样式）和辅助技术的上下文信息；此外，明确使用 <tbody> 元素有助于浏览器创建预期的表格结构，避免不需要的结果。

html

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

CSS 与上一个示例几乎没有变化，除了添加了一些基本样式来突出显示表格头，以便列标题在表格主体数据中脱颖而出。与上面的示例一样，tbody 类型选择器用于设置主体单元格的样式。

css

tbody {
  background-color: #e4f0f5;
}

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

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

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

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

结果

多个主体

此示例通过引入多个主体部分，进一步扩展和增强了上面的示例中的表格。

使用多个 <tbody> 元素可以在表格中创建行分组。每个表格主体都可以有自己的标题行；但是，每个表格只能有一个 <thead> 元素！因此，带有 <th> 元素的 <tr> 可以用于在每个 <tbody> 中创建标题。

HTML

在上一个基本示例的表格基础上，添加了更多学生，并且不再在每一行中列出每个学生的专业，而是按专业对学生进行分组。请注意，每个专业都包含在自己的 <tbody> 块中，第一行（<tr> 元素）作为该块的头部，在 <th> 元素中显示专业标题，该元素使用 colspan 属性将标题跨越表格的所有三列。每个专业 <tbody> 中剩余的每一行代表一个学生。

html

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3">Computer Science</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>240</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
      <td>200</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
      <td>230</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Russian Literature</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>220</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Astrophysics</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>260</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
      <td>240</td>
    </tr>
  </tbody>
</table>

CSS

大多数 CSS 没有变化。然而，为直接包含在 <tbody> 中的标题单元格（与 <thead> 中的标题单元格相对）添加了一种稍微更微妙的样式。这用于指示每个表格部分对应专业的标题。

css

tbody > tr > th {
  border-top: 2px solid rgb(160 160 160);
  border-bottom: 1px solid rgb(140 140 140);
  background-color: #e4f0f5;
  font-weight: normal;
}

tbody {
  background-color: whitesmoke;
}

thead {
  background-color: #2c5e77;
  color: white;
}

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

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 6px 8px;
  text-align: left;
}

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

结果

技术摘要

内容类别	无。
允许内容	零个或多个 `<tr>` 元素。
标签省略	如果 `<tbody>` 元素内的第一个内容是 `<tr>` 元素，并且该元素前面没有立即跟着 `<tbody>`、`<thead>` 或 `<tfoot>` 元素且其结束标签已被省略，则可以省略 `<tbody>` 元素的开始标签。（如果元素为空，则不能省略。）如果 `<tbody>` 元素后面立即跟着 `<tbody>` 或 `<tfoot>` 元素，或者父元素中没有更多内容，则可以省略 `<tbody>` 元素的结束标签。
允许父级	在必需的父 `<table>` 元素中，`<tbody>` 元素可以放置在任何 `<caption>`、`<colgroup>` 和 `<thead>` 元素之后。
隐式 ARIA 角色	`rowgroup`
允许的 ARIA 角色	任意
DOM 接口	`HTMLTableSectionElement`

规范

规范
HTML # the-tbody-element

浏览器兼容性

另见

学习：HTML 表格基础
<caption>、<col>、<colgroup>、<table>、<td>、<tfoot>、<th>、<thead>、<tr>：其他与表格相关的元素
background-color：设置每个表格主体单元格背景颜色的 CSS 属性
border：控制表格主体单元格边框的 CSS 属性
text-align：水平对齐每个表格主体单元格内容的 CSS 属性
vertical-align：垂直对齐每个表格主体单元格内容的 CSS 属性

帮助改进 MDN

了解如何贡献

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

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