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

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

上記の表では、「最上部の行」の下だけ、二重線で描かれていると思います。
ちなみに、表の外枠は太い線（2pxの線）になっています。

このような装飾は、下線を変更したい行（tr要素）に適当なclass属性を付加しておく……という方法でも実現可能です。
……が、ここでは以下のソースのように、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要素は使っていません。

これらの要素を加えておくと、表の各行が「ヘッダ」なのか「本体」なのか「フッタ」なのか…を示すことができます。すると、「ヘッダだけを対象に装飾する」…といったことも楽にできます。「ヘッダ部分にだけ色を付けたい」とか「ヘッダ部分の下にだけ異なる線を引きたい」とか。

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

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

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

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

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

もうちょっと見やすくするためには、セルの内側に余白を設けたりした方がいいと思いますが、ソースが長くなるのでここでは省略しました～。