"CSS Tips Factory" : Presented by Nishishi via WordPress.

外枠だけ太い罫線の表を作る [, テーブル]

ワープロなどで見栄えの良い表を作ろうと思うと、罫線の太さを変化させるのが最も手軽な装飾方法でしょう。内側の枠線を細くして外側の枠線を太くするだけでも、ずいぶん見栄えが変わります。

スタイルシートでは、表全体の外側の線と内側の線を別々に装飾するのは非常に簡単です。外側の罫線と内側の罫線は、次のような関係になっています。

  • 「外側の罫線」=「table要素の枠線」
  • 「内側の罫線」=「th要素・td要素の枠線」

セル1つ1つを構成するのは、th要素やtd要素です。(th要素は見出しセルに使い、td要素はそれ以外の普通のセルに使います。)ですから、これらに枠線を引けば、「表の内側の罫線」を引いたことになります。(※同時に外側の罫線を引いたことにもなるのですが。なぜなら、最も外側に位置しているセルの枠線も引かれるからです。)

表全体を構成するのは、table要素です。ですから、table要素に枠線を引けば、「表の外側の罫線だけ」を引いたことになります。

つまり、th要素やtd要素の枠線を細いサイズで引き、table要素の枠線を太いサイズで引けば、「外枠だけが太い表」を作れることになります。
これは非常に簡単で、例えば以下のようなスタイルシートを書くだけで済みます。

th,td {
   border: 1px solid green;
}
table {
   border-collapse: collapse;
   border: 3px solid green;
}

内側には1ピクセルの線を引き、外側だけ3ピクセルの線を引いています。
border-collapseプロパティは、「隣り合うセルの枠線を重ねる」プロパティです。表を装飾する際には必須です。詳しくは、「CSSで表を装飾する基本」を参照して下さい。

上記のスタイルシートを使って表を表示させると、以下のような感じになります。

セル11 セル12 セル13
セル21 セル22 セル23
セル31 セル32 セル33

これで、外側だけが太い線の表ができたはずです。
table要素の枠線の種類を二重線(double)にすれば、「外枠だけが二重線の表」にすることもできます。
例えば、以下のような感じで。

table {
   border-collapse: collapse;
   border: 3px double green;
}

二重線を引く場合は、太さを最低「3px」にしないといけない点に注意して下さい。(線2本分+線と線の間隔=2px+1px=3px)
これで表を表示すると、以下のように見えます。

セル11 セル12 セル13
セル21 セル22 セル23
セル31 セル32 セル33

こんな感じで、手軽に表の罫線を装飾できます。

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。