mamohoのＨＰ作成講座

テーブルのいろいろな使い方　5

●　テーブルのいろいろな使い方　5

今回は　テーブルを使って　リンク集を作ってみましたこのテーブル　どうなっているかわかりますか？

PC本体
■ Apple
■ ＦＵＪＩＴＳＵ
■ ＩＢＭ
■ ＳＯＮＹ
■ ＤＥＬＬ
■ ＳＯＴＥＣ
■ ＨＰ
■ Panasonic
■ TOSHIBA
■ ＳＨＡＲＰ
■ ＩＩｙａｍａ
■ ＮＥＣ
周辺機器
■ I-O DATA
■ BUFFALO
■ Ｌｏｇｉｔｅｃ
■ ＡＤＴＥＣ
■ Intel
■ EPSON

■ CASIO
■ Canon
■ サンワサプライ
■ 沖データ
■ サン電子
■ ELECOM
ソフトウエア
■ Microsoft
■ Adobe
■ JUSTSYSTEM
■ ソースネクスト
■ Macromedia
■ シマンテック
■ アジェンダ
■ Trend micro
■ FileMaker
■ Media Vision
■ アイフォー
■ ジョルダン
■ モリサワ

よく見かける　ＰＣ関連リンクです
このテーブルは　単に　縦20行　横2列のテーブルではありません
実際は　縦1行　横2列のテーブルに　セルの余白　cellpadding="10"を
指定してあります　そして左右ののセルに　縦20行　横1列のテーブルを
それぞれに入れてあるわけです
右側の列と左側の列が少し離れているように見えるのは
そのためです
あと　左右のテーブルには　それぞれ罫線の属性を
cellpadding="0"　に指定してあります

リンクを種類別に分けるため　項目の部分のセルの背景色を#003366　に　文字色を　#ｆｆｆｆｆｆ　に指定しています

文字の頭にある　■　は　フォントの色で　#ｆｆ9966　を指定しています
少しの工夫でぐんと見栄えがかわります
是非　挑戦してみてください

あと　これは　見る勉強も兼ねています
やはり　企業のＨＰは綺麗にできていますので
いろいろと見て回って楽しんでくださいね♪

ジャンル別一覧