<tr></tr>

更新日
仕様 HTML Living Standard
分類 ---
利用場所 thead要素の子要素として / tbody要素の子要素として / tfoot要素の子要素として / table要素の子要素として（ただし、caption要素、colgroup要素、thead要素よりも後で、かつtable要素の子要素となるtbody要素がないこと）
内容 th要素またはtd要素を0個以上 / スクリプトサポート要素

tr要素は、表の行を表します。この要素は、thead要素、tbody要素、tfoot要素、またはtable要素の子要素として使用します。


<tr></tr>

tr要素を使用することで、表の行部分を作成することができます。

次の例では、表の中に3つの行を配置しています。

<table>
<tr>
<th>見出しセル</th>
<th>見出しセル</th>
<th>見出しセル</th>
</tr>
<tr>
<td>データセル</td>
<td>データセル</td>
<td>データセル</td>
</tr>
<tr>
<td>データセル</td>
<td>データセル</td>
<td>データセル</td>
</tr>
</table>

tr要素の配置位置

thead要素、tbody要素、tfoot要素の子要素として使用する場合は、それらの直下にtr要素を配置します。

<tbody>
<tr>
<td>表の内容</td>
</tr>
<tbody>

table要素の直接の子要素として使用する場合は、下記の位置に配置します。

<table>
<caption>表のタイトル</caption>
<colgroup span="1"></colgroup>

<thead>
<tr>
<th>表のヘッダ</th>
</tr>
</thead>

<tr>
<td>表の内容</td>
</tr>

これ以降はtbody要素が配置できないことになります。
...
旧HTMLからの変更点
  • HTML5：align属性、valign属性、char属性、charoff属性、bgcolor属性が廃止されました。
  • HTML5：この要素内へのth要素またはtd要素の配置が必須ではなくなりました。

使用例

  • 以下の例では、次のスタイルシートを指定して表の境界線を表示しています。
-----
table, th, td {
border: 1px #000000 solid;
}
-----
table要素の直下で使用した例

<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1-1</td>
<td>データ2-1</td>
<td>データ3-1</td>
</tr>
<tr>
<td>データ1-2</td>
<td>データ2-2</td>
<td>データ3-2</td>
</tr>
</table>
表示例
見出し1 見出し2 見出し3
データ1-1 データ2-1 データ3-1
データ1-2 データ2-2 データ3-2
行グループ内で使用した例

<table>

<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
</thead>

<tbody>
<tr>
<td>データ1-1</td>
<td>データ2-1</td>
<td>データ3-1</td>
</tr>
<tr>
<td>データ1-2</td>
<td>データ2-2</td>
<td>データ3-2</td>
</tr>
</tbody>

</table>
表示例
見出し1 見出し2 見出し3
データ1-1 データ2-1 データ3-1
データ1-2 データ2-2 データ3-2