HTML `<tr>` 表の行要素

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

<tr> は HTML の要素で、表の中のセルの行を定義します。行のセルには <td> （行のセル）および <th> （見出しセル）要素を混在させることができます。

試してみましょう

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</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 属性で定義されたオフセットに基づいて、テキストコンテンツを配置します。この属性は非推奨となっているため、代わりに CSS の text-align プロパティを使用してください。
bgcolor: 文字列で、行の各セルの背景色を定義します。この値は HTML 色であり、6 桁の 16 進数の RGB コードの前に '#' が付いた形、または色キーワードのどちらかです。それ以外の CSS の <color> 値には対応していません。この属性は非推奨ですので、代わりに CSS の background-color プロパティを使用してください。
char: それぞれの行のセル内のコンテンツを、そのセル内の文字に対して配置する位置を指定します。よくある値としては、数値や金額を配置する場合のピリオド (.) があります。align が char に設定されていない場合、この属性は無視されます。
charoff: char 属性で指定された配置文字から、行のセルのコンテンツをオフセットする文字数を指定します。
valign: 列内の各セルの垂直方向の配置を指定します。指定可能な列挙値は、baseline、bottom、middle、top です。この属性は非推奨となっているため、代わりに CSS の vertical-align プロパティを使用してください。

使用上の注意

<tr> 要素は、<thead>、<tbody>、<tfoot> 要素の子要素としてのみ有効です。
<tr> が親要素である <table> の直接の子要素として配置されている場合、<tbody> 要素が暗黙的に親として扱われ、ブラウザーがマークアップに <tbody> を追加します。
暗黙の親要素 <tbody> は、<table> が子要素として <tbody> を持っていない場合であり、かつ <tr> が <caption>、<colgroup>、<thead> 要素のどれよりも後に記載されている場合にのみ対応します。
CSS の擬似クラス :nth-of-type、 :first-of-type、:last-of-type は、多くの場合、目的の行のセットとその行のセルおよび見出しセル（<td> および <th> 要素）を選択する際に役立ちます。
<tr> が <table> の直接の子要素として含まれている場合、ブラウザーがマークアップに <tbody> を追加するため、table > tr などの CSS セレクターが期待通りに動作しない、あるいはまったく動作しないことがあります。

例

一般的な標準や最善の手法を紹介する完全な表の例については、<table> をご覧ください。

基本的な行の作成

この例では、4 行 3 列の表を示しています。最初の列には、行のデータセルに対する見出しが含まれています。

HTML

4 つの <tr> 要素を使用して、表に 4 つの行を作成します。それぞれの行には 3 つのセル（1 つの見出しセル（<th>）と 2 つのデータセル（<td>））が含まれており、3 つの列が形成されます。それぞれの見出しセルに設定された 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;
}

結果

ヘッダー行

この例では、前回の例の基本的な表を拡張し、表の 1 行目としてヘッダー行を追加しています。

HTML

表の 1 行目として追加の行 (<tr>) が追加され、それぞれの列のヘッダーとなる見出しセル (<th>) が指定されます。この行を <thead> グループ化要素内に配置することで、これが表のヘッダーである旨を示します。scope 属性を、このヘッダー行内の各見出しセル (<th>) に追加し、たとえそれらのセルが <tbody> 内にあったとしても、各見出しセルが同じの列内のすべてのセルに関連していることを明示的に指定します。

html

<table>
  <thead>
    <tr>
      <th scope="col">記号</th>
      <th scope="col">Code word</th>
      <th scope="col">発音</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 を使用することで、<tr> 要素の HTMLCollection をソートするための独自の sort() 関数を JavaScript で実装することができます。

HTML

この基本的な表では、<tbody> 要素を使用して表の本体部分を指定し、データ（<td> 要素）を含む 3 つの行（<tr> 要素）を配置することで、降順で並んだ数値からなる 1 つの列を作成しています。

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

追加のデータセル（<td> 要素）を、テーブル本体（<tbody> 要素）内のそれぞれの行（<tr> 要素）に追加し、アルファベットの昇順に並んだ 2 つ目となる列を作成します。<thead> 要素を使用し、本体セクションの前にヘッダーセクションを追加して、表見出しセル（<th> 要素）を含むヘッダー行を導入します。これらの見出しセルは、後述の JavaScript コードで使用して、クリック可能に設定し、クリックによってアクティブ化された際に対応するソートを実行します。

html

<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> 要素）がソートされます。

メモ: この解決策では、<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 Authoring Practices Guide の sortable table example をご覧ください。

技術的概要

コンテンツカテゴリー	なし
許可されている内容	0 個以上の `<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 の貢献者によって 2026年5月25日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

HTML <tr> 表の行要素

HTML

CSS

結果

HTML

CSS

結果

HTML

JavaScript

結果

HTML

JavaScript

結果

MDN の改良に協力

HTML `<tr>` 表の行要素