HTML

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要素

tr は「テーブルの1行」を表す要素です。<td>(データのセル)や <th>(見出しセル)を横に並べて、1行ぶんのまとまりを作ります。

ポイントは「tr は“行”そのものを表す」ことです。列そのものを表す要素ではありません(列のまとまりは <colgroup> / <col> の担当です)。

このページでできるようになること

まずは直感:<tr> って何?

「横一列」を作る“行”
<tr> は、複数のセル(<td> / <th>)をまとめて、1行として扱うための要素です。
セルを「横に並べる」ための入れ物
セルを直接テーブルに並べるのではなく、tr が“行の箱”になって、その中にセルを入れていきます。
テーブル以外では使えない
tr は表(テーブル)の部品です。表ではない場所(通常の文章のレイアウト調整など)に使うものではありません。

直感の覚え方:tr = table row(テーブルの行)。

正確な定義(仕様に沿った説明)

何のために存在するか

tr は、表データを「行」という単位で構造化するためにあります。行という単位があることで、ブラウザはセルを整列させたり、行ごとにスタイルを当てたり、支援技術(スクリーンリーダー等)が行として読み上げたりできます。

使える場所(文脈/入れ子のルール)

tr は、表の中でのみ使えます。具体的には、<table> の中の <thead> / <tbody> / <tfoot> の子として配置します。

基本形:thead / tbody / tfoot の子
tr は行なので、行の集まり(行グループ)の中に置きます。実務でもこの形がいちばん安全です。
省略の話:tbody が暗黙で入ることがある
HTMLのパース(読み取り)では、作者が <tbody> を書かなくても、ブラウザがDOM上で暗黙の tbody を挿入することがあります。CSSやJavaScriptで行を扱うときに「あれ? tbody がある…」となりがちなので、最初から tbody を書くのが事故りにくいです。

できること/できないこと(制約)

できること:行の中にセルを並べられる
tr の中には、セル要素として <td><th> を配置できます(この2つが基本です)。
できないこと:divp を直下に置く
tr の直下に置いてよいのは基本的にセルだけです。行の直下に divp を入れてレイアウトしようとすると、構造が壊れます。
できないこと:表のレイアウト目的に tr を使う
「見た目を揃えたいから表にする」は、情報の意味を壊す原因になります。表は「行×列で整理されたデータ」を表すときに使います。

補足:古いHTMLには tr の見た目を変える属性(例:align / bgcolor)がありましたが、HTML5では基本的に非推奨・廃止扱いです。見た目はCSSで扱います。

基本の書き方(最短の型)

最小サンプル(コピペ用)

表の構造として最低限「行グループ(tbody)」と「行(tr)」と「セル(td)」を持つ形です。

HTML

<table>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>120円</td>
        </tr>
    </tbody>
</table>
<tbody>
本文の行(データ行)をまとめる“行グループ”です。省略されることもありますが、書いておくと分かりやすいです。
<tr>
1行を表します。この中にセルを入れて横に並べます。
<td>
データセルです。行の中に並べる値を入れます。

コピペで動く最小デモ(このページ内で表示)

表示デモ(tr が「1行」になっていることを確認)

価格表(デモ)
商品 価格
りんご 120円
みかん 80円

ポイント<tr> が1行を作り、その中に <th> / <td> を入れています。

主要な属性・よく使う値

tr 自体に「現代HTMLで必須の専用属性」はほぼありません。使うのは主に以下です。

グローバル属性(例:id / class
行にスタイルを当てたい、行をJavaScriptで特定したい、という理由で使います。例:class="isTotalRow" のように「合計行」だけ強調する、など。
WAI-ARIA属性(必要なときだけ)
原則は表のネイティブな意味(テーブルの意味)を活かします。どうしても表ではない“表っぽいUI”を作ってしまった場合にARIAで補うことがありますが、まずは素直に 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 は不要だと思って省く
省略しても動くことは多いですが、DOM上で暗黙に入るため、CSSやJSで想定外になりやすいです。特に実務では tbody を書くのが無難です。
tr に見た目の属性を付けたくなる
古い属性は非推奨です。行の背景や文字揃えはCSSで指定します。

実務でよくある使用例(制作会社の現場を想定)

制作会社の現場で表が出てくるのは、「見た目」より「意味として表」のときです。たとえば次のようなデータです。

何を満たすためにこの書き方を選ぶか
「行×列で整理されたデータ」を正しく伝えるためです。表は、視覚だけでなく、読み上げや検索にも影響します。
実務の定番:thead を使って“列見出し”を明確にする
列の意味をはっきりさせると、読み上げや理解が安定します。見出しセルは <th>、列見出しなら scope="col" が基本です。
実務の定番:行にクラスを付けて状態を表す
例:合計行、注釈付き行、期限切れ行など。状態があるなら class で表してCSSに渡すと保守が楽です。

補足:表はSEOのために使うものではありません。意味が表なら自然に使う、が安全です。

実務で起きがちな事故と回避策

事故:セル数が行ごとにズレて、表示が崩れる
原因:ある行だけ <td> の数が足りない/多い。対策:行ごとに「列数が揃っているか」をチェック。必要なら colspan / rowspan の設計を先に決めます。
事故:tr の直下に div を入れてしまう
原因:行を“箱”だと思い込んで、普通のレイアウト感覚で入れてしまう。対策:レイアウトしたい要素は必ず <td> の中に入れます。
事故:thead / tbody / tfoot の順序がバラバラ
原因:コピペ編集で順番が崩れる。対策:基本は captiontheadtbodytfoot の順で整理します(tfoot は仕様上の扱いが少し特殊なので、チームのルールがあるなら従います)。
事故:行クリック(tronclick)で操作性が悪くなる
原因:行全体をクリック可能にしたが、キーボード操作やリンクのフォーカスが壊れやすい。対策:操作の主体は <a><button> に寄せ、行は情報の容器に留めます。
事故:表なのに caption が無い
原因:見た目に出したくないから省略。対策:可能なら caption を入れ、必要ならCSSで見た目を調整します(ただし“見えなくする”ときは読み上げも考えます)。

検証の観点:ブラウザ差は大きく出にくいですが、DOMの自動補完(暗黙の tbody)や、CSSの当たり方(tbody tr と書いている等)は差として体験しやすいです。HTMLバリデーション(概念として)で「入れ子が正しいか」を確認する癖を付けると強いです。

アクセシビリティ/UX観点での注意(必要な範囲で)

見出しセル(th)で“関連”を明示する
読み上げでは「このセルが何の見出しに属するか」が重要です。列見出しなら scope="col"、行見出しなら scope="row" が基本です。
caption は表の“名前”
表が何を表しているかを短く示すのが caption です。見出しが曖昧な表ほど、caption が効きます。
セル内のリンクは“リンク”として作る
tr をクリック対象にするより、セル内に <a> を置くほうが、キーボード操作・読み上げの両方で自然です。
フォーム部品を入れるときはラベルとフォーカスを意識する
表内に <input> などを入れる場合、<label>id で関連付ける、フォーカス移動が追える、という点が特に大事になります。

関連要素・関連属性との組み合わせ・相互作用

tr × td / th
行の中のセル。基本は「セルだけを置く」です。セルの中にはリンク、画像、フォーム、リストなどを入れられます。
tr × thead / tbody / tfoot
行の居場所。どのグループに属するかで「見出し行」「データ行」「集計行」を分けられます。CSSやJSで扱うときも便利です。
tr × colspan / rowspan
結合はセル側の属性です(tr ではありません)。行の設計が崩れやすいので、結合がある表は先に“マス目”を書き出してから実装すると安全です。
tr × CSS(例:tbody tr:nth-child(even)
行の交互背景などはよく使います。tbody を省略するとセレクタが当たらないことがあるので注意します。
tr × JavaScript(DOM上の暗黙 tbody
JSで table の子要素を走査するとき、意図せず tbody が挟まっていることがあります。DOMを前提にするなら、最初から tbody を書くのが安定です。

試験(HTML5プロ Level 1)で得点できる整理

用語ミニ辞典(短く)

tr(table row)
表の1行。直下には基本的に td / th しか置けない。
td(table data cell)
データセル。行の中の「値」を入れる場所。
th(table header cell)
見出しセル。scope で関連(行/列)を示すと読み上げが安定する。
thead / tbody / tfoot
行のグルーピング。見出し行・本文行・集計行を分けられる。
caption
表のタイトル(名前)。表の目的を短く示す。

ひっかけポイント(短く)

「問われ方」っぽいミニ確認(解説付き)

Q1. <tr> の直下に <div> を置いてもよい?
A. だめです。tr の直下はセル(td/th)が基本です。レイアウトしたい要素はセルの中に入れます。
Q2. 行を結合したい。trrowspan を付ける?
A. 付けません。rowspan はセル(td/th)に付ける属性です。
Q3. tbody を書かなかったのに、DevToolsで見ると tbody がある。なぜ?
A. ブラウザがDOM上で暗黙の tbody を挿入することがあるためです。CSS/JSの都合があるなら最初から書くのが安全です。
Q4. 表の見出し行は td で作っていい?
A. 作れますが、意味としては th が適切です。読み上げや理解のためにも、見出しは th を基本にします。
Q5. 表が何を表しているかを短く示したい。どこに書く?
A. caption が基本です。表の“名前”として伝えられます。

よくある質問(FAQ)

tr は単体で使えますか?
使えません。tr は表の部品なので、表の構造(table と行グループ、そしてセル)と一緒に使います。
tbody は必ず書く必要がありますか?
必須ではありませんが、DOM上で暗黙に入ることがあり、CSS/JSで事故りやすいので、実務では書くことが多いです。
tr の中にリンクや画像を入れていいですか?
tr の直下ではなく、セル(td/th)の中に入れるならOKです。
行をクリックで選択できるUIにしたいです
行全体をクリック可能にするより、セル内に <button><a> を置くほうが、キーボード操作や読み上げの面で安定します。どうしても行クリックにするならフォーカスや操作性の設計が必要です。
表を使うとSEOに有利ですか?
表はSEOのテクニックではなく、データの意味を正しく伝えるための構造です。意味が表のデータなら自然に使い、そうでないなら別の構造を考えます。

よくあるエラー早見表

表示が崩れる/列が揃わない
原因:行ごとのセル数が不一致。対処:各 trtd/th 数を揃える、結合(colspan/rowspan)を設計し直す。
CSSの tbody tr が当たらない
原因:マークアップで tbody を省略し、想定とDOMがズレた。対処:tbody を明示するか、セレクタをDOMに合わせる。
バリデーションで入れ子が指摘される
原因:tr の直下にセル以外を置いた/tr を表以外に置いた。対処:tr の中はセルだけ、表の中だけで使う。
読み上げで何の列か分からない
原因:見出しセル(th)や scope が無い。対処:列見出し・行見出しを th で表し、必要なら scope を付ける。

まとめ:迷ったときの判断軸

最後に、迷ったときに戻ってくるチェックリストです。