テーブルの文字色/背景色を行ごとに変更する(上級者向け)

アットウィキモードでのテーブル作成すると行(<tr>)ごとにatwiki_tr_行番号というclassが付加されます。
また、奇数行・偶数行ごとにそれぞれatwiki_tr_oddatwiki_tr_evenというclassが付加されます。
これらとCSSカスタマイズを利用して頂くことでテーブルの文字色/背景色を行ごとに変更することができます。

注: 今回の例では#dividを使うことで、CSSの摘要範囲を限定しています。



奇数行・偶数行で文字色/背景色を変える

CSSカスタマイズで
div#atwiki_table_sample tr.atwiki_tr_odd {
color: #fff;
background: #999;
}
div#atwiki_table_sample tr.atwiki_tr_even {
color: #999;
background: #fff;
}
と設定し、
#divid(atwiki_table_sample){
|1行目は|奇数行|です|
|2行目は|偶数行|です|
|3行目は|奇数行|です|
|4行目は|偶数行|です|
}
上記のように入力すると
1行目は 奇数行 です
2行目は 偶数行 です
3行目は 奇数行 です
4行目は 偶数行 です
と表示されます.


行単位で文字色/背景色を変える

CSSカスタマイズで
div#atwiki_table_sample2 tr.atwiki_tr_1 {
color: #fff;
background: blue;
}
div#atwiki_table_sample2 tr.atwiki_tr_2 {
color: #fff;
background: #999;
}
div#atwiki_table_sample2 tr.atwiki_tr_3 {
color: blue;
background: #fff;
}
div#atwiki_table_sample2 tr.atwiki_tr_4 {
color: green;
}
と設定し、
#divid(atwiki_table_sample2){
|1行目は|白文字、青背景|です|
|2行目は|白文字、灰色背景|です|
|3行目は|青文字、白背景|です|
|4行目は|緑文字|です|
}
上記のように入力すると
1行目は 白文字、青背景 です
2行目は 白文字、灰色背景 です
3行目は 青文字、白背景 です
4行目は 緑文字 です
と表示されます.