<tr></tr>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 ---
利用場所 thead要素の子要素として / tbody要素の子要素として / tfoot要素の子要素として / table要素の子要素として(ただし、caption要素colgroup要素thead要素よりも後で、かつtable要素の子要素となるtbody要素がないこと)
内容 th要素またはtd要素を0個以上 / スクリプトサポート要素

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


<tr></tr>

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

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

<table border="1">
<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 border="1">
<caption>表のタイトル</caption>
<colgroup span="1"></colgroup>

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

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

これ以降はtbody要素が配置できないことになります。
...
HTML5における変更点

使用例

table要素の直下で使用した例

<table border="1">
<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 border="1">

<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