<tr>：表格行元素

Baseline 广泛可用 *

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

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

<tr> HTML 元素定义了表格中的一行单元格。该行的单元格可以通过混合使用 <td>（数据单元格）和 <th>（表头单元格）元素来创建。

试一试

<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

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

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

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

属性

此元素包含全局属性。

已弃用属性

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

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 中的所有数据单元格。

html

<table>
  <tbody>
    <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>
  </tbody>
</table>

CSS

CSS :nth-of-type 伪类用于选择每个 odd 行，并将这些行的 background-color 设置为稍深的色调，从而创建所谓的“斑马条纹”效果。这种交替背景使表格中的数据行更容易解析和阅读——想象一下有许多行和列，并试图在特定行中查找一些数据。此外，行表头单元格（<th> 元素）通过 background-color 突出显示，以区别于数据单元格（<td> 元素）。

css

tr:nth-of-type(odd) {
  background-color: #eeeeee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

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

结果

表头行

此示例通过在表格的第一行添加表头行来扩展上一个示例中的基本表格。

HTML

表格中新增了一行（<tr>），作为表格的第一行，其中包含列表头单元格（<th>），为每一列提供表头。我们将此行放入 <thead> 分组元素中，以表明这是表格的表头。此表头行中每个表头单元格（<th>）都添加了 scope 属性，以明确指定每个表头单元格与其自身列中的所有单元格相关，即使这些单元格位于 <tbody> 中。

html

<table>
  <thead>
    <tr>
      <th scope="col">Symbol</th>
      <th scope="col">Code word</th>
      <th scope="col">Pronunciation</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

CSS

CSS 与上一个示例几乎没有变化，除了添加了一些额外的样式来突出显示“表头行”，使列的表头从其他单元格中脱颖而出。

css

tr:nth-of-type(odd) {
  background-color: #eeeeee;
}

tr th[scope="col"] {
  background-color: #505050;
  color: white;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

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

结果

排序行

没有原生方法可以对 <table> 的行（<tr> 元素）进行排序。但是，使用 Array.prototype.sort()、Node.removeChild 和 Node.appendChild，可以在 JavaScript 中实现一个自定义的 sort() 函数来排序 <tr> 元素的 HTMLCollection。

HTML

此基本表格中使用了一个 <tbody> 元素来标记表格的主体部分，并包含三行（<tr> 元素）带有数据（<td> 元素），从而创建一列按降序排列的数字。

html

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

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: 4px 8px;
}

结果

点击表头单元格进行行排序

此示例通过使排序交互式和对多列独立来扩展上一个示例中的基本表格。

HTML

在表格主体（<tbody> 元素）中的每一行（<tr> 元素）中添加了一个额外的数据单元格（<td> 元素），以创建第二列，其中包含按升序排列的字母。使用 <thead> 元素，在主体部分之前添加了一个头部部分，以引入一个包含表格表头单元格（<th> 元素）的表头行。这些表头单元格在下面的 JavaScript 代码中用于使其可点击，然后在每次点击激活时执行相应的排序。

html

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

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: 4px 8px;
}

th {
  background-color: #505050;
  color: white;
  cursor: pointer;
}

结果

注意：为了可用和可访问，每个可排序列的表头单元格必须可识别为排序按钮，并且每个表头单元格都必须在视觉上以及使用 aria-sort 属性定义该列当前是按升序还是降序排序。有关更多信息，请参阅 ARIA 创作实践指南的可排序表格示例。

技术摘要

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

浏览器兼容性

另见

学习：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 伪类

帮助改进 MDN

了解如何贡献

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

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