ホームページ作成

【ホームページ作成】スタイルシートでワープロ並みに表を装飾２

テーブル（表）の作成・装飾 (HTML,CSS)

更新日：2006年10月08日

スタイルシートでワープロ並みに表を装飾２

西村文宏

ワープロで表を作成すると、様々な罫線で表を装飾できますね。そのような表をウェブ上でも作ってみたいと思いませんか？スタイルシートとHTMLで、複雑な表の装飾も自由自在に作れるようになりましょう。(CSS実践編)

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

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

table.noveltable th,

table.noveltable td {

    border-style: solid dashed;

   border-color: #cc0000;

   border-width: 1px;

 }

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

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

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

作品名	作家名	出版社	価格
合計			1,710円
涼宮ハルヒの憂鬱	谷川流	角川書店	540円
ゼロの使い魔	ヤマグチノボル	メディアファクトリー	580円
灼眼のシャナ	高橋弥七郎	メディアワークス	590円

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

作品名	作家名	出版社	価格
合計			1,710円
涼宮ハルヒの憂鬱	谷川流	角川書店	540円
ゼロの使い魔	ヤマグチノボル	メディアファクトリー	580円
灼眼のシャナ	高橋弥七郎	メディアワークス	590円

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

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

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

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

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

人気ホームページ作成ランキング