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

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

上記の表では「最上部の行」の下だけ、二重線で描かれていることが分かるでしょう。
ちなみに、表の外枠は太い線（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要素は「ここがヘッダ部分ですよ」という意味を付加できるので、たとえ特別なスタイルを適用する予定がなくても、とりあえずヘッダ部分に対して書いておくのが良いと思います。

(更新日：2016年02月10日)