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

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

テーブル(表)のヘッダ行の直下だけを二重線にするCSS [テーブル,]

ウェブ上に掲載するテーブル(表)を装飾する際、ヘッダ部分(見出し行の部分)の下だけを二重線にしたいと思うことがあります。ワープロでの装飾などでもよく使われるのではないでしょうか。表の中で「ヘッダ部分」と「中身部分」の境目に引かれる線だけを、二重線や太い線などに変えて区切りを目立たせるという装飾は。

例えば、以下のような感じです。

No. 作品名 作者名 状態
1 涼宮ハルヒの憂鬱 谷川 流 読了
2 GOSICK 桜庭一樹 読了
3 お留守バンシー 小河正岳 読了

上記の表では「最上部の行」の下だけ、二重線で描かれていることが分かるでしょう。
ちなみに、表の外枠は太い線(2pxの線)になっています。

表のヘッダ部分だけを対象に特別なスタイルを付加したい場合は、thead要素を使っておくと分かりやすい

このような装飾は、下線を変更したい行(=tr要素)に適当なclass名を付加しておく方法でも実現可能ですが、あまりスマートではない気がします。
ここでは以下のHTMLソースのように、table要素内に「ヘッダ部分」と「本体部分」を示す、thead要素とtbody要素を書いています。

<table class="bookshelf">
<thead>
   <tr><th>No.</th><th>作品名</th><th>作者名</th><th>状態</th></tr>
</thead>
<tbody>
   <tr><th>1</th><td>涼宮ハルヒの憂鬱</td><td>谷川 流</td><td>読了</td></tr>
   <tr><th>2</th><td>GOSICK</td><td>桜庭一樹</td><td>読了</td></tr>
   <tr><th>3</th><td>お留守バンシー</td><td>小河正岳</td><td>読了</td></tr>
</tbody>
</table>

HTMLで表を作る際は、まず「表全体」をtable要素で作り、次に「1行」をtr要素で作り、最後に「1つのセル(マス目)」をth要素やtd要素で作ります。(※th要素は見出し用セル、td要素は普通のセル)
しかし、それ以外に、上記のソースのように「thead要素」や「tbody要素」などを書くこともできます。これらの意味は以下の通りです。

  • thead要素 : ヘッダ部分(見出し部分)
  • tbody要素 : ボディ部分(本体部分)
  • tfoot要素 : フッタ部分(末尾部分)

※先ほどのテーブルには「フッタ部分」はないので、tfoot要素は使っていません。

これらの要素を加えておくと、表の各行が「ヘッダ」なのか「本体」なのか「フッタ」なのか、意味(役割)を明示することができます。すると、「ヘッダだけを対象に装飾する」といった装飾も楽にできます。「ヘッダ部分にだけ色を付けたい」とか「ヘッダ部分の下にだけ異なる線を引きたい」という場合には、thead要素に対してスタイルを加えれば良いわけですから。

表(テーブル)のヘッダ部分を構成する「thead要素」に対してスタイルを適用する

で、今回の本題「表(テーブル)のヘッダ部分の下にだけ二重線を引く」という装飾は、以下のようにCSSソースを記述することで実現できます。

table.bookshelf {
   border-collapse: collapse;
   border: 2px solid green; /* 外枠を太く */
}
table.bookshelf td,
table.bookshelf th {
   border: 1px solid green;  /* 内側の線 */
   padding: 0.25em;  /* セル内の余白 */
}
table.bookshelf thead th {
   border-bottom: 3px double green; /* ヘッダ行の下線 */
}

上記のスタイルシートソースの最後の部分(10~12行目)で、「thead要素に含まれるth要素」のみを対象にした装飾を記述しています。「thead要素に含まれるth要素」とはつまり、「ヘッダ部分に含まれるセル」のことです。

そこでborder-bottomプロパティに値「3px double green」と指定しているので、緑色の二重線が引かれます。線の太さは1ピクセルです。(※CSSで「3px」と指定しているのは、「太さが1pxの線が2本と、線と線の間隔が1px」なので合計「3px」だからです。)

そのほか、テーブルの外枠だけを太くしていますが、その辺の話は、「外枠だけ太い罫線の表を作る」をどうぞ。(^_^;)

というわけで、このように「表のヘッダ部分の直下にだけ特別な線を引きたい」という場合にも、表を構成するHTMLソース内に元々「ヘッダ部分」の範囲を示すthead要素を使っていれば楽々、という話でした。thead要素は「ここがヘッダ部分ですよ」という意味を付加できるので、たとえ特別なスタイルを適用する予定がなくても、とりあえずヘッダ部分に対して書いておくのが良いと思います。

()

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

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

著者紹介


にしし(西村文宏)

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

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

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

著書一覧と詳細

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

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

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