サンプル

ソース

XHTML
<table class="table001">
  <caption>アクセス解析月ごとの集計</caption>
  <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.table021 {
  margin-top: 0.2em;
  margin-bottom: 1em;
  width: 570px;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 100%;
}

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

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

table.table021 th {
  border-bottom: solid 1px #B2B2B2;
  border-right: solid 1px #B2B2B2;
  background: #FFD9F3;
  text-align: center;
  white-space: nowrap;
  font-size: 92%;
}

table.table021 td {
  border-bottom: solid 1px #B2B2B2;
  border-right: solid 1px #B2B2B2;
  background: #F3F3F3;
  text-align: right;
  white-space: nowrap;
}