HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<tr>
テーブルの行（Table Row）要素。表の中で一つの行を定義し、セル（<td>や<th>）を包含します。
info
概要
<tr> 要素（テーブル行要素）は、HTMLの表（<table>）内で**行**を定義するために使用されます。各行は一つまたは複数のセル（データセル <td> またはヘッダーセル <th>）を格納します。
表を作成する上で、<table>、<tr>、<td>（または<th>）は基本的な三要素となります。
play_circle
デモ (静的表示)
HTML (Source)
<table>
<tbody>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>りんご</td>
<td>150円</td>
</tr>
</tbody>
</table>
Preview (Result)
| 商品名 | 価格 |
|---|---|
| りんご | 150円 |
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| colspan (子要素の<td>/<th>) | 子要素（<td>または<th>）に指定することで、そのセルが水平方向にいくつの列を結合するかを指定します。 |
| rowspan (子要素の<td>/<th>) | 子要素（<td>または<th>）に指定することで、そのセルが垂直方向にいくつの行を結合するかを指定します。 |
| headers (子要素の<td>) | 子要素（<td>）に指定し、そのデータセルに関連付けられたヘッダーセル（<th>）のIDを指定します。（アクセシビリティ関連） |
code
実用例
1. 基本的な表の行
<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr> <!-- 1行目のデータ -->
<td>データA</td>
<td>データB</td>
</tr>
<tr> <!-- 2行目のデータ -->
<td>データC</td>
<td>データD</td>
</tr>
</tbody>
</table>
2. 縦方向のセル結合を含む行 (rowspanは子要素のtdに指定)
<table>
<tbody>
<tr>
<td rowspan="2">2行結合</td>
<td>行1-セル2</td>
</tr>
<tr> <!-- この行には1列目のセルは不要 -->
<td>行2-セル2</td>
</tr>
</tbody>
</table>
lightbulb
知っておくべき重要事項
design_services
セルの親要素
<tr> 要素の直接の子要素として配置できるのは、**<td>** (データセル) または **<th>** (ヘッダーセル) のみです。その他の要素（<p>, <div>など）を直接入れることはできません。
accessibility_new
アクセシビリティと構造
よりセマンティック（意味的）でアクセシブルな表を作成するためには、行を
よりセマンティック（意味的）でアクセシブルな表を作成するためには、行を
<thead> (ヘッダー行)、<tbody> (データ行)、<tfoot> (フッター行) のいずれかで囲むことが推奨されます。特に <th> 要素を適切に使用することは、スクリーンリーダーの利用者にとって非常に重要です。