表の罫線をワープロ並みに装飾したい
スタイルシートを活用すれば、表の罫線を様々に装飾することができます。 今回は、ステップごとにその装飾方法をご紹介致します。必要な装飾方法を1つずつ解説していますので、今まで表の装飾をあまり試したことのない方々でも、すぐに実践できるようになると思います。 ぜひ試してみて下さい。
以下のような表を作ることを例にします。
| 作品名 | 作家名 | 出版社 | 価格 |
|---|---|---|---|
| 合計 | 1,710円 | ||
| 涼宮ハルヒの憂鬱 | 谷川 流 | 角川書店 | 540円 |
| ゼロの使い魔 | ヤマグチノボル | メディアファクトリー | 580円 |
| 灼眼のシャナ | 高橋弥七郎 | メディアワークス | 590円 |
上記のような表の装飾は、とてもHTMLだけでは実現できません。 罫線だけでも、実線・破線・二重線が使われていますし、太い線や細い線もあります。 そのほか、セル内の余白、文字の配置、文字の間隔、セルの背景色などの装飾も施してあります。
このような装飾が、スタイルシートで楽に作れます。スタイルシートですから、HTMLを一切変更することなく、以下のようにデザインを変更することも楽々です。
| 作品名 | 作家名 | 出版社 | 価格 |
|---|---|---|---|
| 合計 | 1,710円 | ||
| 涼宮ハルヒの憂鬱 | 谷川 流 | 角川書店 | 540円 |
| ゼロの使い魔 | ヤマグチノボル | メディアファクトリー | 580円 |
| 灼眼のシャナ | 高橋弥七郎 | メディアワークス | 590円 |
それでは、装飾方法を順番に見ていきましょう。
表をワープロ並みに装飾する手順 (目次)
- [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] フォントを指定する
- [まとめ] 記述したスタイルシートのまとめ
