スタイルシートでワープロ並みに表を装飾２(5ページ目)

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

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

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

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

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

• 下側の線を二重線にする
• 背景色を淡い赤色にする

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

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

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

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

実践STEP.5 表のフッタ(下部)だけ装飾を変更する

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

表のフッタ(下部)だけ装飾を変更する方法へ >>

表をワープロ並みに装飾する手順 (目次)

• [HOME] はじめに：表の罫線をワープロ並みに装飾したい
• [準備STEP.1] HTMLで表を書く
• [準備STEP.2] サンプル表のHTML上のポイントを確認

• [実践STEP.1] 表の外枠を描く
• [実践STEP.2] 表の内側の線を描く
• [実践STEP.3] 縦線と横線で線種を変える
• [実践STEP.4] 表のヘッダ(上部)だけ装飾を変更する
• [実践STEP.5] 表のフッタ(下部)だけ装飾を変更する

• [実践STEP.6-1] 表の文字サイズを指定する
• [実践STEP.6-2] セルの余白を指定する
• [実践STEP.6-3] 文字を左右に寄せる
• [実践STEP.6-4] 文字と文字の間隔を広くする
• [実践STEP.6-5] フォントを指定する
• [まとめ] 記述したスタイルシートのまとめ