TABLEの高さの固定、TABLEの高さの変動を固定について

質問

TABLEの高さの固定できずに困っています。
【(2)】に縦500程度の画像掲載（又は複数回改行）をすると、
【(1)】の50pxで固定している縦幅が変動してしまいます。

【(3)】の<TD>にheight=500pxのような大きな値を入れると
【(1)】の縦変動を固定できるのですが、【(2)】の縦幅が大きくなると、
その都度、【(3)】の<TD>のheightの値を書き換えなければなりません。

CSS等で【(1)】のheight：50px；の指定をしても、
【(2)】の縦幅の上昇より【(1)】が50px以上になってしまいます。

【(1)】のheightを【(2)】の縦の変動に左右されず固定する方法を
出来ればCSSを使用した方法でわかる方がいらっしゃいましたら
ご回答宜しくお願い致します。

【-------HTML START---------】
<TABLE style="WIDTH: 500px;HEIGHT:100%" cellSpacing=0 cellPadding=0 border=1>
<TR>
<TD colSpan=2 height="20px"></TD></TR>
<TR>
<TD height="50px">【(1)】</TD>
<TD vAlign=top width="165px" rowSpan=2>【(2)】</TD></TR>
<TR>
<TD vAlign=top>【(3)】</TD></TR></TABLE>
【-------HTML END---------】

回答No.1

bugtte · ベストアンサー

テーブル内にテーブルを入れたほうが簡単ではないでしょうか。
【(2)】の高さが全に固定の場合はCSSでもよいでしょうが、数値がこまめに変動するレイアウトの場合CSSは不向きに感じます。

<table cellpadding="0" cellspacing="0" border="1">
<tr><td colspan="2" height="20px"></td></tr>
<tr>
<td valign="top">

<table cellpadding="0" cellspacing="0" border="1">
<tr><td height="50">【１】</td></tr>
<tr><td>【３】</td></tr>
</table>

</td>
<td valign="top" width="165px" height="500">【２】</td>
</tr>
</table>

補足

回答有難う御座いました。
テーブル内にテーブルを入れることにより、
無事に【３】＆【２】の変動後も【１】の高さを固定出来ました。

＞【(2)】の高さが全に固定の場合はCSSでもよい。
とありますが、テーブル内にテーブルを入れない修正前のHTMLで、
CSSに限らず【(2)】の高さをheight=100%で【(1)】の高さの固定は
できるのでしょうか。宜しければ教えてください。

回答No.2

bugtte

＞【(2)】の高さをheight=100%で【(1)】の高さの固定はできるのでしょうか
少し試してみましたが、【3】の高さも指定しないと【１】を固定するのは無理っぽいです。
【2】＝縦500px、【1】＝縦20pxならば【3】＝縦480pxってそれぞれ指定する必要がありそうです。

テーブルタグは縦向きの指定に弱いですね。
しかしCSSレイアウトと違い、文章を改行したりすると自動的に枠が広がっていくのは便利です。
レイアウトは絶対にCSSで作るべき！ってサイトもよく見かけますがこういう部分を考えると一概にそうとは言えませんからねぇ。

お礼

回答有難う御座いました。
テーブル縦向きに弱い関係やCSSの関係が良くわかりました。
お陰でテーブルについて理解が深まりました。
有難う御座いました。