逆L字の表（table）組み

質問

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

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

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

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

回答No.3

moon_night · ベストアンサー

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

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>

回答No.4

partita

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

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

回答No.2

moon_night

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

<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を入れると一番上とひだりのあいだに罫線が入ってしまいます。

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

回答No.1

tomo1016

こんなのでどうでしょうか？
サイズは自由に変更してください。

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

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

<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>