« インテル ラピッド・ストレージ・テクノロジー | メイン | くぎ煮 »

2016年3月14日(月)

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

 どきHTMLを手書きする人なんてそうそういらっしゃらないと思うんですが…相変わらずやってます(^^;

 (例によって他の記事と同様、完全な備忘録です)

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

<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なんかでガシガシ書かないかんのかなと勝手に思ってましたんで。ヒントをいただいた記事に感謝、です。

投稿者 ji3kdh : 2016年3月14日(月) 21:22 カテゴリ : ソフトウェア タグ :

トラックバック

このエントリーのトラックバックURL:
http://www.2333.net/~ji3kdh/weblog/mttb_m26.cgi/1859/tb/

トラックバックスパム防止のため、トラックバックURLの末尾に、上記画像の数字列を続けて入力の上でご利用下さい。
お手数をおかけいたしますが、よろしくお願い申し上げます。

コメント

コメントはこちら↓からどうぞ




保存しますか?


認証キー を入力して下さい→

コメントの投稿ボタンを押してから反応があるまで、通常30〜60秒かかります。
省エネサーバで運用しておりますので、気長にお待ちいただければ幸いです(^^)