HTML / 要素

tr要素の使い方

tr要素は、表の中でひとまとまりの行を作ります。行の中には、見出しセルのthやデータセルのtdを置きます。

先に結論

表の1行を作るときはtrを使い、その中にセルを並べます。行の見出しにはth、値や説明にはtdを使います。

trはページのレイアウトを整えるための箱ではありません。行と列にデータが並ぶ表に使います。

小さな例

<table>
  <caption>くだものの価格</caption>
  <thead>
    <tr>
      <th scope="col">くだもの</th>
      <th scope="col">価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">りんご</th>
      <td>120円</td>
    </tr>
    <tr>
      <th scope="row">みかん</th>
      <td>80円</td>
    </tr>
  </tbody>
</table>

くだものの価格
くだもの	価格
りんご	120円
みかん	80円

この例では、1つのtrが1行です。1行目のセルは「くだもの」と「価格」の列見出しで、次の行から商品名と価格が続きます。

行と行グループ

thead、tbody、tfootは、それぞれ表の見出し部分、本体、まとめの部分をまとめます。trはその中に置く行です。まずは例のように、どの部分の行か分かる形で書くと、表の構造を読み取りやすくなります。

tableの直下にtrを書いた場合、HTMLを読み込むブラウザーはDOM上でtbodyを補います。ページのHTMLとJavaScriptから見えるDOMが少し違うことがあるため、新しく書くときはtbodyを明示しましょう。

JavaScriptで行を調べる

rowIndexは表全体の中での行番号、sectionRowIndexは通常、行グループ内での行番号です。どちらも0から数えます。JavaScriptで行をtableの直接の子にした場合は、sectionRowIndexも表全体の行一覧を基準にします。cellsからは、その行に直接置いたthとtdを調べられます。

const row = document.querySelector("tbody tr");
row.rowIndex;         // 表全体で何番目の行か
row.sectionRowIndex;  // tbodyの中で何番目の行か
row.cells.length;     // この行にあるセルの数

insertCell()でセルを追加できます。引数を省略すると行の最後にtdが追加されます。見出しセルのthが自動で作られるわけではないので、見出しを追加するときはHTMLでthを用意してください。

よくある間違い

tdやthをtrの外に置く。セルは行の中に並べます。
trをページの段組みや余白づくりに使う。見た目の配置にはCSSを使います。
行を見た目だけで見出しにする。見出しセルにはthを使い、必要に応じてscopeを指定します。
終了タグを省略して行の範囲が分かりにくくなる。省略できる場合もありますが、最初は</tr>まで書くと確認しやすくなります。