最終更新日 2021年4月7日

tr要素

tr要素は、行を表します。tr要素の数に対応して、親要素内に行が作成されます。表の各セルは、tr要素内にtd要素またはth要素を入れて作ります。

tr要素は、thead要素、tbody要素、tfoot要素それぞれの要素内に記述できます。table要素内にtbody要素が含まれていなければ、table要素内に記述することも可能です。しかし、表の構成をわかりやすくするためには、table要素内に直接、tr要素を記述するべきではないでしょう。

tr要素の終了タグは、直後に別のtr要素があるか、またはtr要素が親要素内の最終コンテンツである場合に省略可能です。

HTML5での変更点

・align、background、bgcolor、char、charoff、valignの各属性は廃止されました。

カテゴリ	タグの省略	親要素	子要素
なし	終了タグのみ省略可能	table、thead、tbody、tfoot	td、th

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <table>
    <caption>料金表</caption>
    <thead>
      <tr>
        <th>商品名</th>
        <th>料金</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ハンバーガー</td>
        <td>100円</td>
      </tr>
      <tr>
        <td>チーズバーガー</td>
        <td>120円</td>
      </tr>
    </tbody>
  </table>
</body>

参考文献：W3C HTML5「4.9.8 The tr element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。