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

表の罫線をワープロ並みに装飾したい

スタイルシートを活用すれば、表の罫線を様々に装飾することができます。 今回は、ステップごとにその装飾方法をご紹介致します。必要な装飾方法を1つずつ解説していますので、今まで表の装飾をあまり試したことのない方々でも、すぐに実践できるようになると思います。 ぜひ試してみて下さい。

以下のような表を作ることを例にします。

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

上記のような表の装飾は、とてもHTMLだけでは実現できません。 罫線だけでも、実線・破線・二重線が使われていますし、太い線や細い線もあります。 そのほか、セル内の余白、文字の配置、文字の間隔、セルの背景色などの装飾も施してあります。

このような装飾が、スタイルシートで楽に作れます。スタイルシートですから、HTMLを一切変更することなく、以下のようにデザインを変更することも楽々です。

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

それでは、装飾方法を順番に見ていきましょう。

それでは、準備STEP.1へ！ >>

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

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