<tr>: The Table Row 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

• <tr> 可以放置为其父 <table> 元素的直接子元素，但前提是 <table> 没有子 <tbody> 元素，并且仅位于任何 <caption>、<colgroup> 和 <thead> 元素之后。否则，父元素必须是 <thead>、<tbody> 或 <tfoot> 元素。
• CSS 伪类 :nth-of-type、:first-of-type 和 :last-of-type 通常可用于选择所需的行集及其数据和标题单元格（<td> 和 <th> 元素）。

¥Examples

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

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

¥Basic row setup

此示例演示了一个具有四行三列的表格，其中第一列包含行数据单元格的标题。

¥This example demonstrates a table with four rows and three columns, where the first column contains headers for the row data cells.

HTML

四个 <tr> 元素用于创建四个表行。每行包含三个单元格 - 一个标题单元格 (<th>) 和两个数据单元格 (<td>) - 创建三列。每个标题单元格上设置的 scope 属性指定它们与哪些单元格相关，在本例中是 row 中的所有数据单元格。

¥Four <tr> elements are used to create four table rows. Each row contains three cells - one header cell (<th>) and two data cells (<td>) - creating three columns. The scope attribute set on each header cell specifies which cells they relate to, which in this example is all data cells within the row.

<table>
  <tr>
    <th scope="row">A</th>
    <td>阿尔法</td> 
    <td>阿尔法赫</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>布拉沃</td> 
    <td>BRAH voh</td>
  </tr> 
  <tr>
    <th scope="row">C</th>
    <td>查理</td> 
    <td>查利</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>三角洲</td> 
    <td>戴尔他</td>
  </tr>
</table>

CSS

CSS :nth-of-type 伪类用于选择每个 odd 行并将这些行的 background-color 设置为稍深的色调，从而创建所谓的 "斑马条纹" 效果。这种交替的背景使表中的数据行更易于解析和读取 - 想象一下有许多行和列并尝试在特定行中查找一些数据。此外，行标题单元格（<th> 元素）用 background-color 高亮，以将其与数据单元格（<td> 元素）区分开。

¥The CSS :nth-of-type pseudo-class is used to select every odd row and set the background-color of those rows to a slightly darker tone, creating a so-called "zebra stripe" effect. This alternating background makes the rows of data in the table easier to parse and read—imagine having many rows and columns and trying to find some data in a particular row. In addition, the row header cells (<th> elements) are highlighted with a background-color to distinguish them from the data cells (<td> elements).

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

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

结果

¥Result

¥Header row

此示例通过添加标题行作为表的第一行来扩展 前面的例子 的基本表。

¥This example extends the basic table from the previous example by adding a header row as the first row of the table.

HTML

添加一个附加表行 (<tr>) 作为表的第一行，其中列标题单元格 (<th>) 为每列提供标题。我们将此行放入 <thead> 分组元素中以指示这是表的标题。scope 属性添加到此头行中的每个标题单元格 (<th>)，以明确指定每个标题单元格与其自己列中的所有单元格相关，即使这些单元格位于 <tbody> 中。

¥An additional table row (<tr>) is added as the first row of the table with column header cells (<th>) providing a header for each column. We put this row in a <thead> grouping element to indicate this is the header of the table. The scope attribute is added to each header cell (<th>) within this head row to explicitly specify that each header cell relates to all the cells within its own column, even though those cells are in the <tbody>.

<table>
  <tr>
    <th scope="col">符合</th>
    <th scope="col">码字</th> 
    <th scope="col">发音</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>阿尔法</td> 
    <td>阿尔法赫</td>
  </tr> 
  <tr>
    <th scope="row">B</th>
    <td>布拉沃</td> 
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>查理</td> 
    <td>查利</td>
  </tr> 
  <tr>
    <th scope="row">D</th>
    <td>三角洲</td> 
    <td>戴尔他</td>
  </tr>
</table>

CSS

CSS 与 前面的例子 相比几乎没有变化，除了一些额外的样式来高亮 "标题行"，以便列的标题从其他单元格中脱颖而出。

¥The CSS is nearly unchanged from the previous example, except for some additional styling to highlight the "header row" so that the headers of the columns stand out from the other cells.

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 {
  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

¥Sorting rows

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

¥There are no native methods for sorting the rows (<tr> elements) of a <table>. But using Array.prototype.sort(), Node.removeChild, and Node.appendChild, a custom sort() function can be implemented in JavaScript to sort an HTMLCollection of <tr> elements.

HTML

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

¥A <tbody> element is used in this basic table to mark the body section of the table and to include three rows (<tr> elements) with data (<td> elements), creating one column with numbers in descending order.

<table>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
    </tr> 
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>

JavaScript

在下面的 JavaScript 代码中，创建的 sort() 函数附加到 <tbody> 元素，以便它按值递增的顺序对表格单元格进行排序，并相应地更新显示。

¥In the JavaScript code below, the created sort() function is attached to the <tbody> element so that it sorts the table cells in order of increasing value and updates the display accordingly.

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

结果

¥Result

¥Sorting rows with a click on header cells

此示例通过使多列的排序交互且独立，扩展了 前面的例子 的基本表。

¥This example extends the basic table from the previous example by making the sorting interactive and independent for multiple columns.

HTML

将附加数据单元格（<td> 元素）添加到表主体（<tbody> 元素）内的每一行（<tr> 元素），以创建第二列，其中字母按升序排列。使用 <thead> 元素，在正文部分之前添加一个标题部分，以引入带有表格标题单元格的标题行（<th> 元素）。这些标题单元格在下面的 JavaScript 代码中使用，使它们可点击，然后在每次点击激活时执行相应的排序。

¥An additional data cell (<td> element) is added to each row (<tr> element) within the table body (<tbody> element) to create a second column with letters in ascending order. Using the <thead> element, a head section is added before the body section to introduce a head row with table header cells (<th> element). These header cells are used in the JavaScript code below to make them clickable and then to perform the corresponding sorting when activated per click.

<table>
  <thead>
    <tr>
      <th>数字</th>
      <th>信件</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> 元素）进行排序。

¥A click event handler is added to each table header (<th> element) of each <table> in the document; it sorts all the rows (<tr> elements) of the <tbody> based on the contents of the data cells (<td> elements) contained in the rows.

注意：此解决方案假设 <td> 元素由原始文本填充，没有后代元素。

¥Note: This solution assumes that the <td> elements are populated by raw text with no descendant elements.

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

结果

¥Result

注意：为了可用和可访问，每个可排序列的标题单元格必须可识别为排序按钮，并且每个列必须定义该列当前是否以视觉方式按升序或降序排序并使用 aria-sort 属性。有关详细信息，请参阅 ARIA 创作实践指南 的 可排序表示例。

¥Note: To be usable and accessible, the header cell of each sortable column must be identifiable as a sorting button and each must define whether the column is currently sorted in ascending or descending order visually and with the aria-sort attribute. See the ARIA Authoring Practices Guide's sortable table example for more information.

¥Technical summary

¥See also

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