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 |
| 色 | 赤い | 黄色い |
| 形 | 丸い | 長い |
| 硬さ | ちょっと固い | 柔らかい |
| 味 | すっぱい | 甘い |