イベントページのテーブルデザイン

売れるホームページの作り方 ⇒ 速攻HTML ⇒ テーブルをデザインする


速攻HTML

イベントページevent.htmlのテーブルをデザインする

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



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


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


・文字の大きさを小さくする。
・文字と罫線との間に余白を作る。
・見出し幅を横に広げて、左寄せ、上寄せする。
・テーブル全体と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で個別に指定しても構いません。




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


  イベントページ