テーブルの一行おきに色を付ける

　以前の記事でテーブルを利用している部分があるのですが、見やすいだろうと一行おきに色を付けるのに、良く分からないので原始的にタグでいちいち指定してました。

<table border="0">
<tr bgcolor="goldenrod"><th>店名(読み)</th><th>ジャンル
<tr valign="top"><td><a href="http://www.fujimotofoods
<tr valign="top" bgcolor="lemonchiffon"><td>あんずの花
<tr valign="top"><td><a href="http://trattoriaalmo.web
<tr valign="top" bgcolor="lemonchiffon"><td><a href="h
<tr valign="top"><td>漁師の台所</td><td>居酒屋</td><td

　別にこれでもいいんですが、これだとあとから行を挿入したときにそこから下を全部修正していかなくてはなりません。テキストエディタである程度省力化は可能ですが、それでも面倒ですし間違いの元でもあります。

　きっとやり方はあるはず、と思って前から調べてたんですが、なかなか簡単にできそうなものを見つけられずにいました。でもいい加減面倒に感じられたのでもうちょっと真面目に調べてみたら、こちらにヒントがありました。

　リンク先では記事の中にスタイルシートを記述してますが、元々ここのブログは別ファイルで記述してます。そこに追加したらええんとちゃうん?　ってことで、stylesheet内の

.content table {
  line-height: 110%;
  }

となっている箇所を

.content table {
  line-height: 110%;
  }

.content table.zebra th {
  background-color: goldenrod;
  color: #FFFFF3;
  }

.content table.zebra tr:nth-child(odd) td {
  background-color: lemonchiffon;
  }

というようにしてみました。これはつまり、class="zebra"を追記したテーブルについて、ヘッダ行の文字色と背景色指定、それにデータの奇数行(ヘッダ行を除くと偶数行)の背景色を指定する記述となってます。

　これで本文側は

<table class="zebra" border="0">
<tr><th>店名(読み)</th><th>ジャンル</th><th>距離</th><
<tr valign="top"><td><a href="http://www.fujimotofoods
<tr valign="top"><td>あんずの花</td><td>創作中華</td><
<tr valign="top"><td><a href="http://trattoriaalmo.web
<tr valign="top"><td><a href="http://www.rougetomato.j
<tr valign="top"><td>漁師の台所</td><td>居酒屋</td><td

　と、class指定してやるだけで済むようになりました。

　こうしておくと行挿入しても気遣い不要になるのはもちろん、他の記事でも利用できるようになりますし、class="zebra" を記述しなければ今まで通りのテーブルになります。

　いやー、こんな簡単・シンプルにいけるとは知りませんでして、分かる方には何を今さらなんでしょうけど、ちょっと嬉しくなってしまいました。JavaScriptなんかでガシガシ書かないかんのかなと勝手に思ってましたんで。ヒントをいただいた記事に感謝、です。