テーブル内のテーブルの高さを揃えたい。

CGIの表示部分を改造中です。
下のソースをhtmlファイルにして見てもらったら判ると思うのですが、

<TABLE border="0">
<COL span="4" width="50">
<TR>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">こんな風に</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">枠を置いたときに</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

高さを100%にしても広がりませんでした。
どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?

No.3 ベストアンサー 回答者： leap_day 回答日時： 2007/04/03 11:30

こんにちは

一番上の<table>にheight指定してやってください（＾＾）

<TABLE border="0" height="100">
<COL span="4" width="50">
<TR>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">こんな風に</TD>
以下続く・・・

No.5 回答者： noname#56851 回答日時： 2007/04/04 10:44

一番外側のテーブルに高さ指定をしないと、何に対しての100％かがあいまいになるので揃わないのではないでしょうか。

<TABLE border="2" height="25%">
<COL span="4" width="50">
<TR>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">こんな風に</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">枠を置いたときに</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

外側のボーダーは分かりやすくちと太く表示しときました。

この回答へのお礼

ありがとうございました。
外枠に高さ指定することで、ちゃんと設定できました。

お礼日時：2007/04/06 11:08

No.4 回答者： naokita 回答日時： 2007/04/03 16:58

＃１　naokitaです（補足への返信）

それならセル枠のborderだけ設定し隙間を開ける。
枠とのスペースだけの為に莫大なtable設定をするよりも、簡潔にtableは１つに統一。
（背景が白の場合は下記の　background: #fff　は不要）
-----------------------------------------

<table cellpadding="0" cellspacing="4">
<tr valign="top">
<td style="width: 48px; border: 1px solid #ccc; background: #fff">こんな風に</td>
<td style="width: 48px; border: 1px solid #ccc; background: #fff">枠を置いたときに</td>
<td style="width: 48px; border: 1px solid #ccc; background: #fff">100%のサイズ指定しても合わない高さを</td>
<td style="width: 48px; border: 1px solid #ccc; background: #fff">ちゃんと揃えて配置したい</td>
</tr>
</table>

------------------------------------------
ＣＳＳでtd指定もしくはクラス指定するともっと短縮。
td {
width: 48px; border: 1px solid #ccc; background: #fff }

No.2 回答者： maura 回答日時： 2007/04/02 19:49

<style>

TD{ height=100%;}
</style>

この回答への補足

返答ありがとうございます。
しかし、変化無しです。
他の方法はありませんか?

補足日時：2007/04/03 10:40

No.1 回答者： naokita 回答日時： 2007/04/02 19:34

単純にこんな感じですか？（意味が違ったら申し訳ない）

<TABLE cellpadding="1" cellspacing="1" bgcolor="#cccccc">
<TR bgcolor="#ffffff" valign="top">
<TD width="50">こんな風に</TD>
<TD width="50">枠を置いたときに</TD>
<TD width="50">100%のサイズ指定しても合わない高さを</TD>
<TD width="50">ちゃんと揃えて配置したい</TD>
</TR>
</TABLE>

この回答への補足

すみません。ちょっと意味が違います。
テーブルの中にさらにテーブルを入れる必要があります。
その内側のテーブルの高さを指定したいです。
テーブルの中にテーブルとした理由は、枠と枠の間の空白が必要だったからです。

他の方法があればお願いします。

補足日時：2007/04/03 10:41