サンプル

ソース

XHTML
<table class="table211">
  <col class="month" />
  <col class="session" />
  <col class="pageview" />
  <col class="newsession" />
  <col class="staytime" />
  <col class="conversion" /> 
  <tr>
    <th scope="col">年月</th>
    <th scope="col">セッション</th>
    <th scope="col">ページビュー</th>
    <th scope="col">新規セッション率</th>
    <th scope="col">平均滞在時間</th>
    <th scope="col">コンバージョン数</th>
  </tr>
  <tr>
    <td>2007-01</td>
    <td>5624</td>
    <td>8021</td>
    <td>75.2%</td>
    <td>00:42</td>
    <td>4</td>
  </tr>
  <tr>
    <td>2007-02</td>
    <td>5021</td>
    <td>7533</td>
    <td>70.1%</td>
    <td>01:06</td>
    <td>5</td>
  </tr>
  <tr>
    <td>2007-03</td>
    <td>5847</td>
    <td>9105</td>
    <td>81.3%</td>
    <td>00:36</td>
    <td>2</td>
  </tr>
  <tr>
    <td>2007-04</td>
    <td>6185</td>
    <td>10230</td>
    <td>84.9%</td>
    <td>00:53</td>
    <td>6</td>
  </tr>
  <tr>
    <td>2007-05</td>
    <td>5133</td>
    <td>7688</td>
    <td>76.0%</td>
    <td>01:15</td>
    <td>5</td>
  </tr>
</table>

CSS
table.table211 {
  margin-top: 0.2em;
  margin-bottom: 1em;
  width: 570px;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 100%;
}

table.table211 caption {
  margin-top: 1em;
  text-align: right;
}

table.table211 th,
table.table211 td {
  padding: 4px 6px;
}

table.table211 th {
  background: #1B3AB4;
  text-align: center;
  white-space: nowrap;
  font-size: 92%;
  color: #FFF;
}

table.table211 td {
  text-align: right;
  white-space: nowrap;
}

table.table211 col.month {
  background: #CBD5FF;
}

table.table211 col.session {
  background: #F2F5FF;
}

table.table211 col.pageview {
  background: #F2F5FF;
}

table.table211 col.newsession {
  background: #EBEEFF;
}

table.table211 col.staytime {
  background: #EBEEFF;
}

table.table211 col.conversion {
  background: #E0E6FF;
}