閉じる
閉じる

あまめも

テーブルの背景を簡単に奇数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. タイプライター

    段落の始まりを一文字自動でインデントする

  2. MarkdownのHタグにクラスを追加する簡単な方法

  3. take091-thumbnail

    【WaznFilm更新】これだけ覚えれば十分、Markdownの…

  4. [甘]WordPressで『プラグインが動かない!?』ってときの…

  5. WordPressで『Twitter Cards』を設定するプラ…

  6. 「Git」を使ってみてコマンドを忘れるのでメモ2

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

  1. ピザ
  2. GIMP

Twitter

ページ上部へ戻る