いろいろと情報が多いページをまとめるのは
やはりテーブルのスタイルがまとめやすい。
けれど一行が長い＆行数が多いとなると
それはそれでやはり目でおっていくのが大変。
では一行ずつ色変えをすると少しは見やすくなるね。
と誰でも考えたことはあると思いますが、
一行ごとにclassを指定していくのはめんどくさい。
ここを自動化できれば便利だと思いませんか？
この方法なら、表組が何行でも全部自動で色変えができます。
具体的には下のようになります
※もし下の表組みが全部同じ色に見えたらあなたのブラウザには対応してませんorz
| タイトル | タイトル |
|---|---|
| 情報 | 情報 |
| 情報 | 情報 |
| 情報 | 情報 |
| 情報 | 情報 |
これのcssは以下のようになっています。
<style type="text/css">
#table1 {
width:500px;
border:1px solid #333333;
border-collapse:collapse;
margin:0px 0px 20px 6px;
font-size:100%;
}
#table1 td{border:1px solid #333333;padding:6px;vertical-align:top;}
#table1 th{border:1px solid #000000;padding:6px;vertical-align:top;}
#table1 tr:nth-child(odd) td{ background-color:#F0F8FF;color:#333333;}
#table1 tr:nth-child(even) td{background-color:#ffff99;color:#333333;}
</style>
