テーブルでせいとん３（低）

テーブルでせいとん３（低）

<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になるようにします。

《例題２》

<TABLE border=1 width="300" height="200">
　<TR height="50">
　　<TH width="100">名前</TH>
　　<TH width="125">年齢</TH>
　　<TH width="75">性別</TH>
　</TR>
　<TR height="100">
　　<TD>ぶらっく</TD>
　　<TD>２９</TD>
　　<TD>不明</TD>
　</TR>
　<TR height="100">
　　<TD>ドラえもん</TD>
　　<TD>－１００</TD>
　　<TD>男</TD>
　</TR>
</TABLE>

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

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

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

height="50"

→

名前	年齢	性別
ぶらっく	２９	不明
ドラえもん	－１００	男

height="100"

→

height="100"

→

↑
width="100"

↑
width="120"

↑
width="75"

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

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

ここまで、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』は下に文字を配置します。

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

《例題３》

<TABLE border=1>
　<TR>
　　<TH></TH>
　　<TH>align="left"</TH>
　　<TH>align="center"</TH>
　　<TH>align="right"</TH>
　</TR>
　<TR valign="top">
　　<TH height="80">valigh="top"</TH>
　　<TD align="left">位置Ａ</TD>
　　<TD align="center">位置Ｂ</TD>
　　<TD align="right">位置Ｃ</TD>
　</TR>
　<TR valign="middle">
　　<TH height="80">valigh="middle"</TH>
　　<TD align="left">位置Ｄ</TD>
　　<TD align="center">位置Ｅ</TD>
　　<TD align="right">位置Ｆ</TD>
　</TR>
　<TR valign="bottom">
　　<TH height="80">valigh="bottom"</TH>
　　<TD align="left">>位置Ｇ</TD>
　　<TD align="center">位置Ｈ</TD>
　　<TD align="right">位置Ｉ</TD>
　</TR>
</TABLE>

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

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

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

位置Ｄ

になります。

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

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

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

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

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

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

テーブルでせいとん２（低）へ

ご意見・ご感想・告白メールお待ちしておりますヾ(☆▽☆)/ moonlightshine@mail.goo.ne.jp