ホームページ作成

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

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

更新日：2006年10月07日

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

西村文宏

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

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

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

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

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

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

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

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

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

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

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

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！