|
左のようなテーブルを作ってみましょう♪ |
|
仕組みはこの通り♪ 枠を表示してみると、良く分かりますね。 |
部品はこの6つです。 これらをそれぞれのセルに上手く配置します。 横・縦の部品を足すことで大きなテーブルも作れます。
l...left r...right t...top u...underの略です |
|
||||||||||||||
|
||||||||||||||
レイアウトが崩れないように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> |