テーブルに立体感を演出して見栄えをよくしよう

テーブル要素にborderプロパティを使用すれば、ボックスやセルの上下左右にボーダースタイルを個別に指定することが可能です。
これを利用して表のセルがエンボス状になるように立体感を演出しています。

ここではボーダーの明度や濃淡を変えることで、立体的に見えるようにしています。指定したセルの背景色と同系統の色相で上辺と左辺を明るく、下辺と右辺を暗くしてあります。また、隣り合う辺が重ならないように「border-collapase:separate」を指定しています。

色の調整方法ですが、調整段階でボーダーを太くしてやると、色がきちんと確認することができます。
また、立体的に見せるには色の微調整が必要なので、最初にある程度、参考にする色を決めておいた方がスムーズにできると思います。

デザインサンプル

ＰＣスペック比較表
CPUクロック周波数２次キャッシュチップセット標準搭載メモリ
CeleronD 3352.8GHz256KBSiS651 Chipset512MB
CeleronD 3463.06GHz256KBATI社製
RedeonXpress200 /
IXP450		512MB

サンプルCSSコード

table {
　　border-collapse: separate; 　　border: 1px solid #7c6638;
　　border-spacing: 0px;
}
.bc4 th,.bc4 td {
　　margin: 0px; padding: 3px 5px;
　　border-width: 2px; border-style: solid;
}
.bc4 th {
　　color: #470505;
　　background-color: #c99a7f;
　　border-color: #fff #af5d2e #8d3000 #d0bbb2;
}
.bc4 td {
　　color: #2c1603;
　　background-color: #e4dac2;
　　border-color: #fff #ac9a70 #7c6638 #fffaf1;
}

Stylesheet Designguide MENU

Copyright (C) スタイルシートデザインガイド All Rights Reserved.