<tbody>: The Table Body element

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

¥Deprecated attributes

以下属性已被弃用，不应使用。下面记录了它们，供更新现有代码时参考，并且仅供历史参考。

¥The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

align Deprecated

指定每个主体单元的水平对齐方式。可能的 enumerated 值为 left、center、right、justify 和 char。如果受支持，char 值会将文本内容与 char 属性中定义的字符以及 charoff 属性定义的偏移量对齐。请改用 text-align CSS 属性，因为此属性已弃用。

bgcolor Deprecated

定义每个主体单元的背景颜色。该值是 HTML 颜色；6 位十六进制 RGB 代码（前缀为“#”）或 颜色关键词。不支持其他 CSS <color> 值。请改用 background-color CSS 属性，因为此属性已弃用。

char Deprecated

指定内容与每个正文单元的字符的对齐方式。当尝试对齐数字或货币值时，此值的典型值包括句点 (.)。如果 align 未设置为 char，则忽略该属性。

charoff Deprecated

指定正文单元内容从 char 属性指定的对齐字符偏移的字符数。

valign Deprecated

指定每个主体单元的垂直对齐方式。可能的 enumerated 值为 baseline、bottom、middle 和 top。请改用 vertical-align CSS 属性，因为此属性已弃用。

¥Usage notes

• <tbody> 放置在任何 <caption>、<colgroup> 和 <thead> 元素之后。
• 如果 <tr> 元素在现有 <tbody> 元素之外指定为 <table> 的直接子元素，则这些元素将由浏览器生成的单独 <tbody> 元素封装。
• 每个表允许使用多个 <tbody>，只要它们都是连续的即可。这允许将大表中的行（<tr> 元素）划分为多个部分，如果需要，每个部分都可以单独格式化。如果未标记为连续元素，浏览器将纠正此作者错误，确保任何 <thead> 和 <tfoot> 元素分别呈现为表的第一个和最后一个元素。
• 与相关的 <thead> 和 <tfoot> 元素一起，<tbody> 元素提供了有用的 semantic 信息，并且可以在渲染屏幕或打印时使用。指定此类表格内容组还可以为辅助技术（包括屏幕阅读器和搜索引擎）提供有价值的上下文信息。
• 打印文档时，对于多页表格，<thead> 和 <tfoot> 元素通常指定在每页上保持相同（或至少非常相似）的信息，而 <tbody> 元素的内容通常会因页而异。
• 当表格呈现在不够大而无法显示整个表格的屏幕上下文（例如窗口）中时，user agent 可以让用户分别滚动 <thead>、<tbody>、<tfoot> 和 <caption> 块的内容 对于同一个父对象 <table>。

¥Examples

请参阅 <table> 了解介绍通用标准和最佳实践的完整表格示例。

¥See <table> for a complete table example introducing common standards and best practices.

¥Not specifying a body

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

¥This example demonstrates that the browser automatically encapsulates <tr> elements within a <tbody> element if the rows are not nested within a table grouping element (<tbody>, <tfoot>, or <thead>) and are, as in this example, the direct children of the <table> element.

HTML

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

¥Here, a very basic table with some table rows (<tr> elements) containing data (<td> elements) about students is created.

<table>
  <tr>
    <td>3741255</td>
    <td>琼斯，玛莎</td> 
    <td>计算机科学</td>
    <td>240</td>
  </tr>
  <tr>
    <td>3971244</td>
    <td>尼姆·维克托</td> 
    <td>俄罗斯文学</td>
    <td>220</td>
  </tr> 
  <tr>
    <td>4100332</td>
    <td>亚历山德拉·彼得罗夫</td> 
    <td>天体物理学</td>
    <td>260</td>
  </tr>
</table>

CSS

请注意示例中的 CSS，其中为 <tbody> 元素指定了 background-color，而 tbody 用作附加 CSS selector 的一部分。或者，browser developer tools 可用于检查 DOM 中是否存在 <tbody> 元素。

¥Note the CSS in the example, where a background-color is specified for the <tbody> element and the tbody is used as a part of an additional CSS selector. Alternatively, browser developer tools can be used to check the presence of the <tbody> element in the DOM.

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

结果

¥Result

¥Basic body structure

该示例扩展并增强了 前面的例子 的基本表。

¥This example extends and enhances the basic table from the previous example.

HTML

我们引入表头（<thead> 元素）并显式使用 <tbody> 元素将表构造为 semantic 部分。表头包含列标题（<th> 元素）。<tbody> 元素表示表的主体部分，其中包含许多行（<tr> 元素），其中包含表的主要数据，即每个学生的数据。

¥We introduce a table head (<thead> element) and explicitly use a <tbody> element to structure the table into semantic sections. The table head contains the column headers (<th> elements). The <tbody> element represents the body section of the table, which contains a number of rows (<tr> elements) with the table's main data, which is the data of each student.

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

¥The use of such table content groups and semantic markup is not only useful for visual presentation (via CSS styling) and contextual information for assistive technologies; moreover, the explicit use of the <tbody> element helps the browser to create the intended table structure, avoiding unwanted results.

<table>
  <thead>
    <tr>
      <th>学生卡</th>
      <th>名称</th> 
      <th>主要的</th>
      <th>致谢</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>琼斯，玛莎</td> 
      <td>计算机科学</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>尼姆·维克托</td> 
      <td>俄罗斯文学</td>
      <td>220</td>
    </tr> 
    <tr>
      <td>4100332</td>
      <td>亚历山德拉·彼得罗夫</td> 
      <td>天体物理学</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

CSS 与 前面的例子 相比几乎没有变化，除了一些高亮表头的基本样式，以便列标题从表体中的数据中脱颖而出。与 上面的例子 一样，tbody 类型选择器 用于设计主体单元的样式。

¥The CSS is nearly unchanged from the previous example, except for some basic styling to highlight the table head so that the headers of the columns stand out from the data in the table body. As in the example above, the tbody type selector is used to style the body cells.

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

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

结果

¥Result

¥Multiple bodies

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

¥This example extends and enhances the table from the example above even more by introducing multiple body sections.

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

¥Using multiple <tbody> elements allows creating row groupings within a table. Each table body can potentially have its own head row or rows; however, there may only be one <thead> element per table! Because of that, <tr> with <th> elements can be used to create headers within each <tbody>.

HTML

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

¥Building on the table in the previous basic example, more students are added and, instead of listing each student's major on each row, the students are grouped by major. Note that each major is enclosed within its own <tbody> block, with the first row (<tr> element) serving as the head of the block, displaying the major title within a <th> element that uses the colspan attribute to span the header across all three columns of the table. Each remaining row within each major's <tbody> represents one student.

<table>
  <thead>
    <tr>
      <th>学生卡</th>
      <th>名称</th> 
      <th>致谢</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3">计算机科学</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>琼斯，玛莎</td> 
      <td>240</td>
    </tr> 
    <tr>
      <td>4077830</td>
      <td>本杰明·皮尔斯</td> 
      <td>200</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>柯克、詹姆斯</td> 
      <td>230</td>
    </tr>
  </tbody> 
  <tbody>
    <tr>
      <th colspan="3">俄罗斯文学</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>尼姆·维克托</td> 
      <td>220</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">天体物理学</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>亚历山德拉·彼得罗夫</td> 
      <td>260</td>
    </tr> 
    <tr>
      <td>8892377</td>
      <td>丰田、弘子</td> 
      <td>240</td>
    </tr>
  </tbody>
</table>

CSS

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

¥Most of the CSS is unchanged. However, a slightly more subtle style is added for header cells contained directly within a <tbody> (as opposed to those that reside in the <thead>). This is used for the headers indicating each table section's corresponding major.

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

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

结果

¥Result

¥Technical summary

¥See also

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