テーブルをcssで立体的にアレンジする

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

テーマ：【テーブルをcssで立体的にアレンジする】

使用：【XHTML/CSS  photoshop 透過png】

それでは早速やってみます。 >

使用するhtmlはこちら。<table>
<caption><span></span>テーブルのデザインアレンジ</caption>
<tr>
<th></th>
<th>セレス</th>
<th>パラス</th>
<th>ジュノー</th>
<th>ベスタ</th>
</tr>
<tr>
<td class=”row”>火星</td>
<td>opposition</td>
<td>square</td>
<td>trian</td>
<td>trian</td>
</tr>(ーーーー以下くりかえし)
</table>

これによく使うcssをはめ込んでみます。

caption {
    padding: 2px 0 2px 8px;
    margin-bottom: 5px;
    border-left: 5px solid #d94800;
    text-align: left;
    font-weight: bold;
}

table {
    width: 506px;
    border-collapse: collapse;
    font-family: Georgia, “Verdana”, “MS Pゴシック”, sans-serif;
    color: #333333;
}
th {
    width: 100px;
    padding: 0.5em;
    border: 1px solid #cccccc;
    background: #739999;
    color: #ffffcc;
}
td.row {
    width: 100px;
    padding: 0.8em 0.5em;
    border: 1px solid #cccccc;
    background: #e2e2e2;
    font-weight: bold;
    color: #333333;
}
td {
    width: 100px;
    padding: 0.8em 0.5em;
    border: 1px solid #cccccc;
    text-align: center;
    font-weight: bold;
    color: #d94800;
}

この状態でブラウザを見ると、

普通ですね。 

では、少し工夫を加えたcssにしてみます。

caption {
    position: relative;
    padding: 5px 0 5px 45px;
    background: url(../img/caption.png) no-repeat left top;

　　/* 背景に双葉の形をした画像を指定 */    
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
}
caption span { /* テキストに透過pngを使ってグラデーションをつける */

    background: url(../img/touka.png) repeat-x left top;
    position: absolute;
    display: block;
    width: 100%;
    height: 30px;
}
table {
    width: 506px;
    border: 3px solid #e2e2e2;
    border-collapse: separate;
    border-spacing: 0; /* ボーダー同士の隙間をなくす */
    font-family: Georgia, “Verdana”, “MS Pゴシック”, sans-serif;
    background: url(../img/table.png) repeat-x left top;

　 /* 背景にグラデーションの画像をひいてテーブル全体に変化をつける */

　 color: #333333;
}
th {
    width: 100px;
    padding: 0.5em;
    border: 1px solid;
    border-color: #a3cccc #558080 #558080 #a3cccc;

    /* borderの４辺の色指定をそれぞれ違う色にし立体的にみせる */

　 background: #ffcccc url(../img/th.png) repeat-x left top;

　 /* 背景に画像をひく */

    color: #ffffcc;
}
td.row {
    width: 100px;
    padding: 0.8em 0.5em;
    border: 1px solid;
    border-color: #e2e2e2 #b3b3b3 #b3b3b3 #e2e2e2;
    background: #ffcccc url(../img/td.png) repeat-x left top;
    font-weight: bold;
    color: #333333;
}
td {
    width: 100px;
    padding: 0.8em 0.5em;
    border: 1px solid;
    border-color: #e2e2e2 #bfbfbf #bfbfbf #e2e2e2;
    text-align: center;
    font-weight: bold;
    color: #d94800;
}

これをブラウザで見ると、

 立体的になりました。

 こんな風に簡単に、ｃｓｓを使って単調なテーブルを美しくみせることができます。

 少しでもユーザーにとって心地の良い見た目に近づけられればいいかなーと思います。

 以上、【テーブルをcssで立体的にアレンジする】でした。