<tr> 表(テーブル)の横一行を定義する

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

<tr>タグの説明

<tr>は、表(テーブル)の中で横一行のセルのまとまりを指定します。基本的には複数の<th><td>を子要素に持ちます。「tr」は「Table Row」の略です。

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

  1. まず<table>で表の作成を開始
  2. 必要であれば<caption>を配置
  3. <tr>で表の行(横軸)を定義
  4. 見出しのセルが必要な場合は<th>を配置
  5. <td>でセルとデータを作成
  6. 必要に応じて<thead>を配置
  7. 必要に応じて<tbody>を配置
  8. 必要に応じて<tfoot>を配置
  9. 列をグループ化する場合<colgroup>を配置
  10. 列に対して一括で属性を指定する場合<col>を配置

<tr>タグの特徴

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

<tr>に指定できる主な属性

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

<tr>の使い方とサンプル

テーブルの基本構造は以下のようになります。基本的には、行方向に含まれるセルを必要な分だけ<tr>でまとめてテーブルを作ります。

表示確認
HTML
<table>
	<tr>
		<th>項目1</th>
		<th>項目2</th>
	</tr>
	<tr>
		<td>セルA1</td>
		<td>セルB1</td>
	</tr>
	<tr>
		<td>セルA2</td>
		<td>セルB2</td>
	</tr>
</table>

複数のセルを結合する場合は、<th><td>colspan属性やrowspan属性を指定します。列をグループ化する場合は、<colgroup><col>を新たに追加します。

<tr>に関連するHTMLタグ

表(テーブル)を作成する要素
<table> 表(テーブル)を作成する
<caption> 表(テーブル)にキャプションを付ける
<col> 表(テーブル)の縦列の属性をまとめて指定する
<colgroup> 表(テーブル)の縦列をグループ化する
<tr> 表(テーブル)の横一行を定義する
<th> 表(テーブル)の見出しとなるセルを作成する
<td> 表(テーブル)のセルを作成する
<thead> 表(テーブル)のヘッダー行を定義する
<tbody> 表(テーブル)の本体部分を定義する
<tfoot> 表(テーブル)のフッター行を定義する