HTML <tr>

<tr> は表 (Table) に行 (Row) を挿入する HTML タグである。

書式

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい

<tr>
  <!-- Zero or more td, th, and script-supporting elements. -->
</tr>

<TR>
  <!-- Zero or more td, th, and script-supporting elements. -->
</TR>

tr 要素の終了タグは、tr 要素の直後に別の tr 要素が続く場合、または親要素にそれ以上内容がない場合は省略することができる。

<tbody>
  <tr><td></td>
  <tr><td></td>
</tbody>

tr 要素の開始タグと終了タグの間には、以下に示す要素が0個以上出現する。

以下に示す属性をtr要素タイプに指定することができる。tr要素タイプに必須な属性は無い。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

<tr class="odd even">

data-*

カスタムデータ属性を指定する。カスタムデータ属性とは、要素独自の属性を JavaScript から読み取るための仕組みである。data- の接頭辞を付ければ、任意の属性名にすることができる。

id

要素毎に固有な識別子を指定する。識別子はCSSやJavaScriptから要素を識別するときに利用する。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

<tr style="background-color: white; color: black">

JavaScript からは HTMLTableRowElement インタフェースを通じて tr 要素へアクセスできる。

HTMLTableRowElement インタフェースは、以下に示すプロパティを持つ。

rowIndex: table 要素の rows コレクションにおける、この tr 要素のインデックスを返す。rowIndex プロパティは読み取り専用である。
sectionRowIndex: 親要素の rows コレクションの tr 要素のインデックスを返す。sectionRowIndex プロパティは読み取り専用である。
cells: この tr 要素をルートとする HTMLCollection を返す。cells プロパティは読み取り専用である。
accessKey: accessKey 属性
accessKeyLabel: 要素に割り当てられたアクセスキー（読取り専用）
contentEditable: contenteditable 属性
dataset: カスタムデータ属性
isContentEditable: この要素が編集できるかどうか（読取り専用）
dir: dir 属性
draggable: draggable 属性
innerText: ノードに描画されるテキスト
lang: lang 属性
style: style 属性
tabIndex: tabIndex 属性
title: title属性

HTMLTableRowElement インタフェースは、以下に示すメソッドを持つ。

insertCell(index): この tr 要素の子として、cell コレクションの index 番目の td または th 番目の要素の直前に表セルを挿入する。戻り値として、表セル (HTMLTableCellElement) を返す。
deleteCell(index): セルコレクションの index 番目の要素をその親から削除する。

Web Hypertext Application Technology Working Group (2023) Tabular data HTML Living Standard