外枠だけが太い罫線の表(テーブル)にすると、簡単に見栄えが良い表になる

スタイルシートを使って表(テーブル)を綺麗に見せる装飾方法はいろいろあります。単純に縦横に罫線を引いただけでは、あまり見た目が良くありません。でも、表の内側の枠線を細くして、表の一番外側の枠線だけを太くするという簡単な装飾だけでも、ずいぶんと見栄えは良くなります。

表の「外側の罫線」と「内側の罫線」とで装飾を分けるのは簡単

スタイルシートでは「表の一番外側の線」と「内側の線」を別々に装飾するのは簡単です。1つの表の中で「外側の罫線」を作っている要素と「内側の罫線」を作っている要素は、次のような関係になっています。

つまり、表の罫線といっても、実はその他の要素と同じように「枠線」でできています。
上記の1と2で示したように、表の「外側の罫線」と「内側の罫線」では、それらを作っている要素が異なります。要素が異なるのですから、スタイルシートを使って別々に装飾することも簡単です。

1. 外側の罫線は、表そのもの(table要素)の枠線

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

table {
   border: 3px green solid;  /* 太さ3pxで緑色の実線 */
}

枠線を引くためのCSSはborderプロパティですから、上記のようにtable要素に対してborderプロパティを指定して任意の枠線を引けば良いのです。すると、それが「表の外側の罫線」になります。

2. 内側の罫線は、セル(th要素やtd要素)の枠線

一方、セル(＝表のマス目)1つ1つを構成する要素は「th要素」や「td要素」です。(th要素は見出しセルを作る際に使い、td要素はそれ以外のセルを作る際に使います。全部のセルをtd要素で作っても問題はありません。)
ですから、th要素やtd要素に対して枠線を引けば「表の内側の罫線」を引いたことになります。(※同時に外側の罫線を引いたことにもなります。なぜなら、最も外側に位置しているセルの枠線も引かれるからです。)

th,td {
   border: 1px green solid;  /* 太さ1pxで緑色の実線 */
}

上記では、th要素とtd要素を同時に装飾しています。これらが「表の内側の罫線」になります。もちろん、これらを別々に装飾することもできます。(見出しセルにだけ背景色を付加する、といった装飾を加えたい場合には分ければ良いでしょう。)

※thead要素やtr要素などにも枠線を引いた場合はそれらも「内側の罫線」になりますが、ここでは話を簡単にするためにそれらの要素は装飾しないものとして説明します。

外側の罫線だけが太く、内側の罫線は細い表をスタイルシートで作るCSSの書き方

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

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

外側(table要素)には3ピクセルの太い線を引き(3行目)、内側(tr・td要素)には1ピクセルの細い線を引いています(7行目)。

※2行目に記述しているborder-collapseプロパティは「隣り合うセルの枠線を重ねる」プロパティです。表を装飾する際には必須と言っても過言ではありません。詳しくは、記事「スタイルシートで表に枠線を引くと線が二重に見えるのを避ける方法」をご参照下さい。

例えば、表を作るHTMLソースとして以下のように記述した場合、

<table>
   <tr><td>セル11</td><td>セル12</td><td>セル13</td></tr>
   <tr><td>セル21</td><td>セル22</td><td>セル23</td></tr>
   <tr><td>セル31</td><td>セル32</td><td>セル33</td></tr>
</table>

これを先程をスタイルシートを使って表を表示させると、以下のような感じで表示されます。

これで、外側だけが太い線の表ができました。
とても簡単ですね。

外側の罫線だけを二重線にした表をスタイルシートで作るCSSの書き方

ちなみに、table要素の枠線の種類を二重線 double にすれば、外枠だけが二重線の表にすることもできます。
例えば、以下のような感じでCSSソースを記述してみます。

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

二重線を引く場合は、太さを最低「3px」にしないといけない点に注意して下さい。(「線2本分」＋「線と線の間隔」＝「2px」＋「1px」＝3px です。)
上記のCSSソースで、先程のHTMLソースで作った表を表示すると、以下のように見えます。

表の外側だけが二重線になっていることがわかります。
このような感じで、表の「外側の罫線」と「内側の罫線」を別々に装飾することはとても簡単です。

(更新日：2017年07月02日)