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

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

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

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

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

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

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

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

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

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