5/6 スタイルシートでワープロ並みに表を装飾２ [ホームページ作成] All About

実践STEP.4 表のヘッダ(上部)だけ装飾を変更する

準備STEPで、表のヘッダやフッタの位置を明示するために、thead・tbody・tfoot という3つの要素を記述しました。
これを活用すると、ヘッダだけを装飾することができます。

表のヘッダを構成するセルは、thead要素に含まれている（＝<thead>～</thead>内に含まれる）はずです。
ですから、thead要素内のセルにだけ適用されるようなスタイルの記述方法を使えば、ヘッダにだけ有効な装飾を作ることができます。

table.noveltable thead th {

    border-bottom: 3px double #cc0000;

   background-color: #ffdddd;

 }

上記のように「table.noveltable」と「th」の間に「thead」を記述すると、thead要素に含まれるth要素に対してのみ適用できるスタイルを作ることができます。

ヘッダでは、次の2点の装飾を施します。

下側の線（枠線）の装飾は、border-bottomプロパティで行えます。ここでは、太さ3ピクセル(＝3px)、線種は二重線(＝double)、色は濃い赤(＝#cc0000)を指定しています。二重線を引きたい場合は、線の太さを最低3ピクセル以上にする必要があります。

また、背景色は、background-colorプロパティで指定できます。ここでは、#ffdddd と指定しているので、淡い赤色になります。

このスタイルを適用させると、次のようになります。

表のヘッダ部分だけ、装飾が変化したことがお分かり頂けるでしょう。

同様にして、フッタ部分も装飾を分けてみましょう。