<tr>：表格行元素

基線廣泛可用

此功能已得到充分確立，並且可在許多裝置和瀏覽器版本中使用。自以下時間起，它已在各瀏覽器中可用： 2015 年 7 月.

<tr> HTML 元素定義表格中的一行單元格。然後可以使用 <td>（資料單元格）和 <th>（表頭單元格）元素的組合來建立該行的單元格。

屬性

此元素包含全域性屬性。

已棄用屬性

以下屬性已棄用，不應使用。為了更新現有程式碼和僅出於歷史參考的目的，它們在下面有記錄。

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>
  <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> 元素) 區分開來。

css

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

結果

標題行

此示例透過新增標題行作為表格的第一行來擴充套件上一個示例中的基本表格。

HTML

一個額外的表格行 (<tr>) 作為表格的第一行新增，其中包含列標題單元格 (<th>)，為每一列提供標題。我們將此行放在 <thead> 分組元素中以指示這是表格的標題。在該標題行中，每個標題單元格 (<th>) 都添加了 scope 屬性，以明確指定每個標題單元格與自身列中的所有單元格相關聯，即使這些單元格位於 <tbody> 中。

html

<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 幾乎相同，只是添加了一些額外的樣式以突出顯示“標題行”，以便列標題與其他單元格區分開來。

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

結果

注意：為了可用和可訪問，每個可排序列的標題單元格必須能夠識別為排序按鈕，並且每個單元格都必須以視覺方式和使用 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 偽類來選擇所需的表格單元格。