We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

HTML の <tr> 要素は、表内でセルの行を定義します。行のセルは <td> (データセル) 及び <th> (見出しセル) 要素をを混在させることができます。

コンテンツカテゴリー なし
許可されている内容 0 個以上の <td> 要素または <th> 要素。 スクリプト対応要素 (<script> および <template>) も許可されています。
タグの省略 開始タグは必須。<tr> 要素の直後に <tr> 要素がある場合、または親の表グループ要素 (<thead><tbody><tfoot>) 内で最後の要素である場合は終了タグを省略可能。
許可されている親要素 <table> 要素 (子の <tbody> を持たない場合で、<caption> 要素、<colgroup> 要素、<thead> 要素より後に限る)、<thead> 要素、<tbody> 要素、<tfoot> 要素
許可されている ARIA ロール すべて
DOM インターフェイス HTMLTableRowElement

HTML の <tr> 要素は、表のひとつの行で構成される <tr> ブロックを内部に持つマークアップを明示します。行の内部で <th> 要素および <td> 要素が、それぞれ見出しやデータのセルを生成します。それぞれの列は、自身の列に配置されます。ユーザーエージェントは、それぞれの行のセルを別のセルの行セルとともにどのように列へ配置するかを決める、固有の規則に従います。

セルをどのように列に収める (または列にまたがる) かを制御できるようにするため、<th> 及び <td>colspan 属性をサポートします。これはセルの幅をいくつの列にするかを指定でき、既定値は 1 です。同様に、セルが複数の行にまたがることを示す rowspan 属性も使用できます。

表を作成するとき、正しい表にするために少し経験が必要かもしれません。以下にいくつかがありますが、さらに多くの例や詳しいチュートリアルは、ウェブ開発を学ぶエリアのHTML tablesシリーズをご覧ください。表形式のデータを正しいレイアウトに整形するため、 table 要素やその属性の使い方を学ぶことができます。

属性

この要素にはグローバル属性があります。使用を避けるべき非推奨の属性もいくつかありますが、古いコードを読む際は知っている必要があるでしょう。

非推奨の属性

以下の属性は依然としてブラウザーが実装していますが、すでに HTML 仕様に含まれていませんのでまったく動作しない、あるいは期待どおりに動作しない可能性があります。使用は避けるべきです。

align HTML5 で廃止
行の各セルの中身について、水平方向の配置方法を制御する DOMString です。これは行内の全セルで個別に align を使用することに対する一括指定です。以下の値を指定可能です。
left
各セルの中身を左側に揃えます。
center
中身をセルの左端と右端の間で中央揃えにします。
right
各セルの中身を右側に揃えます。
justify
テキストが各セルの幅全体を満たす (両端揃え) ように、テキスト内のホワイトスペースを広げます。
char
行内の各セルを、特定の文字に対して揃えます (この方法で設定された列内の各行は、その文字に対して揃えます)。これは char 及び charoff を使用して、揃える文字 (数値データを揃える際の "." や "," が一般的です) および揃える文字に続く文字の数を指定します。この配置方法は、広くは対応されていませんでした。

align の値が明示的に設定されていない場合は、親ノードの値を継承します。

行内のセルで left, center, right, justify の配置方法を指定するには、廃止された align 属性に代わり、 CSS の text-align プロパティを使用してください。文字ベースの配置方法を適用するには、 CSS の text-align プロパティに揃える文字 (".""," など) を設定してください。

bgcolor HTML5 で廃止

行の各セルの背景色を定義する DOMString です。値は 16進 #RRGGBB または #RGB、あるいはカラーキーワードを使用できます。属性を省略するか JavaScript で null を設定すると、行のセルは親要素の背景色を継承します。

<tr> 要素は CSS を使用してスタイルを設定するべきです。 bgcolor 属性と同様の効果を与えるには、CSSbackground-color プロパティを使用してください。

char HTML5 で廃止

行のそれぞれの列のセルで揃える文字を設定する DOMString です (同一の文字を使用して、それぞれの行の中心がほかの行と揃えられます)。典型的な値に、数値や金額を揃えようとするときのピリオド (".") やコンマ (",") があります。 align 属性が char ではない場合は、この属性は無視されます

この属性は廃止されただけでなく、ほとんど実装されていませんでした。 char と同様の効果を得るには、 CSS の text-align プロパティの値として char の値を使用します(例えば text-align: ".")。

charoff HTML5 で廃止

char 属性で指定した揃え文字から行のデータをオフセットする文字数を示す DOMString です。例えば通貨単位の 100 分の 1 の値を使用する通貨 (例えばドルであり、100 セントに分割されます) の金額を表示するときは、一般的に値 2 を指定するでしょう。 char"." を設定することと組み合わせると、列内の値が小数点できれいに揃い、セントの数値が小数点の右側へ適切に表示されます。

この属性は廃止されただけでなく、ほとんど実装されていませんでした。

valign HTML5 で廃止

行の各セルにおける垂直方向のテキスト配置方法を指定する DOMString です。以下の値が指定可能です。

baseline
テキストを可能な限りセルの下端に近づけますが、下端ではなく文字で使用するフォントの baseline に揃えます。文字がサイズ全体に渡る場合は、bottom と同じ効果になります。
bottom
テキストを可能な限りセルの下端に近づけて配置します。
middle
テキストをセルの中央部に置きます。
top
テキストを可能な限りセルの上端に近づけて配置します。

valign 属性は廃止されたため、使用しないでください。代わりに CSS の vertical-align プロパティを使用してください。

<tr> 要素の使用例については、 <table> を参照してください。

基本的な例

これは、人名とクラブまたはサービスのさまざまな会員情報を載せる表を表示する簡単な例です。

HTML

この HTML は、表のもっとも基本的な構造を示します。グループ、複数の行や列にまたがるセル、タイトルはなく、明確にに似ているもののために表の構成要素の周りに線を生成する、もっとも基本的なスタイルだけがあります。

表には4列(1列の見出しを含む)があるの行が4行(1行の見出しを含む)があります。表セクション要素は使用していません。代わりに、ブラウザーはそれらを自動的に定義できます。この次の例では <thead>, <tbody>, <tfoot> を追加します。

<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <td>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <td>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01013">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <td>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

このシンプルな CSS は表とセルの周りに黒い実線の境界線を追加するものであり、セルは <th><td> の両方を使用して指定します。このようにして、見出しセルとデータセルが簡単に区別できます。

table {
  border: 1px solid black;
}

th, td {
  border: 1px solid black;
}

結果

行や列をつなげる

次に、ユーザーの有効期限のデータを表示する列を追加しましょう。また、 "joined" と "canceled" のデータの上に、 "Membership Dates" という大見出しも追加します。これは行や列をまたぐセルを表に追加するということであり、見出しのセルを正しい位置に置くことができます。

結果

始めに、実際の表示結果を見ましょう。

見出し領域が実際は2行あることに注目してください。ひとつは "Name"、"ID"、"Membership Dates"、"Balance" の見出し、もうひとつは "Joined" と "Canceled" であり、これは "Membership Dates" の小見出しです。これは以下のようにして実現します。

  • 1 行目の "Name"、"ID"、"Balance" の見出しセルは、rowspan 属性を使用して 2 行にまたがっており、それぞれのセルの高さが 2 行分になります。
  • 1 行目の "Membership Dates" の見出しセルは、colspan 属性を使用して 2 列にまたがっており、実際に見出しの幅が 2 列分になります。
  • 2 行目の <th> 要素は、"Joined" と "Canceled" しか持っていません。ほかの列は 2 行目にまたがっている 1 行目のセルがすでに占有しているためであり、2行目のセルはは "Membership Dates" の下へ適切に配置されます。

HTML

HTML は前の例に似ていますが、それぞれのデータ行に新しい列を追加したことと、見出しを変更したことが異なります。変更した HTML は以下のようになります:

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">ID</th>
    <th colspan="2">Membership Dates</th>
    <th rowspan="2">Balance</th>
  </tr>
  <tr>
    <th>Joined</th>
    <th>Canceled</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>n/a</td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01013">January 13, 2011</time></td>
    <td><time datetime="2017-04008">April 8, 2017</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>n/a</td>
    <td>15.00</td>
  </tr>
</table>

(行や列をまたぐことを論じるために) ここで重要な部分は、コードの最初の数行です。"Name"、"ID"、"Balance" の見出しで rowspan を使用して 2 行を占めていることと、"Membership Dates" の見出しで colspan を使用して 2 列を占めていることに注意してください。

CSS は変更していません。

表の内容のグループを明示する

この表にスタイルを設定する前に、 CSS を簡単にするために行や列のグループを追加する時間をとりましょう。

HTML

この作業を行う場所は HTML であり、また作業はとても単純です。

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup">Margaret Nguyen</td>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="rowgroup">Edvard Galinski</td>
      <td>533175</td>
      <td><time datetime="2011-01013">January 13, 2011</time></td>
      <td><time datetime="2017-04008">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="rowgroup">Hoshi Nakamura</td>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

(行や列をまたぐことを論じるために) ここで重要な部分は、コードの最初の数行です。"Name"、"ID"、"Balance" の見出しで rowspan を使用して 2 行を占めていることと、"Membership Dates" の見出しで colspan を使用して 2 列を占めていることに注意してください。

繰り返しますが、 CSS は変更しません。

結果

内部では役に立つ文脈情報を追加したにもかかわらず、表示結果はまったく変わっていません。

基本的な整形

表のすべての部分の場合と同じく、 CSS を使用して表の行やその中身の外観を変更できます。 <tr> 要素に適用したスタイルは、セルに適用したセルで上書きされない限り、行内のすべてのセルに影響を与えます。

使用する書体の調節するスタイルと、見出し行に背景色を追加するスタイルを適用しましょう。

結果

再び、始めに表示結果を見ましょう。

CSS

ここでは HTML を変更せず、CSS に手を加えます。

table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}

thead > tr {
  background-color: rgb(228, 240, 245);
}

th, td {
  border: 1px solid black;
  padding:4px 6px;
}

視覚的にアピールする書体 (または個人設定に応じて忌まわしい sans-serif 書体) を設定するため、<table> 要素に font プロパティを追加していますが、興味深いところは 2 番目のスタイルで、<thead> 要素内にある <tr> 要素にスタイルを設定して背景色がライトブルーになります。これは、見出し領域内にあるすべてのセルへ一斉に背景色を適用するためのてっとり早い方法です。

1 列目の <th> 要素の会員名は行の見出しとして扱っていますが、このスタイルは影響を与えません

高度なスタイル設定

次は全力を尽くして、行の色を交互に設定する、行内の位置に応じてさまざまな色を設定するなど、見出しや本体の行にスタイルを設定します。

結果

表は最終的に以下のようになります:

ここでも HTML は変更しません。 HTML を適切に準備することがどのようなことか分かりましたか?

CSS

ここでは CSS をさらに変更します。複雑ではありませんが、多くのことを行います。詳しく説明しましょう。

表と基本的なスタイル
table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

ここでは border-spacing および border-collapse を追加して、セル間の間隔を取り除き、2本の境界線を互いに接する1本の境界線にまとめます。

th, td {
  border: 1px solid black;
  padding:4px 6px;
}

th {
  vertical-align: bottom;
}

ここには、表のすべてのセルに既定のスタイルがあります。次に、カスタマイズしましょう!

上部の見出し全体

上部の見出し2つに分けて見ていきます。始めに、見出し全体のスタイルです。

thead > tr {
  background-color: rgb(228, 240, 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid black;
}

これは、表の見出し (<thead> を使用して指定します) 内にあるすべての <tr> 要素の背景色を設定します。そして上部の見出しの下ボーダーを、幅が 2 ピクセルの線に設定します。ただし、見出しの 2行目border-bottom を適用するために :nth-of-type セレクターを使用していることに注目してください。なぜでしょう? これは、いくつかのセルがまたがっている2つの行で見出しが構成されているためです。実際は見出しが2行あるということであり、1行目にスタイルを適用すると意図しない結果になります。

"Joined" 及び "Canceled" の見出し

新しい会員を「良く」、退会した会員を「悪く」表すために、これら2つの見出しを緑と赤の色合いでスタイリングしましょう。

thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225, 255, 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255, 225, 225);
}

ここでは表の見出しブロックの最後の行に注目して、最初の見出しセル ("Joined") を緑系統の色、2番目の見出しセル ("Canceled") を赤系統の色に設定します。

本体で行ごとに色を変える

行の色を交互に設定することは、表の可読性を高めるためによく使用されます。偶数番目の行に、少し色をつけましょう。

tbody > tr:nth-of-type(even) {
  background-color: rgb(237, 238, 242);
}
左側の見出しにスタイルを設定

最初の列も目立たせたいので、ここにもスタイルを設定します。

tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225, 229, 244);
}

表の本体のそれぞれの行で最初の見出しセルに、会員名を左揃えにする text-align と、いくぶん異なる背景色を設定します。

バランスを整える

最後に、表内の金額の値は右揃えが一般的ですので、ここで行いましょう。

tbody > tr > td:last-of-type {
  text-align:right;
}

本体のそれぞれの行で最後の <td> に対して、CSS の text-align プロパティに "right" を設定します。

仕様策定状況

仕様書 策定状況 コメント
HTML Living Standard
tr element の定義
現行の標準 The WHATWG Living Standard
HTML5
tr element の定義
勧告 W3C HTML5

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり1 あり あり あり
align ? あり なし1 あり ? ?
bgcolor ? なし なし あり ? ?
char ? あり なし2 あり ? ?
charoff ? あり なし2 あり ? ?
valign ? あり なし1 あり ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
align ? ? あり なし1 ? ? ?
bgcolor ? ? なし なし ? ? ?
char ? ? あり なし2 ? ? ?
charoff ? ? あり なし2 ? ? ?
valign ? ? あり なし1 ? ? ?

1. See bug 915

2. See bug 2212

関連情報

学習エリア: HTML の表
<tr> を含む、表の使用について説明します。
HTMLTableRowElement
<tr> が準拠するインターフェイスです。
他の表関連要素
<table>, <thead>, <tbody>, <tfoot>, <td>, <th>,<caption>, <col>, <colgroup>

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss
最終更新者: mfuji09,