テーブルをデザインする

　　この文字をクリックするとサンプルダウンロード出来ます。


テーブルを作成する　←　｜　→　罫線とセル背景色をデザイン


全ページで作成したテーブルは未だ見やすくは有りません。少しデザインします。

デザインする内容は次の通りです。

・文字の大きさを小さくする。
・文字と罫線との間に余白を作る。
・見出し幅を横に広げて、左寄せ、上寄せする。
・テーブル全体とcopyrightの間に余白を作る。
・テーブルを取り囲んでいる罫線を消す。

●　全てスタイルシートで指定します。

スタイルシートに以下を追加します。

table　　{　font-size: 0.75em;		文字サイズを0.75倍
margin-bottom: 20px;		テーブルの下余白
width: 550px;		テーブルの横サイズ
border: none;		テーブル周りの罫線を非表示
}
th,td　　{　padding: 8px　}		th、td境界と中身との余白
th 　　　{　width: 150px;		見出し部分の横サイズ
text-align: left;		文字を左寄せ
vertical-align: top;		文字を上寄せ
}

---

・デフォルトではテーブル全体の外側にも、セルの境界部にも罫線が引かれます。
tableセレクタで　border: none;　を指定してテーブル外側の罫線を消します。

・セル毎の罫線は何も指定していないので残ります。

・vertical-align　で上下方向の位置を調整します。
　vertical-align:top;　　上詰め
　vertical-align:middle;　　中央揃え
　vertical-align:bottom;　　下詰め

・テーブル全体の横サイズを550、見出しを150にしました。tdセルは自動で400になります。
　テーブルサイズは指定せず、th、tdで個別に指定しても構いません。

---

サンプルを表示した結果です。