TwentyTwelveのテーブルがシンプル過ぎて見づらかったので、CSSをちょっといじってみた。
CSS3には、E:nth-child(n)という便利な擬似クラスがあり、E:nth-child(odd)で奇数行、E:nth-child(even)で偶数行のスタイルを定義できる。
これを使って、テーブルを行ごとに色分けしてみた。行ごとに色分けするにはtrタグに対してnth-childを適用する。列ごとならtdに適用すればよい。
1 2 3 4 5 6 7 |
.entry-content tr:nth-child(even) { background-color: #f8f8f8; } .entry-content tr:nth-child(odd) { background-color: #f4f4f4; } |
テーブルを書いてみると、こんな感じで表示される。
りんご | ばなな | |
---|---|---|
英語名 | Apple | Banana |
色 | 赤い | 黄色い |
形 | 丸い | 長い |
硬さ | ちょっと固い | 柔らかい |
味 | すっぱい | 甘い |