あまめも

テーブルの背景を簡単に奇数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番目です)のみ設定可能。
tbody tr:nth-child(2n){
 background: #bce2e8;
}

上記例では偶数のテーブル番号の時に背景の色が変わります。奇数の時に色を変えたいのであれば単純に2nのところを2n+1と書きます(※1)nと書くと全てのセルの色が変わってしまうので意味がありません。

どんな時に上記設定が役立つかと言うと、「横に長い」または「列数の多い」テーブルを見易くする時。色で仕切られていると、とても見易くなります。

簡単な例を下記に書くと。通常何も設定してないテーブルを作成すると、

品名サイズ価格備考
ハンバーグ200g500円
ハンバーグ250g1000円
ハンバーグ300g1500円
ハンバーグ350g2000円
ハンバーグ400g2500円
ハンバーグ500g3000円
ステーキ150g1320円

こうなりますが、cssを設定すると、

品名サイズ価格備考
ハンバーグ200g500円
ハンバーグ250g1000円
ハンバーグ300g1500円
ハンバーグ350g2000円
ハンバーグ400g2500円
ハンバーグ500g3000円
ステーキ150g1320円

見易くなります。横ではなく縦で色を変える事も可能。

品名サイズ価格備考
ハンバーグ200g500円
ハンバーグ250g1000円
ハンバーグ300g1500円
ハンバーグ350g2000円
ハンバーグ400g2500円
ハンバーグ500g3000円
ステーキ150g1320円
td:nth-child(n)trtdに変更するだけ。

まとめ

テーブルの色を変えるときは、cssで設定可能。設定方法の例を書くと。

tbody tr:nth-child(2n){ /* 偶数行に色を設定 */
 background: #bce2e8; /* 背景色 */
}

tbody td:nth-child(2n+1){ /* 奇数列に色を設定 */
 background: #bce2e8; /* 背景色 */
}

※1: 2n-1でも構いません。

関連記事

  1. [甘]たったこれだけ?Macの時計が速かったからなおしてみた。

  2. 【HTML】サイトで漢字にルビ(読み仮名)ふりたいんだけどなんて…

  3. Macで簡単に写真の容量を小さくする方法

  4. gitのリモートリポジトリをDropboxで作成してpushする…

  5. [甘]Macで簡単にファイルを連続でリネームする方法!

  6. [甘]入力が面倒だからMACのユーザー辞書をiPhoneと同期し…

こんなメモもありますよ♪

Twitter

ページ上部へ戻る