trタグ 👉 表の行

HTMLの<tr>ティーアールタグは、表(テーブル)の1つ1つの行を表します。trは「Table Row(表の行)」の略です。

HTMLのテーブルのイメージ

HTMLのテーブルは、行(<tr>)がたくさん並ぶことで作られます。
テーブルの1つ1つのマス目(セル)である<td><tr>は、必ずどこかの行の中に入ります。

HTMLのテーブル(<table>)の基本的な使い方は、下記ページをご覧ください。

trタグの使い方

HTMLのテーブルは、<table>の中に、複数の行(<tr>)を入れ、さらにその中にセル(<td><th>)を入れることで作られます。

<table>
  <tr><!-- 行1 -->
    <th>選手名</th> <th>スコア</th>
  </tr>
  
  <tr><!-- 行2 -->
    <td>ジョン</td> <td>5</td>
  </tr>
  
  <tr><!-- 行3 -->
    <td>ニック</td> <td>9</td>
  </tr>
</table>

👆1つ1つのセルは、必ず<tr>の中に入れる必要があります。

trは必要な数だけ配置できる

<tr>はテーブルに必要な行の数だけ使うことができます。

1行だけのテーブルでもOK

<table>
  <tr>
    <td></td>
    <td></td>
    <td>ハムスター</td>
  </tr>
</table>

👆単純にデータを並べるだけであれば、1行だけのテーブルにしてもOKです。

行をグループ分け

HTMLのテーブルでは、<thead>(表のヘッダー)や<tbody>(表の主要な部分)、<tfoot>(表のフッター)という3つのタグを使って、行をグループ分けすることもできます。

😺これらのタグは必要なければ使わなくてOKです。

<table>
  <thead>
    <tr><!-- 行1 -->
      <th>選手名</th> <th>スコア</th>
    </tr>
  </thead>
  
  <tbody>
    <tr><!-- 行2 -->
      <td>ジョン</td> <td>5</td>
    </tr>
    <tr><!-- 行3 -->
      <td>ニック</td> <td>9</td>
    </tr>
  </tbody>
</table>

👆<thead><tbody>の中に<tr>を配置します。「ここがヘッダー行で、ここからここがメインの行で…」というように、行の区分が明確になるわけですね。

trの子要素はtdとthだけ

<tr>の子要素として使えるHTMLタグ(要素)は、基本的に<td><th>だけです。

HTML 🙅間違った使い方
<table>
  <tr>
    <img src="...">
    <span></span>
  </tr>
</table>

👆<tr>の直下に<td><th>以外の要素を置くことはできません。

HTML 🙆‍正しい使い方
<table>
  <tr>
    <td><img src="..."></td>
    <td><span></span></td>
  </tr>
</table>

👆<tr>の直下にセル(<td><th>)を置き、その中に他の要素を入れるのはOKです。


ここからはCSSでテーブルの行(<tr>)を装飾する方法を紹介します。

CSSで1行ごとに背景色を変える

以下のようなCSSを指定することで、テーブルの行ごとに別のデザイン(スタイル)を適用することができます。

CSS 行ごとにデザインを変える
tr:nth-child(2n) {
  /* 偶数行のスタイルを指定 */
}

tr:nth-child(2n + 1) {
  /* 奇数行のスタイルを指定 */
}

👆:nth-childは、「○番目の○○要素を…」という指定ができるCSSセレクタです。(2n)なら「偶数番目の」、(2n + 1)なら「奇数番目の」という意味になります。

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
th, td {
  border: solid 1px #333;
}
/* ↓見出しセルの色 */
th {
  color: #FFF;
  background-color: #53a7ef;
}
/* ↓奇数行の色 */
tr:nth-child(2n+1) {
  background-color: #edf9ff;
}

👆1行ごとに背景色を変える例です。tr:nth-child(2n+1) { ~ }で、奇数行の背景色を変えています。なお、いちばん上の行の「見出しセル」の色はth { ~ }で変えることができます。

CSSで特定の行だけ背景色を変える

テーブルの特定の行だけスタイルを変えることもできます。そのためには、まずCSSで「行をどのようなスタイルにするか」を指定しておきます。

CSS 行を装飾するためのclassを作っておく
/* 行を赤くする */
.line-red {
  background: #ffebf0;
  color: #ff6369;
}

/* 行を青くする */
.line-blue {
  background: #e8f3ff;
  color: #0095ff;
}

👆例としてCSSにこのように書いておきます。あとは、HTMLで<tr>にclassを指定するだけです。

<table>
  <tr>
    <th>果物</th> <th></th>
  </tr>
  <tr>
    <td>いちご</td> <td>甘い</td>
  </tr>
  <tr class="line-red">
    <td>もも</td> <td>超甘い</td>
  </tr>
  <tr class="line-blue">
    <td>ぶどう</td> <td>甘い</td>
  </tr>
</table>

👆<tr>タグにさきほど作ったclass名を指定すれば、特定の行のスタイルだけを変えることができます。