tr要素

HTMLでは、表の行を示すことができます。

本ページでは、tr要素について説明します。

tr要素とは

tr要素は、表の行を示します。

表の行(tr)

trは、th要素とtd要素を混在させて1つの行にすることができます。thはヘッダーセル、tdはデータセルを示します。

trの定義は、以下のとおりです。

【trの定義】
コンテンツカテゴリ なし
可能な親要素 thead、tbody、tfoot
table(caption、colgroup、theadの後で、tbody要素がない場合)
可能なコンテンツ td、th、スクリプトサポート要素
タグの省略 開始タグは必須
終了タグは、直後にtrが続く場合、または親要素にこれ以上コンテンツがない場合に省略可能
DOMインターフェース HTMLTableRowElement

利用例

以下は、trを使ったHTMLの例です。

【HTMLでのtr利用例】
<table>
  <caption>表のタイトル</caption>
  <tr>
    <th>ヘッダー上1</th>
    <th>ヘッダー上2</th>
    <th>ヘッダー上3</th>
  </tr>
  <tr>
    <th>ヘッダー左1</th>
    <td>データ1-1</td>
    <td>データ1-2</td>
  </tr>
  <tr>
    <th>ヘッダー左2</th>
    <td>データ2-1</td>
    <td>データ2-2</td>
  </tr>
</table>

trで囲まれた(色分けした)範囲が、1つの行として表示されます。つまり、この例では3行で表が表示されます。

上記により、表が表示されますが、スタイル付けしないとデフォルトではほとんど表に見えません。表のスタイルなどを変える方法は、「HTMLに表を挿入して装飾する」をご参照ください。

属性

グローバル属性が使えます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
tr
【スマートフォン】
項目 Sa An Op Ch Fx Sm
tr
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

HTML要素(タグ)一覧」に戻る