モックン☆彡の部屋

< TABLE > タグ の説明もこのページで最後になりました。

今回はもう少し TABLE をととのえて表示してみましょう♪

普通に < TABLE > タグ を使って書くと、文字を線でかこむだけになってしまいます。

それだけではつまらないので、大きさを変えて遊んでみましょう ☆彡


TABLE の大きさを指定するには『 width="" 』と『 height="" 』を使います。

『 width="" 』は横の長さを表し、『 height="" 』は縦（たて）の長さを表します。

『 "" 』の中には数字を書き、単位は

ピクセル

です。

この単位はパソコンの画面の大きさ（解像度）を表す単位としても有名です。

どのくらいの数字でどのくらいの長さになるかは下の 《例題１》 を参考に

してください。


《例題１》

実際に表示される長さ	入力した数
	５０
	１００
	１５０
	２００
	３００
	４５０

実際に タグ を書くときは < TABLE width="" height="" > のようになります。

これは < TR width="" height="" > や < TD width="" height="" > の

ように書くこともできますが、

< TABLE width="150" height="50" > と書いていて、

その後に < TR width="200" height="300" > なんて書いてしまうと、

大きいほうの数字で表示されてしまいます。

例えば、 < TABLE width="300" height="200" > と書くと、

< TR > や < TD > タグ などの中に書いている『 width="" 』の 合計が 300 、

『 height="" 』の 合計が 200 になるようにします。


《例題２》

上のように書くと、『 height="" 』の合計が < TABLE > タグ に書かれている

合計より多くなるので、実際の縦（たて）の大きさは

50＋100＋100＝250 になります。その結果が下のようになります。


この他にも、実際の数値より少なかったら･･･などありますが、

自分で数値をいじって試してみてください。


ここまで、 TABLE の大きさや並べ方を書きましたが、

並べられている文字をよく見ると、文字が 左 によってませんか？

では、この文字位置の決め方を説明しましょう。

文字の横配置は『 align="" 』というのもで決めます。

『 "" 』の中にはそれぞれ『 left 』、『 center 』、『 right 』が入り、

『 left 』は 左 、『 center 』は 中央 、『 right 』は 右 に文字を配置します。

< TABLE align ="center" > と書くと

全体

が ページの 中央 に、

< TR align ="center" > と書くと書いた

１行

の文字が 中央 に、

< TD align ="center" > と書くと枠（わく）

１つ

の文字が 中央 になります。

上の『 align="" 』は横の配置を決めるものですが、

縦（たて）の配置を決めるには『 valign="" 』を使います。

『 "" 』の中にはそれぞれ『 top 』、『 middle 』、『 bottom 』が入り、

『 top 』は 上 、『 middle 』は 中央 、『 bottom 』は 下 に文字を配置します。

何も書かない場合は 中央 になります。具体的な例は下をみてください。


《例題３》

上ように書くと、下のように表示されます。（色はつきません）

	align ="left"	align ="center"	align ="right"
valign ="top"	位置Ａ	位置Ｂ	位置Ｃ
valign ="middle"	位置Ｄ	位置Ｅ	位置Ｆ
valign ="bottom"	位置Ｇ	位置Ｈ	位置Ｉ

前にも書きましたが、『 align="" 』や『 valign="" 』を書かないと



最後に、今まで文字をあつかってきましたが、文字だけでなく

画像を入れることもできます。ここでは基本的な事しか書きませんが、

『 < TD ></ TD > 』の中に

『 < IMG src="" width="" height="" > 』を入れてあげると、

画像を並べることができます。色々がんばって試してみましょう♪


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