ダリの雑記：WEBプログラム版

他のところに影響を与えるといけないので、<div>でくくられているところだけにスタイルを設定します。（デザインテンプレートによって「main」であるとは限りません。）

.main table{
border-collapse: collapse;
border:none;
}

.main table th,
.main table td{
border:solid 1px #333333;
padding:5px;
}.main table thead th{
background-color:#008FC8;
color:#FFFFFF;
}

.main table tbody th{
background-color:#E4EEFF
}

見出しセル（th）の背景色は、適当にこのブログ内に有る色をフォトショップのスポイトで抽出して使用。
列の見出しと行の見出しの色を変えるために、「theadのth」と「tbodyのth」の背景色をそれぞれに設定します。（theadの方は背景色が暗いので文字を白くします。）

で、テーブルの隙間を生める方法
通常、tableのスタイルを設定せずにth、tdのスタイルだけを設定し、テーブルを作ると、セル間に変な隙間が出来ます。

↑こんな感じ

それを埋めるのが
border-collapse: collapse;
です。
border-collapseは、隣接するボーダーを重ねる（collapse）か、間隔をあける（separate）かを設定できます。
特に離す必要が無い場合は、collapseを設定しましょう。