テーブル罫線とセル背景色をデザイン

売れるホームページの作り方 ⇒ 速攻HTML ⇒ 罫線とセル背景色をデザイン


速攻HTML

イベントページevent.htmlのテーブル罫線とセル背景色をデザイン

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



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


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


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


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


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


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;    罫線を実線 幅1 茶色にする
}      
   
td    { background-color: #e6ffe6;    背景色を指定
      border: solid 1px #aa8844;}    罫線を実線 幅1 茶色にする





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


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


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





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


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


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


  イベントページ