[使える CSS テクニック]CSSを使った見栄えの良い表組み︵table︶

<table id="table-01">
<tr>
<th>本体名称</th>
<th>スタンド名</th>
<th>スピード</th>
<th>持続力</th>
<th>精密動作性</th>
<th>成長性</th>
</tr>
<tr>
<td>空条 承太郎</td>
<td>スター・プラチナ</td>
<td>A</td>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>ジョセフ・ジョースター</td>
<td>ハーミット・パープル</td>
<td>C</td>
<td>A</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>東方 仗助</td>
<td>クレイジー・ダイヤモンド</td>
<td>A</td>
<td>B</td>
<td>B</td>
<td>C</td>
</tr>
</table>

table#table-01 {
    width: 530px;
    border: 1px #E3E3E3 solid;
    border-collapse: collapse;
    border-spacing: 0;
}

table#table-01 th {
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
table#table-01 td {
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
}

table#table-02 {
    width: 530px;
    border: 1px #E3E3E3 solid;
    border-spacing: 0;
    background: #D5F0F0 url(img/bg_02.gif) repeat-x 0 100%;
}

table#table-02 th {
    padding: 5px;
    border: #98DCDC solid;
    border-width: 0 0 1px 1px;
    background: #73CECE url(img/bg_02_header.gif) repeat-x 0 100%;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
table#table-02 td {
    padding: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #FFFFFF #8ED9D9 #8ED9D9 #FFFFFF;
    color: #1A4444;
    text-align: center;
}