コピペOK!CSSで表の背景色を交互に変えるコード

table-color01
(YouTube, AdSense, Play 公認エキスパート)
2021年02月05日 in Web・IT
記事内にPR・広告が含まれる場合があります

表(テーブル)を分かりやすく綺麗に表示する方法として、行ごとor列ごとに背景色を変えるという方法があります。しかしHTMLのコードに各行・列ごとに色を指定していくのはとても面倒です。行数・列数が少ない表であれば一つ一つ指定していくのも可能でしょうが、多い表であれば大変な作業ですね。さらに、途中に行・列を追加したら手動でやり直しということにもなりかねません。

ここは自動で交互に背景色が変わるように設定したいものです。

広 告

CSSだけで背景色を交互に変えることが可能!

実はCSSだけで表の背景色を交互に変えることができます。コピー&ペーストだけで出来るので、ぜひ活用してみてください!
※IE8以下のブラウザには対応していません。

行ごとに色を変える

▼CSS

.t-line tr:nth-child(odd) td {  
  background-color: #EAF6FD;  
}
.t-line tr:nth-child(even) td {  
  background-color: #EFEFEF;  
}  
 

※(odd)を記入すると奇数に対して、(even)を記述すると偶数に対して指定することができます。

▼HTML

<table class="t-line">
  <tr>
    <td>1行目左</td>
    <td>1行目右</td>
  </hr>
  <tr>
    <td>2行目左</td>
    <td>2行目右</td>
  </hr>
  <tr>
    <td>3行目左</td>
    <td>3行目右</td>
  </hr>
  <tr>
    <td>4行目左</td>
    <td>4行目右</td>
  </hr>
</table>

※tableタグのclassに“t-line”を入れたテーブルのみ色が付くようにしてあります。

▼デモサンプル

1行目左1行目右
2行目左2行目右
3行目左3行目右
4行目左4行目右

列ごとに色を変える

▼CSS

.t-row td:nth-child(odd) {
    background:#EAF6FD;
}
.t-row td:nth-child(even) {
    background:#EFEFEF;
}

▼HTML

<table class="t-row">
  <tr>
    <td>1列目</td>
    <td>2列目</td>
    <td>3列目</td>
    <td>4列目</td>
  </tr>
  <tr>
    <td>1列目</td>
    <td>2列目</td>
    <td>3列目</td>
    <td>4列目</td>
  </tr>
</table>

※tableタグのclassに“t-row”を入れたテーブルのみ色が付くようにしてあります。

▼デモサンプル

1列目2列目3列目4列目
1列目2列目3列目4列目
執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。