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

このサイトについて サイトマップ


アフィリエイトで稼ぐのは厳しい ⇒ 速習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; 分離して表示

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




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

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

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

  個別ページ