モックン☆彡の部屋

テーブルで整頓３（高）

テーブルで整頓３（高）

今回も前回に引き続

形よく整える事

や

見栄えを良くする事

を説明します。

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

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

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

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

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

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

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

《例題１》

数字小 → → → → → → → → → → → → → → → → 数字大

**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"
HTML	講座
テーブル	整頓

数字小 → → → → → → → → → → → → → → → → 数字大

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

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

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

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

『 border="" 』についてはテーブルで整頓１（高）を参照してください。

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

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

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

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

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

《例題２》

< TABLE border=1
bgcolor="red" >
HTML	講座
テーブル	整頓

< TR bgcolor="red" >
HTML	講座
テーブル	整頓

< TD bgcolor="red" >
HTML	講座
テーブル	整頓

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

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

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

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

《例題３》

< TABLE border="1"
background="画像アドレス" >
HTML	講座
テーブル	整頓

< TR background=
"画像アドレス" >
HTML	講座
テーブル	整頓

< TD background=
"画像アドレス" >
HTML	講座
テーブル	整頓

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

Internet Explorer

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

逆に

Netscape Navigator

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

Internet Explorer

と

Netscape Navigator

両方で見えるようにするには、

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

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

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

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

《例題４》

< 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 >