<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 属性,因为此属性已弃用。
使用说明
<tr>
元素仅在<thead>
、<tbody>
或<tfoot>
元素中作为子元素时有效。- 如果
<tr>
作为其父<table>
元素的直接子元素放置,则会隐式包含<tbody>
父元素,浏览器会将<tbody>
添加到标记中。 - 仅当
<table>
否则没有子<tbody>
元素,并且仅当<tr>
包含在任何<caption>
、<colgroup>
和<thead>
元素之后时,才会支持隐式<tbody>
父元素。 - CSS 伪类
:nth-of-type
、:first-of-type
和:last-of-type
通常用于选择所需的行集及其数据和标题单元格 (<td>
和<th>
元素)。 - 当
<tr>
作为<table>
的直接子元素包含时,由于浏览器会将<tbody>
添加到标记中,因此table > tr
等 CSS 选择器可能无法按预期工作或根本无法工作。
示例
有关完整表格示例(介绍常见标准和最佳实践),请参阅 <table>
。
基本行设置
此示例演示了一个包含四行三列的表格,其中第一列包含行数据单元格的标题。
HTML
使用四个 <tr>
元素创建四个表格行。每行包含三个单元格 - 一个标题单元格 (<th>
) 和两个数据单元格 (<td>
) - 创建三列。每个标题单元格上设置的 scope
属性指定它们所关联的单元格,在此示例中,这些单元格是 row
中的所有数据单元格。
<table>
<tr>
<th scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
</tr>
<tr>
<th scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td>DELL tah</td>
</tr>
</table>
CSS
CSS :nth-of-type
伪类用于选择每个 odd
行,并将这些行的 background-color
设置为稍暗的色调,从而创建所谓的“斑马条纹”效果。这种交替的背景使表格中的数据行更容易解析和阅读——想象一下,如果有很多行和列,并且尝试在特定行中查找某些数据。此外,行标题单元格 (<th>
元素) 以 background-color
高亮显示,以将其与数据单元格 (<td>
元素) 区分开来。
tr:nth-of-type(odd) {
background-color: #eee;
}
tr th[scope="row"] {
background-color: #d6ecd4;
}
结果
标题行
此示例通过添加标题行作为表格的第一行来扩展 上一个示例 中的基本表格。
HTML
一个额外的表格行 (<tr>
) 作为表格的第一行添加,其中包含列标题单元格 (<th>
),为每一列提供标题。我们将此行放在 <thead>
分组元素中以指示这是表格的标题。在该标题行中,每个标题单元格 (<th>
) 都添加了 scope
属性,以明确指定每个标题单元格与自身列中的所有单元格相关联,即使这些单元格位于 <tbody>
中。
<table>
<tr>
<th scope="col">Symbol</th>
<th scope="col">Code word</th>
<th scope="col">Pronunciation</th>
</tr>
<tr>
<th scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
</tr>
<tr>
<th scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td>DELL tah</td>
</tr>
</table>
CSS
CSS 与 上一个示例 中的 CSS 几乎相同,只是添加了一些额外的样式以突出显示“标题行”,以便列标题与其他单元格区分开来。
tr:nth-of-type(odd) {
background-color: #eee;
}
tr th[scope="col"] {
background-color: #505050;
color: #fff;
}
tr th[scope="row"] {
background-color: #d6ecd4;
}
结果
排序行
没有对 <table>
的行 (<tr>
元素) 进行排序的原生方法。但是,使用 Array.prototype.sort()
、Node.removeChild
和 Node.appendChild
,可以在 JavaScript 中实现自定义 sort()
函数以对 <tr>
元素的 HTMLCollection
进行排序。
HTML
在此基本表格中,使用 <tbody>
元素标记表格的主体部分,并包含三行 (<tr>
元素) 和数据 (<td>
元素),创建一列,其中包含按降序排列的数字。
<table>
<tbody>
<tr>
<td>3</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>1</td>
</tr>
</tbody>
</table>
JavaScript
在下面的 JavaScript 代码中,创建的 sort()
函数附加到 <tbody>
元素,以便它按值的升序对表格单元格进行排序并相应地更新显示。
HTMLTableSectionElement.prototype.sort = function (cb) {
Array.from(this.rows)
.sort(cb)
.forEach((e) => this.appendChild(this.removeChild(e)));
};
document
.querySelector("table")
.tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
结果
通过单击标题单元格排序行
此示例通过使排序交互式且在多个列中独立进行来扩展 上一个示例 中的基本表格。
HTML
在表格主体 (<tbody>
元素) 中的每行 (<tr>
元素) 中添加一个额外的数据单元格 (<td>
元素),以创建第二列,其中包含按升序排列的字母。使用 <thead>
元素,在主体部分之前添加一个标题部分以引入包含表格标题单元格 (<th>
元素) 的标题行。这些标题单元格在下面的 JavaScript 代码中用于使其可点击,然后在每次点击时执行相应的排序。
<table>
<thead>
<tr>
<th>Numbers</th>
<th>Letters</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>1</td>
<td>C</td>
</tr>
</tbody>
</table>
JavaScript
在 document
中的每个 <table>
的每个表格标题 (<th>
元素) 中添加了一个点击事件处理程序;它根据行中包含的数据单元格 (<td>
元素) 的内容对 <tbody>
的所有行 (<tr>
元素) 进行排序。
注意:此解决方案假设 <td>
元素由原始文本填充,没有后代元素。
const allTables = document.querySelectorAll("table");
for (const table of allTables) {
const tBody = table.tBodies[0];
const rows = Array.from(tBody.rows);
const headerCells = table.tHead.rows[0].cells;
for (const th of headerCells) {
const cellIndex = th.cellIndex;
th.addEventListener("click", () => {
rows.sort((tr1, tr2) => {
const tr1Text = tr1.cells[cellIndex].textContent;
const tr2Text = tr2.cells[cellIndex].textContent;
return tr1Text.localeCompare(tr2Text);
});
tBody.append(...rows);
});
}
}
结果
注意:为了可用和可访问,每个可排序列的标题单元格必须能够识别为排序按钮,并且每个单元格都必须以视觉方式和使用 aria-sort
属性定义列当前是按升序还是降序排序。有关更多信息,请参阅 ARIA 创作实践指南 的 可排序表格示例。
技术摘要
内容类别 | 无 |
---|---|
允许的内容 | 零个或多个 <td> 和/或 <th> 元素;还允许 支持脚本的元素 (<script> 和 <template> )。 |
标签省略 | 开始标签是必需的。如果 <tr> 元素紧跟在 <tr> 元素之后,或者如果该行是其父表格组 (<thead> 、<tbody> 或 <tfoot> ) 元素中的最后一个元素,则可以省略结束标签。 |
允许的父元素 |
<table> (仅当表格没有子 <tbody> 元素时,并且即使如此,也仅在任何 <caption> 、<colgroup> 和 <thead> 元素之后);否则,父元素必须是 <thead> 、<tbody> 或 <tfoot> 元素。 |
隐式 ARIA 角色 | row |
允许的 ARIA 角色 | 任何 |
DOM 接口 | HTMLTableRowElement |
规范
规范 |
---|
HTML 标准 # the-tr-element |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
- 学习:HTML 表格
<caption>
、<col>
、<colgroup>
、<table>
、<tbody>
、<td>
、<tfoot>
、<th>
、<thead>
:其他与表格相关的元素background-color
:用于设置每个单元格行背景颜色的 CSS 属性border
:用于控制单元格行边框的 CSS 属性text-align
:用于水平对齐每个单元格行内容的 CSS 属性vertical-align
:用于垂直对齐每个单元格行内容的 CSS 属性- 使用
:nth-of-type
、:first-of-type
和:last-of-type
:CSS 伪类来选择所需的表格单元格。