1. Web
  2. HTML
  3. 參考
  4. 元素
  5. <tr>

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

結果

表頭行

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

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> 的行（<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> 元素，以便它按值遞增的順序對錶格單元格進行排序並相應地更新顯示。

js
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 程式碼中用於使其可點選，然後在每次點選啟用時執行相應的排序。

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> 元素由純文字填充，沒有子元素。

js
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 創作實踐指南的可排序表格示例。

技術摘要

內容類別 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

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者 於 修改。

在 GitHub 上檢視此頁面 • 報告此內容問題
© . Content available under a Creative Commons license.