逆L字の表（table）組み

下記のようなtableを組みたいのですが。。

｜￣￣￣￣￣￣￣｜
｜　＿＿＿＿＿＿｜
｜　｜　　　　　　　｜
｜　｜　　　　　　　｜
｜　｜＿＿＿＿＿｜
｜　｜　　　　　　　｜
｜　｜　　　　　　　｜
｜　｜＿＿＿＿＿｜
｜　｜　　　　　　　｜
｜　｜　　　　　　　｜
｜＿｜＿＿＿＿＿｜

なお、CSSはNN4をクリアできる範疇でしか使用できません。
そのため多少複雑なtableの入れ子になってしまっても構わないです。
罫線は全てシングル線です。

どなたかお分かりになる方がおりましたら
よろしくお願いします。

No.3 ベストアンサー 回答者： moon_night 回答日時： 2005/04/05 11:04

ああ、勘違い。

上と左はつながっているんですね。

cellpadding とか cellspacing とかを0にして
背景や画像を使用して擬似的につながっていると見せかけるテーブルをつくることが可能ですが・・・

（一般的にテーブル（またはフレーム）と画像の組み合わせが多いレイアウト方法です）

この回答への補足

自己解決方法を記載します。
これよりもスマートな表示方法をごぞんじな方がおられましたら引き続きご回答お願い致します。

<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
<tr bgcolor="#FFFFFF">
<td width="100%" colspan="4">
<table border="0">
<tr>
<td>○○○○</td>
</tr>
</table>
<div align="right">
<table width="98%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="1" colspan="2" bgcolor="#666666"><img src="space.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="1" bgcolor="#666666"><img src="space.gif" width="1" height="1"></td>
<td>
<table border="0">
<tr>
<td>○○○○</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1" colspan="2" bgcolor="#666666"><img src="space.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="1" bgcolor="#666666"><img src="space.gif" width="1" height="1"></td>
<td>
<table border="0">
<tr>
<td>○○○○</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

補足日時：2005/04/05 11:33

この回答へのお礼

そうなんです。
ここが悩みどころでした＜上と左

やはりその方法しかありませんでしょうか。。

お礼日時：2005/04/05 11:32

No.4 回答者： partita 回答日時： 2005/04/08 22:07

自己解決方法にある「○○○○」を含むテーブルは必要なんですか？

必要だとしても、pタグを使用すれば、ちょっとはコードがすっきりするのではないでしょうか。

No.2 回答者： moon_night 回答日時： 2005/04/05 10:59

素直にテーブルで組めばいいのでは？

<table>
<tr>
<td colspan="2">一番上</td>
</tr>
<tr>
<td rowspan="3">ひだり</td>
<td>右１</td>
</tr>
<tr>
<td>右２</td>
</tr>
<tr>
<td>右３</td>
</tr>
</table>

この回答へのお礼

ご回答ありがとうございます。

この組み方ですと、borderを入れると一番上とひだりのあいだに罫線が入ってしまいます。

上と左は一体でなければならないのです。

お礼日時：2005/04/05 11:20

No.1 回答者： tomo1016 回答日時： 2005/04/04 17:36

こんなのでどうでしょうか？

サイズは自由に変更してください。

一つのテーブルに三行のテーブルを入れただけです。

ポイントは中に入れるテーブルの配置を「右寄せ」にして、改行しただけです。



<table border="1" width="22%">
<tr>
<td width="100%" valign="bottom" align="right">　
<table border="1" width="63%">
<tr>
<td width="100%">　</td>
</tr>
<tr>
<td width="100%">　</td>
</tr>
<tr>
<td width="100%">　</td>
</tr>
</table>
</td>
</tr>
</table>