最も普通の表です。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; }