HTMLのtrタグとは？td・thとの違い、borderが効かない原因と使い方を解説

HTMLで表を作るときに、<table>、<tr>、<td>、<th>というタグを使います。しかし、はじめて見ると「trとtdの違いは？」「trにborderを書いたのに枠線が出ない」「表の行を交互に色分けする方法は？」と迷いやすいです。

trタグはテーブルの横1行を作るタグ、tdタグはその行の中に入るデータ用の1マスを作るタグです。thタグは、見出し用のセルを作るときに使います。

この記事ではtr・td・thの違い、基本コード、CSSで枠線を付ける方法、背景色を一行おきに変える方法をコピペしやすい形で解説します。

HTMLのtrタグとは？

trタグは、HTMLのテーブルで「横1行」を表すタグです。読み方は「ティーアール」で、table rowの略として覚えると分かりやすいです。

<tr>
  <td>HTML</td>
  <td>Webページの構造を作る言語</td>
</tr>

このコードでは、<tr>で1行を作り、その中に<td>を2つ入れています。つまり、1行の中に2つのセルがある状態です。

trタグはtableタグの中で使う

trタグは、基本的にtableタグの中で使います。単独でページ上に置くタグではありません。

<table>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
  </tr>
</table>

ただし、実務では<thead>や<tbody>を使って、見出し行と本文行を分けることが多いです。

trタグは「表の行」を作るタグです。1つのセルや文字そのものを作るタグではないため、tdタグやthタグとセットで使いましょう。

【図解】tr・td・thの違いと「縦・横」の簡単な覚え方

tr・td・thの違いは、表を「行」と「セル」に分けて考えると分かりやすくなります。

タグ	役割	覚え方
<tr>	テーブルの横1行を作る	row = 行
<td>	データ用のセルを作る	data = 通常のマス
<th>	見出し用のセルを作る	header = 見出しのマス

trは横、td・thはマスと覚える

初心者の方は、次のように覚えると迷いにくいです。

table = 表全体
tr    = 横1行
td    = その行の中の普通のマス
th    = その行の中の見出しのマス

図で考えると、次のようなイメージです。

┌─────────────── tr 1行目 ───────────────┐
│ th：項目名 │ th：説明 │ th：難易度      │
└───────────────────────────────────────┘
┌─────────────── tr 2行目 ───────────────┐
│ td：HTML   │ td：構造 │ td：やさしい    │
└───────────────────────────────────────┘

横1行を作るのがtr、その中に並ぶ1つ1つのマスがtdまたはthです。

thは見出しセル、tdはデータセル

thタグは、列や行の見出しを表すセルです。tdタグは、通常のデータを入れるセルです。

<tr>
  <th>言語</th>
  <th>役割</th>
</tr>
<tr>
  <td>HTML</td>
  <td>Webページの構造を作る</td>
</tr>

表の見出しまでtdタグで作ると、見た目は似ていても、表の意味が伝わりにくくなります。見出しにはthタグを使いましょう。

コピペで使える！HTMLテーブルの基本コードと使い方

ここでは、HTMLテーブルの基本コードを紹介します。まずはこの形を覚えておけば、料金表、比較表、一覧表などを作りやすくなります。

基本のテーブルコード

<table class="basic-table">
  <thead>
    <tr>
      <th scope="col">タグ</th>
      <th scope="col">役割</th>
      <th scope="col">使う場面</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tr</td>
      <td>横1行を作る</td>
      <td>表の行を増やしたいとき</td>
    </tr>
    <tr>
      <td>td</td>
      <td>データセルを作る</td>
      <td>通常の値を入れたいとき</td>
    </tr>
    <tr>
      <td>th</td>
      <td>見出しセルを作る</td>
      <td>列名や行名を入れたいとき</td>
    </tr>
  </tbody>
</table>

.basic-table {
  width: 100%;
  border-collapse: collapse;
}

.basic-table th,
.basic-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.basic-table th {
  background-color: #f5f5f5;
}

このコードでは、theadの中に見出し行、tbodyの中にデータ行を入れています。thタグに scope="col" を指定することで、スクリーンリーダー（音声読み上げブラウザ）が表の構造を正しく認識できるようになり、SEOやアクセシビリティの観点からも推奨されます。

実務では、表の見出し行はthead、通常のデータ行はtbodyに分けると、HTMLの構造が読みやすくなります。

行を増やしたいときはtrを追加する

テーブルに行を増やしたいときは、tbodyの中にtrを追加します。

<tbody>
  <tr>
    <td>HTML</td>
    <td>構造を作る</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>見た目を整える</td>
  </tr>
</tbody>

列を増やしたい場合は、各trの中にtdやthを追加します。

1つの行だけtdの数が違うと、表の見た目が崩れることがあります。基本的には各行のセル数をそろえましょう。

【CSSトラブル解決】trにborderが効かない原因と対策

「trにborderを書いたのに枠線が表示されない」という悩みは、HTMLテーブルでよくあります。原因は、trがセルそのものではなく「行のまとまり」を表す要素であり、テーブルのborderの見え方にはborder-collapseが関係するためです。

trにborderを書いても見えにくい例

次のようにtrへborderを書いても、思った通りに枠線が見えないことがあります。

tr {
  border: 1px solid #ddd;
}

trは行全体を表すタグですが、実際に見えているマスはtdやthです。そのため、枠線はtd・th側に指定する方が安定します。

対策1：td・thにborderを指定する

表全体に格子状の枠線を付けたい場合は、tdとthにborderを指定するのが分かりやすいです。

.basic-table {
  border-collapse: collapse;
}

.basic-table th,
.basic-table td {
  border: 1px solid #ddd;
  padding: 12px;
}

この方法なら、セル単位で枠線が表示されるため、初心者でも結果を確認しやすいです。

テーブルに枠線を付けたい場合は、まずtableにborder-collapse: collapse; を指定し、td・thにborderを書くのが基本です。

対策2：行の下線だけならtd・thにborder-bottomを指定する

行ごとに横線だけを入れたい場合は、trではなくtd・thにborder-bottomを指定すると安定します。

.row-border-table {
  width: 100%;
  border-collapse: collapse;
}

.row-border-table th,
.row-border-table td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

この方法では、各セルの下線がつながって見えるため、行全体に線が入っているように見えます。

対策3：border-collapseを設定してtrのborder-bottomを使う

trに行単位の線を指定したい場合は、tableにborder-collapse: collapse;を指定したうえで、trにborder-bottomを指定します。

.line-table {
  width: 100%;
  border-collapse: collapse;
}

.line-table tr {
  border-bottom: 1px solid #ddd;
}

.line-table th,
.line-table td {
  padding: 12px;
}

ただし、ブラウザや既存CSSの影響で見え方が変わる場合があります。実務では、td・th側に線を付ける方法の方が管理しやすいことが多いです。

borderが効かないと感じたら、trだけを疑うのではなく、tableのborder-collapse、td・thのborder、既存CSSの上書きも確認しましょう。

table > tr のCSSが効かない場合もある

HTMLで<table>の直下にtrを書いた場合でも、ブラウザが自動的にtbodyを補うことがあります。そのため、CSSでtable > trと書くと、期待通りに当たらない場合があります。

table > tr {
  background-color: #f5f5f5;
}

table tbody tr {
  background-color: #f5f5f5;
}

trをCSSで指定するときは、table直下ではなくtbody内にある前提で書くと、実際のブラウザ表示に合いやすくなります。

【応用】trの背景色を一行おきに交互に変える方法

表の行を一行おきに色分けすると、横に長い表でも読みやすくなります。このようなデザインは、ストライプ模様のテーブルと呼ばれることがあります。

nth-child(even)で偶数行だけ背景色を変える

CSSの:nth-child(even)を使うと、偶数番目のtrだけを選択できます。

.stripe-table {
  width: 100%;
  border-collapse: collapse;
}

.stripe-table th,
.stripe-table td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

.stripe-table tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}

この指定では、tbody内の2行目、4行目、6行目のような偶数行だけ背景色が変わります。

nth-child(odd)なら奇数行を指定できる

奇数行を指定したい場合は、oddを使います。

.stripe-table tbody tr:nth-child(odd) {
  background-color: #fafafa;
}

一行おきに背景色を変えるなら、tbody tr:nth-child(even) または tbody tr:nth-child(odd) を使うのが簡単です。

theadまで色が変わらないようにtbodyを付ける

trにnth-childを使うときは、theadとtbodyを分けておくと管理しやすいです。

<table class="stripe-table">
  <thead>
    <tr>
      <th>タグ</th>
      <th>役割</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tr</td>
      <td>行を作る</td>
    </tr>
    <tr>
      <td>td</td>
      <td>データセルを作る</td>
    </tr>
  </tbody>
</table>

theadを含めてtr:nth-childを指定すると、見出し行も数えられて色の付き方がずれる場合があります。基本はtbody trに対して指定しましょう。

trタグを書くときの実務チェックリスト

最後に、trタグを使うときの確認ポイントをまとめます。

確認項目	チェック内容
行とセル	trの中にtdまたはthを入れているか
見出し	見出しセルにはthを使っているか
構造	theadとtbodyを分けているか
枠線	tableにborder-collapse、td・thにborderを指定しているか
ストライプ	tbody tr:nth-child(even)のようにtbody内へ指定しているか
アクセシビリティ	thにscope属性を付けるか検討しているか

trタグは表の行を作る土台です。枠線や背景色などの見た目は、CSSでtd・thやtbody trに指定すると管理しやすくなります。

公式ドキュメントも確認する

tr・td・thやCSSの仕様を正確に確認したい場合は、公式ドキュメントも参考になります。

• MDN Web Docs tr要素
• MDN Web Docs td要素
• MDN Web Docs th要素
• MDN Web Docs border-collapse
• MDN Web Docs nth-child

まとめ

この記事では、HTMLのtrタグについて解説しました。

trタグはテーブルの横1行を作るタグで、その中にtdタグやthタグを入れてセルを作ります。tdタグは通常のデータセル、thタグは見出しセルです。見出しにはth、通常の値にはtdを使うと、表の意味が伝わりやすくなります。

trにborderが効かないと感じる場合は、tableにborder-collapse: collapse;を指定し、td・thにborderやborder-bottomを付ける方法から試しましょう。また、行を一行おきに色分けしたい場合は、tbody tr:nth-child(even)を使うと簡単です。表はHTMLの構造とCSSの指定がセットで分かると、一気に扱いやすくなります。まずはtr・td・thの役割を分けて理解し、必要に応じてborderや背景色をCSSで整えていきましょう。