テーブルをデザインする

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


アフィリエイトで稼ぐのは厳しい ⇒ 速習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で個別に指定しても構いません。



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

  個別ページ




関連記事


もしも「今からアフィリエイトをやろう、稼ぐ。」 と考えているのでしたら、悪い事言いません。
本格アフィリエイトを断念して趣味+αにするか、本格的に勉強をするかのどちらかにした方が良いです。
アフィリエイトに必要なもの、事。それほど多くは有りません。
インターネットに接続されたパソコン、ASPに登録申請、ドメイン取得、レンタルサーバ、ブログ登録&投稿、サイト作成&サーバアップ、検索エンジンインデックス、地道なSEO。
ASPにアフィリエイト登録して初めてアフィリエイトが可能になります。
各ASPともアフィリエイト登録申請時にサイトかブログを提示して審査を受ける必要があります。
アフィリエイトサイトの同一ページに異なるASPの広告を並列同時掲載することもできます。
何とかサイトを作成してレンタルサーバにアップしても、そのままだと大海の孤島で誰も存在を知りません。
すぐ検索エンジンに登録して下さい。キャッシュとかインデックスとか言ってます。
携帯やスマートフォンなど、その時の最先端向きアフィリ教材もありますが、スタリも早くなります。
時代やツールが変っても、商材選定〜サイト構築などの取組み方や思考は変りません。
その辺りを詳しく解説しているものを選定しました。