モックン☆彡の部屋

モックン☆彡の部屋

テーブルで整頓3(高)

テーブルで整頓3(高)


今回も前回に引き続
形よく整える事
見栄えを良くする事
を説明します。

前回では色々な文字を配列しましたが、

よく見ると文字の直ぐそばにライン(枠)があったりと少し窮屈ですね。

これを避ける為には『 cellpadding="" 』や『 cellspacing="" 』を使います。

"" 』の中には両方とも数値が入り、数が大きいほどライン(枠)の間隔があります。

具体的にどの様に使うかと言うと、 < TABLE > タグの最初に宣言して、

< TABLE cellpadding=" 5 " cellspacing=" 5 " > のように書きます。

では実際にいくつか例をあげて見ましょう。


《例題1》
HTML 講座
cellpadding="1"
テーブル 整頓
HTML 講座
cellpadding="5"
テーブル 整頓
HTML 講座
cellpadding="10"
テーブル 整頓
HTML 講座
cellspacing="1"
テーブル 整頓
HTML 講座
cellspacing="5"
テーブル 整頓
HTML 講座
cellspacing="10"
テーブル 整頓
HTML 講座
cellpadding="1"
cellspacing="1"
テーブル 整頓
HTML 講座
cellpadding="5"
cellspacing="5"
テーブル 整頓
HTML 講座
cellpadding="10"
cellspacing="10"
テーブル 整頓

注意としては、 《例題1》 を見て分かるように『 cellspacing="" 』の数値を上げると、

< CAPTION > タグで書いた文字(表題)も離れていきます。

cellpadding="" 』の数値を上げても多少変わってますね。

ちなみに、 《例題1》 は『 border="1" 』で書いています。

border="" 』については テーブルで整頓1(高) を参照してください。




次は テーブル の背景に をつけてみましょう!!

をつけるには『 bgcolor="好きな色" 』を使います。

例えば、背景を赤にしたい場合は『 bgcolor="red" 』と書きます。

色の指定方法は、 文字に色をつける(低) 文字に色をつける(高)

または 基本的な色について 以下のページを参照してください。


《例題2》
HTML 講座
< TABLE border=1
bgcolor="red" >
テーブル 整頓
HTML 講座
< TR bgcolor="red" >
テーブル 整頓
HTML 講座
< TD bgcolor="red" >
テーブル 整頓

同じような原理で背景に画像を表示する事もできます。

背景を画像にしたい場合は『 background="画像のアドレス" 』と書きます。

画像アドレスの指定方法は、 画像を表示する を参照してください。

上の例では < TR > < TD > ともに1つめだけ背景に色をつけています。


《例題3》
HTML 講座
< TABLE border="1"
background="画像アドレス" >
テーブル 整頓
HTML 講座
< TR background=
"画像アドレス"
>
テーブル 整頓
HTML 講座
< TD background=
"画像アドレス"
>
テーブル 整頓

ここで注意が必要なのは、 《例題3》 < TR > タグの背景画像は表示されてますか?

Internet Explorer
を使っている人は表示されてないでしょう。

逆に
Netscape Navigator
を使っている人はちゃんと見えますね。

Internet Explorer
Netscape Navigator
両方で見えるようにするには、

《例題3》 でも分かるとおり、 < TABLE > タグで全体の背景を画像で埋めるか、

< TD > タグで1つ1つ背景を指定するしか方法はありません。




最後におさらいを兼ねて、今まで テーブル タグの中に文字しか書いていませんでしたが、

文字だけでなく、色々なものを置ける例題を出して今回は終わりにしたいと思います。


《例題4》
< TABLE border="1" bordercolorlight="#0000FF" >
< TR >
< TD >< IMG SRC="画像のアドレス" width="50" height="50" ></ TD >
< TD >< TABLE border=3 >< TR >< TD > ヾ(´▽`;)ゝ </ TD ></ TR ></ TABLE ></ TD >
< TD >< TABLE border=1 cellspacing=5 >< TR >< TD > てすと </ TD ></ TR ></ TABLE ></ TD >
< TD bordercolor="yellow" valign="top" > てすと </ TD >
< TD bgcolor="red" >< MARQUEE > てすと </ MARQUEE ></ TD >
</ TR >
</ TABLE >

ヾ(´▽`;)ゝ
てすと
てすと
てすと



タグをコピーして使う場合は、全角のスペースは半角にするか、削除して下さい




テーブルで整頓2(高)へ テーブルで整頓4(高)へ





バズーカー発射 ご意見・ご感想・ 告白 メールお待ちしております ヾ( )/ moonlightshine@mail.goo.ne.jp メール頂戴♪




© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: