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

この記事は1年以上前の記事のため、内容が古い可能性があります。

他のところに影響を与えるといけないので、<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を設定しましょう。