悪戦苦闘

悪戦苦闘

右段と左段のテーブルを独立させて自由にレイアウトや装飾をしたい

テーブルを横に並べる

右

左

とほほのＷＷＷ入門から、ほとんどそのまま使わせてもらいました。

<TABLE>
 <TR>
  <TD><TABLE BORDER="1"><TR><TD>右</TD></TR></TABLE></TD>
  <TD><TABLE BORDER="1"><TR><TD>左</TD></TR></TABLE></TD>
 </TR>
</TABLE>

これは今までもやってたな。

右段と左段とを独立して下に増やす

右１

右２

左１

左２

上のを参考に挑戦してみる。できるかなぁ．．．。

<TABLE><TR>
<TD VALIGN="top"><!--１　行の位置を上に-->
	<TABLE BORDER="1">
	<TR><TD><!--２　ここにテーブルを-->
	<TABLE BORDER="1"><TR><TD HEIGHT="36">右１</TD></TR></TABLE>
	</TD></TR>
	<TR><TD><!--３　もうひとつ-->
	<TABLE BORDER="1"><TR><TD HEIGHT="16">右２</TD></TR></TABLE>
	</TD></TR>
	</TABLE>
</TD>
<TD VALIGN="top"><!--１　行の位置を上に-->
	<TABLE BORDER="1">
	<TR><TD><!--４　ここにも-->
	<TABLE BORDER="1"><TR><TD>左１</TD></TR></TABLE>
	</TD></TR>
	<TR><TD><!--５　もうひとつ-->
	<TABLE BORDER="1"><TR><TD>左２</TD></TR></TABLE>
	</TD></TR>
	</TABLE>
</TD></TR></TABLE>
<!--内側のテーブルにTDに適当な高さを設定できる-->

できた！　(^o^)

枠を消して色を付ける
ついでに横幅を変えて
右下は２分割

１

２３

左１

左２

こんがらがりそう。

<TABLE><TR>
<TD VALIGN="top">
	<TABLE BORDER="0" WIDTH="80">
	<TR><TD>
	<TABLE BORDER="0"><TR>
	<TD BGCOLOR="#FF0000" WIDTH="80" HEIGHT="36">１</TD>
	</TR></TABLE>
	</TD></TR>
	<TR><TD>
	<TABLE BORDER="0"><TR>
	<TD BGCOLOR="#FF8000" WIDTH="60" HEIGHT="16">２</TD>
	<!---->
	<TD BGCOLOR="#FFFF00" WIDTH="20" HEIGHT="16">３</TD>
	</TR></TABLE>
	</TD></TR>
	</TD></TR>
	</TABLE>
</TD>
<TD VALIGN="top">
	<TABLE BORDER="0" WIDTH="60">
	<TR><TD>
	<TABLE BORDER="0"><TR>
	<TD BGCOLOR="#0000FF">左１</TD>
	</TR></TABLE>
	</TD></TR>
	<TR><TD>
	<TABLE BORDER="0"><TR>
	<TD BGCOLOR="#00FF00" HEIGHT="60">左２</TD>
	</TR></TABLE>
	</TD></TR>
	</TABLE>
</TD>
</TR></TABLE>

できたのかな？　なんで左に寄ってしまったんだろう？　ま、いっか。

枠線を普通の実線にする

右上左上

右下左下

とほほのＷＷＷ入門から、ほとんどそのまま使わせてもらいました。

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#FF0000">
<!--BGCOLOR="#FF0000"で赤に指定した-->
<TR>
<TD>
<TABLE BORDER="0" CELLSPACING="1" CELLPADDING="3">
<!--外枠の太さ０と罫線の太さ１がポイントかな？-->
<TR BGCOLOR="#FFFFFF"><TD>右上</TD><TD>左上</TD></TR>
<TR BGCOLOR="#FFFFFF"><TD>右下</TD><TD>左下</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>

かっこいいなぁ。

左側だけ実線で囲む。

１

２３

左１

左２

いよいよ、やりたかったことに辿り着く．．．かもしれない。


<TABLE><TR>
<TD VALIGN="top">
	<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#FFFFFF">
	<TR><TD>
	<TABLE BORDER="0"><TR>
	<TD BGCOLOR="#FF0000" WIDTH="60" HEIGHT="36">１</TD>
	</TR></TABLE>
	</TD></TR>
	<TR><TD>
	<TABLE BORDER="0"><TR>
	<TD BGCOLOR="#FF8000" WIDTH="36" HEIGHT="16">２</TD>
	<TD BGCOLOR="#FFFF00" WIDTH="20" HEIGHT="16">３</TD>
	</TR></TABLE>
	</TD></TR>
	</TD></TR>
	</TABLE>
</TD>
<TD VALIGN="top">
	<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#000000">
	<TR><TD>
	<TABLE BORDER="0" CELLSPACING="1" CELLPADDING="0"><TR>
	<TD BGCOLOR="#0000FF" WIDTH="40">左１</TD>
	</TR></TABLE>
	</TD></TR>
	<TR><TD>
	<TABLE BORDER="0" CELLSPACING="1" CELLPADDING="0"><TR>
	<TR>
	<TD BGCOLOR="#00FF00" WIDTH="40" HEIGHT="60">左２</TD>
	</TR></TABLE>
	</TD></TR>
	</TABLE>
</TD>
</TR></TABLE>

ちょっと違う。左の上下の境界が太くなるのと右も同じようにしないと上下がずれる。
できないものなのかも．．．。まぁ、とりあえずこの程度でいいか。

後日談　2002/04/20　試行錯誤を繰り返して、思い通りに完成。（ＴＯＰページ）

ツールコレクション＞

悪戦苦闘