: 表格主体元素

: 表格主体元素基线 广泛可用此功能非常成熟，并且可以在许多设备和浏览器版本上正常工作。它已在浏览器中可用，自 2015 年 7 月.

了解更多信息查看完整兼容性报告反馈 HTML 元素封装了一组表格行 ( 元素)，表明它们构成了表格的 (主要) 数据主体。

试一试属性此元素包括 全局属性。

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

align 已弃用

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

bgcolor 已弃用

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

char 已弃用

指定每个主体单元格的内容对齐到字符的位置。此属性的典型值包括句点 (.)，当尝试对齐数字或货币值时使用。如果 align 未设置为 char，则忽略此属性。

charoff 已弃用

指定主体单元格内容从 char 属性指定的对齐字符偏移的字符数。

valign 已弃用

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

使用说明

放在任何 、 和 元素之后。

如果 元素指定为

的直接子元素（有关何时有效，请参阅 技术摘要 中的“标记省略”），则浏览器生成的标记将包含一个 元素来封装它们。因此，诸如 table > tr 之类的 CSS 选择器将不会选择这些元素。另请参阅 未指定主体 示例。

允许每个表格使用多个

，只要它们都是连续的。这允许将大型表格中的行 ( 元素) 分成几部分，每个部分都可以根据需要单独格式化。如果未标记为连续元素，浏览器将更正此作者错误，确保任何 和 元素分别被渲染为表格的第一个和最后一个元素。

与相关的

和 元素一起， 元素提供了有用的 语义 信息，可用于屏幕或打印渲染。指定这样的表格内容组还为辅助技术（包括屏幕阅读器和搜索引擎）提供了有价值的上下文信息。

打印文档时，对于跨页表格，

和 元素通常指定在每页保持不变或至少非常相似的信息，而 元素的内容通常会在各页之间有所不同。

当表格在屏幕环境（如窗口）中呈现，而屏幕环境不足以显示整个表格时，用户代理 可以让用户分别滚动

、、 和 元素可以在表格中创建行分组。每个表格主体都可能拥有自己的头部行或多行；但是，每个表格只能有一个 元素！ 因此，可以使用包含 在每个 中创建标题。

HTML

基于 上一个基本示例 中的表格，添加了更多学生，并且没有在每行上列出每个学生的专业，而是按专业对学生进行了分组。请注意，每个专业都包含在其自己的

块中，第一行 ( 元素) 充当块的头部，在 中的其余行代表一个学生。

html

块的内容，而这些块属于同一个父级 。

示例有关完整表格示例，介绍常见标准和最佳实践，请参阅

。

不指定主体此示例演示了如果行未嵌套在表格分组元素（

、 或 ）内，而是像此示例一样，是 元素的直接子元素，则浏览器会自动将 元素封装在 元素中。

HTML

在此，创建了一个非常基本的表格，其中包含一些包含数据的表格行 (

元素) ( 元素指定了 background-color，并且 tbody 用作附加 CSS 选择器 的一部分。或者，可以使用 浏览器开发者工具 检查 DOM 中是否存在 元素。

csstbody {

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

我们引入了表格头部 (

元素)，并明确使用 元素将表格结构化为 语义 部分。表格头部包含列标题 ( 元素代表表格的正文部分，其中包含若干行 ( 元素)，这些行包含表格的主要数据，即每个学生的数据。

使用这样的表格内容组和 语义 标记不仅对视觉呈现（通过 CSS 样式）和辅助技术的上下文信息有用；此外，明确使用

元素有助于浏览器创建预期的表格结构，避免出现不希望的结果。

html

元素)，这些数据与学生有关。 html 3741255 Jones, Martha Computer Science 240 3971244 Nim, Victor Russian Literature 220 4100332 Petrov, Alexandra Astrophysics 260 CSS 请注意示例中的 CSS，其中为
元素)。

Student ID	Name	Major	Credits
3741255	Jones, Martha	Computer Science	240
3971244	Nim, Victor	Russian Literature	220
4100332	Petrov, Alexandra	Astrophysics	260

CSS

CSS 与 上一个示例 几乎相同，除了对表格头部进行了一些基本样式设置，以便表格头部中的列标题与表格正文中的数据区分开来。与 上例 一样，tbody 类型选择器 用于设置主体单元格的样式。

csstbody {

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;

}

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

使用多个

元素的
元素中显示专业标题，该元素使用 colspan 属性将标题跨越表格的全部三列。每个专业

Student ID	Name	Credits
Computer Science
3741255	Jones, Martha	240
4077830	Pierce, Benjamin	200
5151701	Kirk, James	230
Russian Literature
3971244	Nim, Victor	220
Astrophysics
4100332	Petrov, Alexandra	260
8892377	Toyota, Hiroko	240

CSS

大多数 CSS 保持不变。但是，为直接包含在 中的头部单元格（与位于 中的头部单元格相对）添加了稍微更细微的样式。这用于指示每个表格部分对应专业的标题。

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

}

结果技术摘要

内容类别

无。

允许内容

零个或多个 元素。

标记省略

如果 元素内的第一个内容是 元素，并且该元素没有紧接在 、 或 元素（其结束标记已省略）之前，则可以省略 元素的开始标记。（如果元素为空，则不能省略。）如果 元素紧接在 或 元素之后，或者父元素中没有更多内容，则可以省略 元素的结束标记。

允许的父元素

在必需的父级

元素中，可以将 元素添加到任何 和 元素之后。

隐式 ARIA 角色

rowgroup

允许的 ARIA 角色

任何

DOM 接口

HTMLTableSectionElement

规范规范HTML 标准 # the-tbody-element浏览器兼容性BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

了解：HTML 表格

、、

、

、

、、、：其他与表格相关的元素

background-color：CSS 属性，用于设置每个主体单元格的背景颜色

border：CSS 属性，用于控制主体单元格的边框

text-align：CSS 属性，用于水平对齐每个主体单元格的内容

vertical-align：CSS 属性，用于垂直对齐每个主体单元格的内容

、
、