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

実践STEP.3 縦線と横線で線種を変える

次に、縦線と横線で線種を変えてみましょう。
スタイルシートでは、上下左右の枠線を個別に指定することもできます。
いくつかの記述方法がありますが、たとえば次のように記述してみましょう。

STEP.2までは、「borderプロパティ」で線に関するすべての指定を記述していました。
ここでは、 border-styleプロパティで線種、border-colorプロパティで線の色、border-widthプロパティで線の太さを個別に指定しています。
この記述方法だと、上下左右の装飾を別々に指定することができます。

上記では、border-styleプロパティの値に「 solid dashed 」というように、2つの値を指定しています。
値を2つ指定すると、「上下の装飾 → 左右の装飾」という指定だと解釈されます。
ですから、上下の線が実線(＝solid)で、左右の線が破線(＝dashed)という表示になります。

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

STEP.1で記述した外枠を加えると、次のようになります。

外側にある枠線（table要素に対するborderプロパティ）の方が優先されるので、外枠は破線にはなりません。

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

さて、サンプルでは「ヘッダ部分（上部）」と「フッタ部分（下部）」に異なる装飾を施していました。 今回の記事の本題でもありますが、そのような装飾の実現方法を見てみましょう。

表のヘッダ(上部)だけ装飾を変更する方法へ >>

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

• [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] フォントを指定する
• [まとめ] 記述したスタイルシートのまとめ