罫線とセルの背景色をデザイン

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


テーブルをデザインする　←　｜　→　サンプルダウンロード


罫線をセル色をデザインして仕上げます。

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

・罫線を繋げる。
・罫線に色を付ける。
・セルに色を付ける。

●　スタイルシートに赤部分を追加します。

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

table　　{　font-size: 0.75em;		文字サイズを0.75倍
margin-bottom: 20px;		テーブルの下余白
width: 550px;		テーブルの横サイズ
border: none;		テーブル周りの罫線を非表示
border-collapse: collapse;		テーブル内の罫線を繋げて表示
}
th,td　　{　padding: 8px　}		th、td境界と中身との余白
th 　　　{　width: 150px;		見出し部分の横サイズ
text-align: left;		文字を左寄せ
vertical-align: top;		文字を上寄せ
background-color: #fff0f0;		背景色を指定
border: solid 1px #aa8844;		罫線を実線　幅１　茶色にする
}
td 　　　{　background-color: #e6ffe6;		背景色を指定
border: solid 1px #aa8844;}		罫線を実線　幅１　茶色にする

---

・罫線を繋げる。
　方法は色々ありますが、border-collapseで指定しました。

　border-collapse: collapse；　繋げて表示
　border-collapse: separate;　分離して表示

　他にも、セル境界を含めてセル全体に色をつけ、境界内を白色にして境界だけ色を残す
　方法などがあります。

---

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

トップページや紹介ページは既に出来あがっていますので全てが完成しました。

ページ内容やページ間遷移など確認して見て下さい。