<tr要素> - テーブルの行
公開日:
概要
- 名前
- 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>