SYNCER

SYNCER

<tr要素> - テーブルの行

公開日:

th要素は、テーブルの行を表す要素です。td要素、またはth要素をまとめる役割があります。

概要

名前
tr (Table row)
カテゴリー
なし。
配置できる場所
thead要素、またはtbody要素、またはtfoot要素の子要素として配置する。
table要素tbody要素を子要素に持たない場合に限り、caption要素、またはcolgroup要素、またはthead要素の後か、最初の子要素として配置できる。
コンテンツモデル
0個以上のtd要素、またはth要素
タグの省略
別のtr要素が後に続く場合、終了タグを省略できる。
親要素にこれ以上コンテンツがない場合、終了タグを省略できる。
DOM Interface
HTMLTableRowElement
デフォルトのスタイル
tr {
	display: table-row;
	vertical-align: inherit;
	border-color: inherit;
}
仕様書
https://html.spec.whatwg.org/multipage/tables.html#the-tr-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

tr要素は、テーブルの行を表す要素です。任意の数だけ、td要素、またはth要素をまとめて下さい。各行のセルの個数が合わないと表示が崩れてしまうので気を付けましょう。

HTML

<table>
	<!-- 1つ目の行 -->
	<tr>
		<th>名前</th>
		<th>色</th>
		<th>種類</th>
	</tr>

	<!-- 2つ目の行 -->
	<tr>
		<td>リンゴ</td>
		<td>赤</td>
		<td>果物</td>
	</tr>

	<!-- 3つ目の行 -->
	<tr>
		<td>キャベツ</td>
		<td>緑</td>
		<td>野菜</td>
	</tr>
</table>

デモを開く

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】<tr要素> - テーブルの行</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/tr/">
		<style>
			body {
				background-color: #fff ;
			}

			table, th, td {
				border: 1px solid #000 ;
			}
		</style>
	</head>
	<body>

<p>tr要素は、テーブルの行を表す要素です。任意の数だけ、セルをまとめることができます。</p>

<table>
	<!-- 1つ目の行 -->
	<tr>
		<th>名前</th>
		<th>色</th>
		<th>種類</th>
	</tr>

	<!-- 2つ目の行 -->
	<tr>
		<td>リンゴ</td>
		<td>赤</td>
		<td>果物</td>
	</tr>

	<!-- 3つ目の行 -->
	<tr>
		<td>キャベツ</td>
		<td>緑</td>
		<td>野菜</td>
	</tr>
</table>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>