サンプル

ソース

XHTML
<table class="table010"">
  <caption>サービスコースと料金のご案内</caption>
  <tr>
    <th scope="col">コース</th>
    <th scope="col">内容</th>
    <th scope="col">時間</th>
    <th scope="col">料金</th>
  </tr>
  <tr class="course-c">
    <td class="course">C</td>
    <td>テキストテキスト......</td>
    <td class="time">40分</td>
    <td class="fee">3,000円</td>
  </tr>
  <tr class="course-b">
    <td class="course">B</td>
    <td>テキストテキスト......</td>
    <td class="time">60分</td>
    <td class="fee">4,000円</td>
  </tr>
  <tr class="course-a">
    <td class="course">A</td>
    <td>テキストテキスト......</td>
    <td class="time">80分</td>
    <td class="fee">5,000円</td>
  </tr>
  <tr class="course-sp">
    <td class="course">SP</td>
    <td>テキストテキスト......</td>
    <td class="time">100分</td>
    <td class="fee">6,000円</td>
  </tr>
</table>

CSS
table.table111 {
  margin-top: 0.2em;
  margin-bottom: 1em;
  width: 570px;
  border-collapse: collapse;
  border: solid 1px #999;
  font-size: 100%;
}

table.table111 caption {
  margin-top: 1em;
  text-align: left;
}

table.table111 th,
table.table111 td {
  border: solid 1px #999;
  padding: 4px 6px;
}

table.table111 th {
  background: #E6E6E6;
  text-align: center;
  white-space: nowrap;
  color: #666;
}

table.table111 td.course {
  text-align: center;
  font-size: 200%;
  font-weight: bolder;
}

table.table111 td.time,
table.table111 td.fee {
  text-align: right;
  white-space: nowrap;
}

table.table111 tr.course-c {
  background: #FFF3F9;
}

table.table111 tr.course-b {
  background: #FFE6F3;
}

table.table111 tr.course-a {
  background: #FFD9EC;
}

table.table111 tr.course-sp {
  background: #FFCCE6;
}