tr要素

tr要素は、表(テーブル)の行を表す要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト thead要素の子要素として使用できる。
tbody要素の子要素として使用できる。
tfoot要素の子要素として使用できる。
table要素の子要素にtbody要素が1つもない場合、table要素の子要素として使用できる。ただし、caption要素colgroup要素thead要素より後ろに配置しなければならない。
コンテンツ・モデル 0個以上のtd要素th要素template要素script要素を内包できる。
属性 グローバル属性
ブラウザ対応

構文

<tr></tr>

要点

サンプルコード

thead要素、tfoot要素、 tbody要素の子要素として

<table>
	<thead>
		<tr>
			<td>ヘッダーのセル</td>
			<td>ヘッダーのセル</td>
			<td>ヘッダーのセル</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>フッターのセル</td>
			<td>フッターのセル</td>
			<td>フッターのセル</td>
		</tr>
	</tfoot>
</table>

table要素の子要素として

<table>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>

サンプル

thead要素、tfoot要素、 tbody要素の子要素として

HTMLソースコード
<table border="1">
	<thead style="background-color: lime">
		<tr>
			<th>ヘッダーのセル</th>
			<th>ヘッダーのセル</th>
			<th>ヘッダーのセル</th>
		</tr>
	</thead>
	<tbody style="background-color: aqua">
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tbody style="background-color: silver">
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tfoot style="background-color: yellow">
		<tr>
			<td>フッターのセル</td>
			<td>フッターのセル</td>
			<td>フッターのセル</td>
		</tr>
	</tfoot>
</table>
実際の表示
ヘッダーのセル ヘッダーのセル ヘッダーのセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
フッターのセル フッターのセル フッターのセル

table要素の子要素として

HTMLソースコード
<table border="1">
	<tr>
		<th>見出しセル</th>
		<th>見出しセル</th>
		<th>見出しセル</th>
		<th>見出しセル</th>
	</tr>
	<tr>
		<th>見出しセル</th>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<th>見出しセル</th>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<th>見出しセル</th>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>
実際の表示
見出しセル 見出しセル 見出しセル 見出しセル
見出しセル データセル データセル データセル
見出しセル データセル データセル データセル
見出しセル データセル データセル データセル