mamohoのＨＰ作成講座

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

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

テーブルは　単に表にしてテキストを配置したりするだけでなく
HP製作のレイアウトとして　大きく役立っています今回から数回にわたって　役に立つレイアウト例を紹介していこうと思います
今までの復習も兼ねてますので　参考にしてみてください

例題１　このテーブルはどうやって出来ているでしょうか

◆　テーブルを使ったレイアウト例

2003.11.30

このテーブルはどのように出来ているかおわかりになりますか？
タネを明かすと　な～んだというほど簡単なものなんですよ
横２行　縦２列のテーブルを作り　下の行は連結させています
上の行の二つのセルには背景色　（#333300）を指定して
右側のセルは通常で　左側のセルは右寄せで指定してあります
簡単ですが意外と使える技ですね

で　種明かしです

◆　テーブルを使ったレイアウト例

2003.11.30

本当はこうなってます

ちなみに
　　colspan="2"　で　下の行を連結しています
　　border（外枠）は　0
　　cellspacing（表の罫線）は　0
　　cellpadding（セルの余白）は　5　で指定してあります

=====注意=====

この表を作る際の注意事項ですが
まず　
上の行の背景色は　行で指定してもネットスケープしか見えない
ということですので　それぞれのセルに背景色を指定します

もうひとつ
cellspacing　を　0　に　指定する必要があります
これを指定していないと　テーブルの罫線の幅が指定されて
表示してしまうからです
border　が　0　であっても　テーブル内の罫線は消えませんので
注意が必要です

例１

border="1"　の場合

cellspacingは指定なし

border="1"　で　cellspacing　は何も指定していない状態です

例２

border="0"　の場合

cellspacingは指定なし

border="0"　で　cellspacing　は何も指定していない状態です

例３

border="0"　の場合

cellspacing="0"

border="0"　で　cellspacing="0"