テーブルの背景を簡単に奇数or偶数行で色を変えて見易くしたい！
こんにちは！ あますた(@amaguristar)です。
htmlでテーブルを使用すると、「見づらいな〜」ってことありませんか？ そこで見易くするために奇数もしくは偶数で交互にテーブルの背景色を変えようって今回です。
設定方法は簡単。cssで「nth-child(n)セレクタを設定するだけ」。
nth-child(n)の「n」は、0,1,2,3・・・と0から始まる整数です。()内には「n」を使った数式を代入する事も可能。
例)
2n -> 0,2,4,6・・・ つまり「偶数」
2n+1 -> 1,3,5・・・ つまり「奇数」
因みに6と()内に書くと7番目(0から始まるので7番目です)のみ設定可能。
例)
2n -> 0,2,4,6・・・ つまり「偶数」
2n+1 -> 1,3,5・・・ つまり「奇数」
因みに6と()内に書くと7番目(0から始まるので7番目です)のみ設定可能。
tbody tr:nth-child(2n){
background: #bce2e8;
}上記例では偶数のテーブル番号の時に背景の色が変わります。奇数の時に色を変えたいのであれば単純に2nのところを2n+1と書きます(※1)。nと書くと全てのセルの色が変わってしまうので意味がありません。
どんな時に上記設定が役立つかと言うと、「横に長い」または「列数の多い」テーブルを見易くする時。色で仕切られていると、とても見易くなります。
簡単な例を下記に書くと。通常何も設定してないテーブルを作成すると、
| 品名 | サイズ | 価格 | 備考 |
|---|---|---|---|
| ハンバーグ | 200g | 500円 | |
| ハンバーグ | 250g | 1000円 | |
| ハンバーグ | 300g | 1500円 | |
| ハンバーグ | 350g | 2000円 | |
| ハンバーグ | 400g | 2500円 | |
| ハンバーグ | 500g | 3000円 | |
| ステーキ | 150g | 1320円 | |
| … | … | … | … |
こうなりますが、cssを設定すると、
| 品名 | サイズ | 価格 | 備考 |
|---|---|---|---|
| ハンバーグ | 200g | 500円 | |
| ハンバーグ | 250g | 1000円 | |
| ハンバーグ | 300g | 1500円 | |
| ハンバーグ | 350g | 2000円 | |
| ハンバーグ | 400g | 2500円 | |
| ハンバーグ | 500g | 3000円 | |
| ステーキ | 150g | 1320円 | |
| … | … | … | … |
見易くなります。横ではなく縦で色を変える事も可能。
| 品名 | サイズ | 価格 | 備考 |
|---|---|---|---|
| ハンバーグ | 200g | 500円 | |
| ハンバーグ | 250g | 1000円 | |
| ハンバーグ | 300g | 1500円 | |
| ハンバーグ | 350g | 2000円 | |
| ハンバーグ | 400g | 2500円 | |
| ハンバーグ | 500g | 3000円 | |
| ステーキ | 150g | 1320円 | |
| … | … | … | … |
td:nth-child(n)とtrをtdに変更するだけ。
まとめ
テーブルの色を変えるときは、cssで設定可能。設定方法の例を書くと。
tbody tr:nth-child(2n){ /* 偶数行に色を設定 */
background: #bce2e8; /* 背景色 */
}
tbody td:nth-child(2n+1){ /* 奇数列に色を設定 */
background: #bce2e8; /* 背景色 */
}※1: 2n-1でも構いません。
