table用素材の使い方

この中に文字を入れます
左のようなテーブルを作ってみましょう♪
この中に字を入れます
仕組みはこの通り♪
枠を表示してみると、良く分かりますね。
部品はこの6つです。
これらをそれぞれのセルに上手く配置します。
横・縦の部品を足すことで大きなテーブルも作れます。
左上 lt.gif 20x20ピクセル
左下 lu.gif 20x20
右上 rt.gif 20x20
右下 ru.gif 20x20
yoko.gif 150x20
tate.gif 20x100
ファイル名
l...left
r...right
t...top
u...underの略です
これは横の部品を2つつなげ、
縦の部品も2つつなげたものです。
仕組みはこんな感じです。
レイアウトが崩れないようにtableの属性で表の大きさを固定しましょう。
 横の大きさ=20+20+(150x横の部品の数)
 縦の大きさ=20+20+(100x縦の部品の数)
ソースの見本です。参考にしてね。↓
<TABLE border="0" cellpadding="0" cellspacing="0" width="340" height="240">
<TBODY>
<TR>
<TD><IMG src="lt.gif" width="20" height="20" border="0"></TD>
<TD><IMG src="yoko.gif" width="150" height="20" border="0"></TD>
<TD><IMG src="yoko.gif" width="150" height="20" border="0"></TD>
<TD><IMG src="rt.gif" width="20" height="20" border="0"></TD>
</TR>
<TR>
<TD><IMG src="tate.gif" width="20" height="100" border="0"></TD>
<TD align="center" colspan="2" rowspan="2">これは横の部品を2つつなげ、<BR>
縦の部品も2つつなげたものです。<BR>
</TD>
<TD><IMG src="tate.gif" width="20" height="100" border="0"></TD>
</TR>
<TR>
<TD><IMG src="tate.gif" width="20" height="100" border="0"></TD>
<TD><IMG src="tate.gif" width="20" height="100" border="0"></TD>
</TR>
<TR>
<TD><IMG src="lu.gif" width="20" height="20" border="0"></TD>
<TD><IMG src="yoko.gif" width="150" height="20" border="0"></TD>
<TD><IMG src="yoko.gif" width="150" height="20" border="0"></TD>
<TD><IMG src="ru.gif" width="20" height="20" border="0"></TD>
</TR>
</TBODY>
</TABLE>