右つめにしたテーブルの左の余白に、テキストを回り込ませない方法

ドリームウィーバーMX2004です。宜しくお願いいたします。

------テーブルa---------
-　　　　　　　　　　　　　　　　　-
-テキストa　　　　　　　　　　　-
-テーブルb　　　　　　　　　　　-
-テキストb　　　　　　　　　　　-
-　　　　　　　　　　　　　　　　　-
------------------------
があります。

テキストa、bはそれぞれ左よせで、
テーブルbは右よせにしたいです。
イメージはこの様な感じです。

＜イメージ＞
------テーブルa---------
-　　　　　　　　　　　　　　　　　-
-テキストa　　　　　　　　　　　-
-　　　　　　　　　　　テーブルb-
-テキストb　　　　　　　　　　　-
-　　　　　　　　　　　　　　　　　-
------------------------


しかし、テーブルbの行揃えを“右（align="right"）”にすると、
確かにテーブルbは右端に行くけれど、
テキストbが同時にその左に回り込んでしまいますので、
結果このようになります。

＜結果＞
------テーブルa---------
-　　　　　　　　　　　　　　　　　-
-テキストa　　　　　　　　　　　-
-テキストb　　　　　テーブルb-
-　　　　　　　　　　　　　　　　　-
-　　　　　　　　　　　　　　　　　-
------------------------
ちなみに、親であるテーブルaはalign="left"が効いています。
これ自体はいじりたくありません。


さて…見た目をイメージ通りに整えるため
便宜的な対症療法はいくつか自分でも考えつきますが、
（テキストbを下に行くまで改行するとか、テーブルbを左側に隙間ができないほど広くとる、とか）
そういう対症療法でないものを望んでいます。

正式なタグなどで、テーブルを右端にいかせて、かつ左に他のテキストを回り込ませない、
そういう本来の目的に近い、HTMLはありますでしょうか。

どうぞお力をお貸しください。宜しくお願いいたします。

No.3 ベストアンサー 回答者： TTT0918 回答日時： 2009/05/04 15:05

こちらのほうがよろしいのでは？

<!-- テーブルa ここから -->
<table align="left">
<tbody>
<tr>
<td>
テキストa

<!-- テーブルb ここから -->
<table align="right">
<tbody>
<tr>
<td>
（テーブルbの内容)
</td>
</tr>
</tbody>
</table>
<!-- テーブルb ここまで -->

<div style="clear: both;"> ←ここが重要！
テキストb
</div>

</td>
</tr>
</tbody>
</table>
<!-- テーブルa ここまで -->

この<div>は前後に改行が入るだけの要素です。ここでCSS(スタイルシート)を使用します。
clear: both; は、左右の回り込みを解除することを意味します。
確認はしていませんが、経験上たぶんこれで出来ると思います。

参考URL：http://www.tohoho-web.com/css/reference.htm#clear

この回答へのお礼

お礼が遅れまして大変申し訳ありません。
ご丁寧なHTML、本当に有難うございました！
まだまだ未熟な私ですが、参考URLも読み込んでもっと知識を得てみたいと思います。
有難うございました！

お礼日時：2009/05/13 07:13

No.2 回答者： font_color 回答日時： 2009/05/01 14:22

＃1です。

先ほどのソースに誤りがありました。
【テキストa,テキストb】
style="text-align:right"×
↓
style="text-align:left"○

【テーブルb】
style="text-align:left"×
↓
style="text-align:right"○

この回答へのお礼

先ほどのご回答と、丁寧に修正部分までご記入いただいて本当に有難うございました。
font_colorさんの丁寧なお心遣いに感謝いたします。

この方法は、親テーブルを３段仕立てにするという方法ですね。
この方法は早速実行し、成功いたしました。今のところ、この方法が一番良いと思います。

また、別の方法が出てきましたら、別の方法も知ってみたいと思います。
font_colorさん、有難うございました！

お礼日時：2009/05/01 20:09

No.1 回答者： font_color 回答日時： 2009/05/01 14:17

こんにちは。

<table>
<tr><td style="text-align:right">
<p>テキストa</p>
</td></tr>
<tr><td style="text-align:left">
テーブルb
</td></tr>
<tr><td style="text-align:right">
<p>テキストb</p>
</td></tr>
</table>
これでどうですか？

この回答へのお礼

font_colorさん、No.2での修正も含め、本当に有難うございました！

お礼日時：2009/05/01 20:10