CSSでテーブルの行の背景色を交互に変更する方法

CSSの定義のみで、テーブルの行の背景色を交互に変更する方法

IE8ではこの方法を使えないので、IE8をサポートする場合にはjQueryなどを使って回避する必要があります。
[jQuery]テーブルの行の背景色を交互に変更する方法

CSSのみでの背景色の変更は、nth-child擬似クラスを使用して行います。
下の例のように、trの何番目の子要素に対して背景色を適用するかみたいな使い方をします。
テーブルの場合、タイトル行をthで定義したりするので、tdのみに背景色を適用するようにセレクタを定義しています。

    /* 偶数行の背景色を変更 */
    tr:nth-child(even) td {
      background-color: #eee;
    }

    /* 奇数行の背景色を変更 */
    tr:nth-child(odd) td {
      background-color: #eee;
    }

    /* 任意の行数毎に背景色を変更(この例だと4nと指定しているので4行ごと) */
    tr:nth-child(4n) td {
      background-color: #eee;
    }