【ホームページ作成】スタイルシートで表を見やすく装飾！

※この記事は、「スタイルシートでワープロ並みに表を装飾！」から始まる解説記事の第3弾です。 以下のような表を作ることを例にして、HTMLやスタイルシートの記述方法をステップごとに説明しています。

第3弾内のページは以下の通りです。

• [実践STEP.6-1] 表の文字サイズを指定する
• [実践STEP.6-2] セルの余白を指定する
• [実践STEP.6-3] 文字を左右に寄せる
• [実践STEP.6-4] 文字と文字の間隔を広くする
• [実践STEP.6-5] フォントを指定する
• [まとめ] 記述したスタイルシートのまとめ

まだ、前の段階を読まれていない場合は、先にそちらからどうぞ。
目次は下記の通りです。

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

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