HTML要素 ・ リスト・テーブル
<tr>
表の行
表の1行を表す要素です。中に th や td を並べてセルを作ります。
01
サンプルコード
HTML
1<table>
2 <tr><th>曜日</th><td>月〜金</td><td>土日</td></tr>
3 <tr><th>営業時間</th><td>8:00〜20:00</td><td>9:00〜18:00</td></tr>
4</table>
CSS
1table {
2 border-collapse: collapse;
3}
4th, td {
5 padding: 6px 12px;
6 border: 1px solid #ccc;
7}
8tr:nth-child(even) {
9 background: #f7f7f7;
10}
02
実行結果
ブラウザでの表示
03
解説
tr は "table row" の略で、表の横1行を表します。セルの数は各行でそろえるのが基本です。
tr 自体にはサイズや枠線をあまり指定せず、中の th・td に指定するのが一般的です。背景色は tr に指定できます。
tr:nth-child(even) のように指定すると、1行おきに色を付けて読みやすくできます。
04
応用例・注意点
よく使うCSS
| セレクタ・プロパティ | 説明 |
|---|---|
tr:nth-child(even) | 偶数行だけを選ぶ（しま模様） |
tr:hover | マウスを乗せた行を強調 |
background | 行の背景色 |
マウスを乗せた行を強調する
データの多い表で、見ている行がわかりやすくなります。
CSS
1tbody tr:hover {
2 background: #fff3e4;
3}
注意点
- 01tr の中に直接テキストを書かず、必ず th か td に入れます。
- 02行ごとにセルの数がずれると、表が崩れます。セルを結合するときは colspan・rowspan を使います。