子供と超初心者のためのホームページ作成教室、htmlの基礎から、フリー素材や掲示板チャットなどのCGI解説、javascriptなどの例も

ここでは表の作り方を勉強します。表組みをテーブルタグであらわすのはちょうどテーブルの引き出しにそれぞれいろいろなものが入っているのと似ていますね。
<TABLE>
　<TR>
　　<TD>
　　　　マイブーム
　　</TD>
　　<TD>
　　　　犬と散歩・インターネット
　　</TD>
　</TR>
</TABLE>
マイブーム 犬と散歩・インターネット

<TABLE>と</TABLE>で囲まれたはんいが表になっています。<TR>と</TR>で一行をあらわしています。また、<TD>と</TD>は一ますを表しその中に文章や絵などが入れられます。
<TABLE border="1" width="300" bgcolor="#FF9933">
　<TR>
　　　<TD colspan="3">
　　　　　　<CENTER>私のかわいい　　　　　　　　　　お友達</CENTER>
　　　</TD>
　</TR>
　<TR>
　　　<TD width="54" height="73">
　　　　　　　ビビ
　　　</TD>
　　　<TD width="78" height="73">
　　　　　　　バーニーズ
　　　</TD>
　　　<TD width="168" 　　　　　　　　　　　　　　　　　　rowspan="2">
　　　<IMG src="dog.jpg" 　　　　　　　width="200" height="167">
　　　</TD> 　　　　　　　　　　　　　　　　　　</TR>
　<TR>
　　　　<TD width="54" BGCOLOR="#FFFF99">
　　　　　　モモ
　　　　</TD>
　　　　<TD width="78" BGCOLOR="#99FFFF">
　　　　　　コーギー
　　　　</TD>
　　</TR>
</TABLE>
私のかわいいお友達
ビビ バーニーズ
モモ コーギー

bgcolor="#FF9933"のように表の背景色を指定できます。<TD>タグの中にこれを書けば、ますごとの色の指定も可能です。

colspan="3"は横のマスの統合を指定します。

rowspan="2"はタテのマスの統合の指定です。

widthやheightで表全体やマスごとの幅や高さを指定できます。
　 　
<TABLE border="1" width="100%">
<TR>
<TD>位置を指定するタグの書き方</TD>
<TD align="right"　valign="bottom"><IMG src="mail.gif" width="29" height="34"></TD>
</TR>
<TR>
<TD align="center" valign="middle"><IMG src="../home.gif" width="55" height="38"></TD>
<TD align="left"><IMG src="watasi.gif" width="55" height="81"></TD>
</TR>
</TABLE>
位置を指定するタグの書き方
テーブルの中の文字や画像の位置を指定する方法です。