<tbody>: 表格主体元素

基线 广泛可用

此功能非常成熟，并且可以在许多设备和浏览器版本上正常工作。它已在浏览器中可用，自 2015 年 7 月.

<tbody> HTML 元素封装了一组表格行 (<tr> 元素)，表明它们构成了表格的 (主要) 数据主体。

试一试

属性

此元素包括 全局属性。

已弃用属性

以下属性已弃用，不应使用。它们在下面记录是为了在更新现有代码时参考，以及为了历史记录。

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> 元素的内容通常会在各页之间有所不同。
  • 当表格在屏幕环境（如窗口）中呈现，而屏幕环境不足以显示整个表格时，用户代理 可以让用户分别滚动 <thead>、<tbody>、<tfoot> 和 <caption> 块的内容，而这些块属于同一个父级 <table>。

示例

有关完整表格示例，介绍常见标准和最佳实践，请参阅 <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;
}

结果

基本主体结构

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

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: #fff;
}

结果

多个主体

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

使用多个 <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: #fff;
}

结果

技术摘要

内容类别 无。
允许内容 零个或多个 <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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅