tableをスタイルシートでレイアウトする

何かと便利に使うことのできる「table」タグですが、このtableタグについてもスタイルシートで設定をすることができます。

• テーブルの境界線の表示方法を指定する
• テーブルのセル間隔を指定する
• 実際にテーブルをスタイルシート(CSS)で飾ってみる

tableをスタイルシートで飾ってみる

さて、次はtableタグで作られたテーブルをスタイルシートを使って飾っていってみましょう。
まずは基本となるテーブルをＨＴＭLで記述します。下のようなかんじですね。

『基本となるテーブル』

これをこのまま表示させると、下のような表になります。なんだか、味気ない感じの表ですね。

これをスタイルシートの設定だけで、下の表のようにしてみます。

どうですか?ずいぶんと雰囲気が変わったと思いませんか？
この表のようにするには、以下のような感じで各タグにスタイルシートを設定していきます。

これでＯＫです。このCSSを反映させる為にtableタグに「.sample1」というクラス名を付けてあげるのを忘れないでくださいね。
スタイルシートの設定だけでここまで表のデザインを変えることが出来ます。あとは、センス次第で配色を変えていったり枠線のスタイルを変更したりすればオリジナルの表を作ることが出来ます。
スタイルシートって便利でしょ！？

上のCSSについての補足説明

テーブルの格子線を装飾する時は、「table」「th」「td」の3種類のタグ全てに枠線の設定をしなければいけません。
ですが、全部のタグに上下左右に枠線を設定すると線がダブってしまい見た目も良くありません。
そこで、行うのが次の方法です。

�@「table」タグの上下左右に枠線を設定する
�A「th」タグ・「td」タグは右と下の枠線のみ設定する。

これでＯＫです。まず、�@でtableの外枠だけに枠線が入ります。そして、�Aで枠線がダブらない位置、つまり枠線がそのタグだけに入る右と下の部分にだけ枠線の設定をしてあげます。
こうやって枠線の指定をすれば、枠線がダブることなくキレイに表示することができます。