表の枠のいろいろ

普通の表

最も普通の表です。tdタグにボーダーを設定します。tdとtdの間には隙間があります。

td {
  border:solid 1px #cccccc;
}

ボーダーで線を引く代わりに背景色を設定しています。tdとtdの間の隙間が線の役割をします。背景が暗い色のときは文字の色を明るくすると見やすくなります。

td {
  background-color:#000066;
  color:#ffff00;
}

文字と線、文字と背景色の間が狭いので、paddingを設定しました。

td {
  background-color:#000066;
  color:#ffff00;
  padding:4px;
}

こちらがCSSを使わない時代の線の引き方をCSSでまねたものです。境界が水田のあぜ道のように見えます。

table {
  border:outset 1px;
}
td {
  border:inset 1px;
}

tableの背景色とtdの背景色を両方指定すると、tableの背景色が線に見えるようになります。(tableの背景色だけを指定するとtdの部分も同じ色になります)

table {
  background-color:#0000ff;
}
td {
  background-color:#ccffff;
  padding:4px;
}