- ベストアンサー
右つめにしたテーブルの左の余白に、テキストを回り込ませない方法
ドリームウィーバー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はありますでしょうか。 どうぞお力をお貸しください。宜しくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こちらのほうがよろしいのでは？ <!-- テーブル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; は、左右の回り込みを解除することを意味します。 確認はしていませんが、経験上たぶんこれで出来ると思います。
その他の回答 (2)
- font_color
- ベストアンサー率45% (24/53)
＃1です。 先ほどのソースに誤りがありました。 【テキストa,テキストb】 style="text-align:right"× ↓ style="text-align:left"○ 【テーブルb】 style="text-align:left"× ↓ style="text-align:right"○
お礼
先ほどのご回答と、丁寧に修正部分までご記入いただいて本当に有難うございました。 font_colorさんの丁寧なお心遣いに感謝いたします。 この方法は、親テーブルを３段仕立てにするという方法ですね。 この方法は早速実行し、成功いたしました。今のところ、この方法が一番良いと思います。 また、別の方法が出てきましたら、別の方法も知ってみたいと思います。 font_colorさん、有難うございました！
- font_color
- ベストアンサー率45% (24/53)
こんにちは。 <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での修正も含め、本当に有難うございました！
お礼
お礼が遅れまして大変申し訳ありません。 ご丁寧なHTML、本当に有難うございました！ まだまだ未熟な私ですが、参考URLも読み込んでもっと知識を得てみたいと思います。 有難うございました！