HTML <tr>タグの使い方：テーブル（表）の行を定義する要素

取り扱い	標準仕様
カテゴリー	なし
親にできる要素	`<table>`直下の場合、`<caption>`、`<colgroup>`の後。あるいは`<thead>`、`<tbody>`、`<tfoot>`
子にできる要素	０個以上の`<th>`、`<td>`。`<script>`、`<template>`も許可される
対応ブラウザ	caniuseで確認

<tr>タグの解説

<tr>は、テーブル（表）の中でセルの行を表します。「tr」は「Table Row」の略語です。一般的な表に含まれる行の中には、ひとつ以上の<th>か<td>が含まれ、これを複数行組み合わせることで表を完成させます。

テーブルの作成は、以下の流れで行います。

まず<table>で表の作成を開始する
必要であれば<caption>を配置する
列をグループ化する場合<colgroup>を配置する
列に対して一括で属性を指定する場合<col>を配置する
<tr>で表の行（横軸）を定義する
見出しが必要であれば<th>を配置する
個別のデータを<td>で作成する
必要に応じて<thead>を定義する
必要に応じて<tbody>を定義する
必要に応じて<tfoot>を定義する

<tr>タグの特徴

テーブルの中の行をまとめます。レイアウトには影響を与えませんが、セルの構造を無視した配置は認められません。
CSSのdisplayは、既定値でtable-rowが適用されます。
視覚的な効果は特に与えられません。装飾はセルそのものに指定して下さい。
同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<tr>要素に指定できる属性

align（非推奨）: セル内容の水平方向の表示位置を指定します。スタイルシートを使って下さい。
valign（非推奨）: セル内容の垂直方向に対する表示位置を指定します。スタイルシートを使って下さい。
bgcolor（非推奨）: 背景色を指定します。スタイルシートを使って下さい。
background（非推奨）: 背景画像を指定します。スタイルシートを使って下さい。
char（非推奨）: align属性の値にcharを指定した場合にセル内の位置揃えの軸となる文字を指定します。
charoff（非推奨）: char属性で位置揃えの軸となる文字を指定した場合に、その文字から水平方向にどの位置までずらして表示するかを指定します。
グローバル属性: 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ: 全てのHTML要素に指定できるコンテンツ属性です。

<tr>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。<table>の中に<tr>を配置すると行が追加され、<tr>の中に<th>または<td>を配置した分だけ列が追加されます。


<table>
	<tr>
		<td>セルA1</td>
		<td>セルB1</td>
	</tr>
</table>

テーブルの行と列を増やして意味のある内容を作成していきましょう。まず始めに、見出しとなるセル行を用意し、それが指し示すデータ用のセルを作成します。


<table>
	<tr>
		<th>見出しA1</th>
		<th>見出しB1</th>
		<th>見出しC1</th>
	</tr>
	<tr>
		<td>セルA2</td>
		<td>セルB2</td>
		<td>セルC2</td>
	</tr>
</table>

行の中に<th>と<td>を混在させる

<tr>の中に<th>と<td>を混在させて、行方向に見出しを配置することもできます。その際、見出しが行と列のどちらの方向を対象としているのか<th>のscope属性を使って明示します。この値が"col"であれば見出しは同じ列に属する全てのセルを対象としていることを表し、"row"であれば同じ行に属する全てのセルを対象としていることを表します。


<table>
	<tr>
		<th scope="col">見出しA1</th>
		<th scope="col">見出しB1</th>
		<th scope="col">見出しC1</th>
	</tr>
	<tr>
		<th scope="row">見出しA2</th>
		<td>セルB2</td>
		<td>セルC2</td>
	</tr>
	<tr>
		<th scope="row">見出しA3</th>
		<td>セルB3</td>
		<td>セルC3</td>
	</tr>
</table>

行に含まれるセルを結合して数を調整する

テーブルのセルを結合させるには、起点となる<th>または<td>に結合する数を指定し、対象となるセルを必要な分だけ取り払います。列の結合はcolspan属性で指定し、行の結合はrowspan属性で指定します。

以下の例では、行と列の見出しを結合して複数のセルを対象にしています。結合した分のセルはソースコードから削除するので、<tr>の子要素の数が異なる点に注目して下さい。


<table>
	<tr>
		<th scope="col">―</th>
		<th scope="col" colspan="2">colspan</th>
		<th scope="col" colspan="2">colspan</th>
	</tr>
	<tr>
		<th scope="row" rowspan="2">rowspan</td>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
</table>