HTML/CSS

【HTML+CSS】tableでエクセルの様な交互の背景色を指定するには?

更新日:

【HTML】tableで交互の背景色

 

HTMLのtableで表の背景色を交互にしたいことってありますよね。

背景色を交互にすると複数行の表も見やすくなるので、覚えておきましょう!

 

<table>でエクセルの様な交互の背景色を指定するには

今回は、下の表で説明をしていきます。

 

▼サンプル

See the Pen table background by YUU (@webjo_yuu) on CodePen.

 

tableの背景色を指定する ~ HTML ~

HTML側には特に必要な記述はありません。

普通のコードでOKです。

 

複数のテーブルを使う時はIDやクラスをつけて対応しましょう~

 

<th>が表内の見出しです。

<thead><tbody>は構造を伝えるためのマークアップなので、必要に応じて使用してください。

 

tableの背景色を指定する ~ CSS ~

今回はすべてCSSでの装飾になります。

以下が、デモに使用したテーブルのCSSです。

注目するところは、21~23行目。

今回は表の1行目を「見出し(th)」行としましたので、<thead>で囲いました。

 

続く内容を<tbody>で囲い、1列目(表でいうと一番左の横見出し)を<th>、残りを<td>としましたので、

tbody tr:nth-child(even) td:nth-child(n+2)

= 「tbody」の中の「偶数番目のtr」の「2番目以降のtd

に背景を指定することで実装しています。

 

たった一文追加するだけです。

 

ちなみに「:nth-child(even)」の「even」は偶数を指定しています。奇数は「odd」で指定できます。

「(n+〇)」は「〇番目以降」の指定です。「〇番目まで」の指定は「(-n+〇)」になります。

 

〇番目系の記述は、使わなそうで意外と使います。

上手く使うとCSSがすっきりして修正もラクになるので、ぜひ使ってみてくださいね~!

 

-HTML/CSS
-, ,

Copyright© Webjo blog , 2020 All Rights Reserved.