説明

実行例のような単純なテーブルを作ろうとしたら、おそらく下のような タグになると思います。
しかし、ＢさんとＣさんの間にＧさんを入れようとすると セルの背景色が ずれるため、修正が大作業になってしまいます。

JavaScriptで テーブルを作ってしまえば、編集が楽になります。
myTbl は、テーブルに表示する項目の配列です。この順番にテーブルに表示していきます。
myTblColor は、テーブルのセルに交互に付ける背景色の配列です。

データの数だけ、<div> 〜 </div>の行を作成します。

今回は ループ(for文) という if 文の 次にくるプログラムの基本となる命令を使います。

書式は、
for ( 初期値設定; ループ条件; ループ後の処理 ){ ループ内処理 }
です。

初期値設定	ループカウンタの初期値をセットします。
ループ条件	いつまでループするかの条件式をセットします。
ループ後の処理	ループカウンタを加算します。
ループ内処理	ループしている間 処理するプログラムを書きこみます。

初期値設定は、for文を始める時に１回のみ処理します。
次に、ループ条件をチェックして、条件を満たしていたら、ループ内処理を行います。
ループ内処理が終われば、ループ後の処理をして、再びループ条件をチェックします。
ループ条件が満たしていなければ、for 文の ループは終わります。

for 文も if 文同様に、処理が 1つだけでなら、括弧{}は省略できます。

サンプルでは、６個の配列データを テーブルに書きこみたいので、初期値設定は配列の先頭、つまり０を i にセットします。
ループ条件は データの数だけ ループしたいので、配列の数が入っている myTbl.length を使って、
で、i が myTbl.lengthより小さければ条件成立となり、ループ内処理を行います。
ループ後の処理は 次の配列のデータを参照したいので、i に１を足すという処理を記述します。

配列の数(myTbl.length) は 6なので i=0〜5 の 6回ループします。

ループ内処理にて、<div> 〜 </div> の行を作成していきます。

セルの背景色指定に、
とあります。
% は、余りを求める演算子です。
a = 7 % 2 ; とすれば、a には 1 が入ります。
背景色は ２種類の色を 交互につけていくので、i を２で割った 余りは ０か１なので、myTblColor の0番目と１番目の背景色を交互に取り出せるわけです。

CSSで交互に背景色を変える

交互に背景色を変えるのは JavaScriptを使わなくても、スタイルシートだけでも実現できます。


奇数行を nth-child(odd) 、偶数行を nth-child(even) で指定します。

非常に便利なCSSですが IE8以下が対応していないため、まだ実用的ではありません。