にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

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

スタイルシートを使って表(テーブル)を綺麗に見せる装飾方法はいろいろあります。手軽に見栄えを良くする方法として「罫線の太さを変化させる」という装飾がお勧めです。表の内側の枠線を細くして、表の一番外側の枠線だけを太くすると、ずいぶん見栄えが良くなります。

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

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

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

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

▼場所 ▼それを作っているのは
1 外側の罫線 「table要素」の枠線
2 内側の罫線 「th要素・td要素」の枠線

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

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

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

CSSソース

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

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

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

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

CSSソース

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

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

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

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

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

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ソースとして以下のように記述した場合、

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>

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

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

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

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

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

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

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

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

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


()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---