catnose
catnose
HTMLの<tr>タグは、表（テーブル）の1つ1つの行を表します。trは「Table Row（表の行）」の略です。
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名を指定すれば、特定の行のスタイルだけを変えることができます。
HTMLのテーブルは、行（
<tr>）がたくさん並ぶことで作られます。テーブルの1つ1つのマス目（セル）である
<td>と<tr>は、必ずどこかの行の中に入ります。