The HTML <tr> element represents a row of cells in a table. It groups <th> and <td> into a single horizontal row and must appear inside a table structure.
tr は「テーブルの1行」を表す要素です。<td>(データのセル)や <th>(見出しセル)を横に並べて、1行ぶんのまとまりを作ります。
ポイントは「tr は“行”そのものを表す」ことです。列そのものを表す要素ではありません(列のまとまりは <colgroup> / <col> の担当です)。
tr の役割(何を表す要素か)を、言葉で説明できるtr を「どこに」「何と一緒に」書くべきか判断できるtr の中に入れてよい要素/ダメな要素を言い切れる<tr> って何?<tr> は、複数のセル(<td> / <th>)をまとめて、1行として扱うための要素です。tr が“行の箱”になって、その中にセルを入れていきます。tr は表(テーブル)の部品です。表ではない場所(通常の文章のレイアウト調整など)に使うものではありません。直感の覚え方:tr = table row(テーブルの行)。
tr は、表データを「行」という単位で構造化するためにあります。行という単位があることで、ブラウザはセルを整列させたり、行ごとにスタイルを当てたり、支援技術(スクリーンリーダー等)が行として読み上げたりできます。
tr は、表の中でのみ使えます。具体的には、<table> の中の <thead> / <tbody> / <tfoot> の子として配置します。
thead / tbody / tfoot の子tr は行なので、行の集まり(行グループ)の中に置きます。実務でもこの形がいちばん安全です。tbody が暗黙で入ることがある<tbody> を書かなくても、ブラウザがDOM上で暗黙の tbody を挿入することがあります。CSSやJavaScriptで行を扱うときに「あれ? tbody がある…」となりがちなので、最初から tbody を書くのが事故りにくいです。tr の中には、セル要素として <td> と <th> を配置できます(この2つが基本です)。div や p を直下に置くtr の直下に置いてよいのは基本的にセルだけです。行の直下に div や p を入れてレイアウトしようとすると、構造が壊れます。tr を使う補足:古いHTMLには tr の見た目を変える属性(例:align / bgcolor)がありましたが、HTML5では基本的に非推奨・廃止扱いです。見た目はCSSで扱います。
表の構造として最低限「行グループ(tbody)」と「行(tr)」と「セル(td)」を持つ形です。
HTML
<table>
<tbody>
<tr>
<td>りんご</td>
<td>120円</td>
</tr>
</tbody>
</table>
<tbody><tr><td>表示デモ(tr が「1行」になっていることを確認)
| 商品 | 価格 |
|---|---|
| りんご | 120円 |
| みかん | 80円 |
ポイント:<tr> が1行を作り、その中に <th> / <td> を入れています。
tr 自体に「現代HTMLで必須の専用属性」はほぼありません。使うのは主に以下です。
id / class)class="isTotalRow" のように「合計行」だけ強調する、など。table 構造を使うのが基本です。align / valign / bgcolor などはHTML5では非推奨・廃止扱いです。見た目はCSSで行います。ここは「言い切り」で覚えると、事故が減ります。
tr を置いていい場所<thead> の子として置いてよい<tbody> の子として置いてよい<tfoot> の子として置いてよいtr の中に入れていいもの<td>(データセル)<th>(見出しセル)tr の中に入れてはいけないもの(代表例)<div> / <p> / <section> などの“通常のブロック要素”を直下に入れる<tr> の中にさらに <tr> を入れる(行の入れ子は不可)<ul> や <form> などを行の直下に置く(やりたい場合は <td> の中へ)実務メモ:セルの中(<td> / <th> の中)なら、<a> や <img>、<form> の部品などを入れられます。「行の直下」ではなく「セルの中」が原則です。
tr を書けば“表っぽく並ぶ”と思ってしまうtr 単体では何も並びません。表の箱(table)と、セル(td/th)があって初めて機能します。tr は行です。列の幅や列単位の指定は colgroup / col、またはCSSで扱います。tbody は不要だと思って省くtbody を書くのが無難です。tr に見た目の属性を付けたくなる制作会社の現場で表が出てくるのは、「見た目」より「意味として表」のときです。たとえば次のようなデータです。
thead を使って“列見出し”を明確にする<th>、列見出しなら scope="col" が基本です。class で表してCSSに渡すと保守が楽です。補足:表はSEOのために使うものではありません。意味が表なら自然に使う、が安全です。
<td> の数が足りない/多い。対策:行ごとに「列数が揃っているか」をチェック。必要なら colspan / rowspan の設計を先に決めます。tr の直下に div を入れてしまう<td> の中に入れます。thead / tbody / tfoot の順序がバラバラcaption → thead → tbody → tfoot の順で整理します(tfoot は仕様上の扱いが少し特殊なので、チームのルールがあるなら従います)。tr に onclick)で操作性が悪くなる<a> や <button> に寄せ、行は情報の容器に留めます。caption が無いcaption を入れ、必要ならCSSで見た目を調整します(ただし“見えなくする”ときは読み上げも考えます)。検証の観点:ブラウザ差は大きく出にくいですが、DOMの自動補完(暗黙の tbody)や、CSSの当たり方(tbody tr と書いている等)は差として体験しやすいです。HTMLバリデーション(概念として)で「入れ子が正しいか」を確認する癖を付けると強いです。
th)で“関連”を明示するscope="col"、行見出しなら scope="row" が基本です。caption は表の“名前”caption です。見出しが曖昧な表ほど、caption が効きます。tr をクリック対象にするより、セル内に <a> を置くほうが、キーボード操作・読み上げの両方で自然です。<input> などを入れる場合、<label> と id で関連付ける、フォーカス移動が追える、という点が特に大事になります。tr × td / thtr × thead / tbody / tfoottr × colspan / rowspantr ではありません)。行の設計が崩れやすいので、結合がある表は先に“マス目”を書き出してから実装すると安全です。tr × CSS(例:tbody tr:nth-child(even))tbody を省略するとセレクタが当たらないことがあるので注意します。tr × JavaScript(DOM上の暗黙 tbody)table の子要素を走査するとき、意図せず tbody が挟まっていることがあります。DOMを前提にするなら、最初から tbody を書くのが安定です。tr(table row)td / th しか置けない。td(table data cell)th(table header cell)scope で関連(行/列)を示すと読み上げが安定する。thead / tbody / tfootcaptiontr の直下に置けるのは基本的に td / th だけcolspan / rowspan は tr ではなくセル(td/th)に付けるtbody を省略してもDOM上で入ることがある(JS/CSSで事故る)<tr> の直下に <div> を置いてもよい?tr の直下はセル(td/th)が基本です。レイアウトしたい要素はセルの中に入れます。tr に rowspan を付ける?rowspan はセル(td/th)に付ける属性です。tbody を書かなかったのに、DevToolsで見ると tbody がある。なぜ?tbody を挿入することがあるためです。CSS/JSの都合があるなら最初から書くのが安全です。td で作っていい?th が適切です。読み上げや理解のためにも、見出しは th を基本にします。caption が基本です。表の“名前”として伝えられます。tr は単体で使えますか?tr は表の部品なので、表の構造(table と行グループ、そしてセル)と一緒に使います。tbody は必ず書く必要がありますか?tr の中にリンクや画像を入れていいですか?tr の直下ではなく、セル(td/th)の中に入れるならOKです。<button> や <a> を置くほうが、キーボード操作や読み上げの面で安定します。どうしても行クリックにするならフォーカスや操作性の設計が必要です。tr の td/th 数を揃える、結合(colspan/rowspan)を設計し直す。tbody tr が当たらないtbody を省略し、想定とDOMがズレた。対処:tbody を明示するか、セレクタをDOMに合わせる。tr の直下にセル以外を置いた/tr を表以外に置いた。対処:tr の中はセルだけ、表の中だけで使う。th)や scope が無い。対処:列見出し・行見出しを th で表し、必要なら scope を付ける。最後に、迷ったときに戻ってくるチェックリストです。
tr は「表データの1行」を表す。レイアウト目的で使わないtr は表の中だけ。置き場所は基本 thead/tbody/tfoot の中tr の直下はセル(td/th)だけにするth と scope を使うtbody は省略できても、実務では書くと安全(CSS/JS事故を減らす)