2つのテーブルを左右に表示したい。

質問

2つのテーブルは列、幅の数が異なります。
ちょうど下記のような感じで表示したいのですが、
どのようにすればよいでしょうか。

単純にテーブルを２つ記述するとくっついてしまいます。

■■■　　　　　　　　　　　　　　　　　　　　　　　　　　　■■
■■■　　　　　　　　　　　　　　　　　　　　　　　　　　　■■
■■■

レイヤー？とかいうものを使う方法もあるようなのですが、
ちょっと説明をみてもよく分かりませんでした。

２つを別々のテーブルではなく、１つのテーブルにしてできないかと思ったのですが、枠線が
上のようにならなくて断念しました。

いくつかの画面を作成しているのですが、思ったとおりに表示できなくて悪戦苦闘しています。
アドバイス頂けると助かります。

回答No.3

naokita · ベストアンサー

<div>
<table style="float:left; width:270px;" border="1">
<tr><td>左</td><td>左</td></tr>
</table>
<table style="float:right; width:180px;" border="1">
<tr><td>右</td><td>右</td></tr>
</table>
<p style="clear: both;">widthの数値は要調整</p>
</div>

※ 上記のwidthは、適当なので、数値を要調整
※ 枠が広くて、左右のテーブル同士が開き過ぎるなら、
<div>　を　<div style="width:500px;">　などにしてwidthの数値を調整。
※ テーブルの下行は、ブロック要素でclear（他のclear手法でも良い）
#1 テーブルでレイアウトしない方が良いです・・・

テーブルが大きくなってカラム落ちした際の表示を考慮すれば、
１個目のテーブルを margin-right: 開ける数値px; を追加して、
２個目を float:left; にした方が初心者には優しいかな。

お礼

お返事有難うございます。遅れてしまい申し訳ありません。

詳細なアドバイス有難うございます。いくつか飲み込めていない点がありますが、ぐぐってみて理解したいと思います。

また不明点がありましたら新規質問を投稿するかもしれませんが、もしよろしければまたアドバイス頂けると嬉しいです。

回答No.2

torayoshi

こういう時ははやっぱりスタイルシートでしょう。
右に配置したいテーブルにfloat:right;
テーブル同士の間隔はマイナスmarginで調整。

右のテーブル<table border="*"style="float:right;margin-left:-***px;">
左のテーブル<table～>
<p style="clear:both;">下に続く要素</p>

お礼

お返事有難うございます。遅れてしまい申し訳ありません。

スタイルシートを使っていろいろ調整してみたいと思います。

回答No.1

kokorone

ごくごく、単純な記述ですが、
＜ＴＡＢＬＥ＞
　　＜ＴＲ＞
　　＜／ＴＲ＞
　　＜ＴＲ＞
　　　　＜ＴＤ＞
　　　　 ＜ＴＡＢＬＥ＞
　　　　　　＜ＴＲ＞
　　　　　　＜／ＴＲ＞
　　　　　　＜ＴＲ＞
　　　　　　＜／ＴＲ＞
　　　　　　＜ＴＲ＞
　　　　　　＜／ＴＲ＞
　　　　 ＜／ＴＡＢＬＥ＞
　　　　＜／ＴＤ＞
　　　　＜ＴＤ＞
　　　　 ＜ＴＡＢＬＥ＞
　　　　　　＜ＴＲ＞
　　　　　　＜／ＴＲ＞
　　　　　　＜ＴＲ＞
　　　　　　＜／ＴＲ＞
　　　　 ＜／ＴＡＢＬＥ＞
　　　　＜／ＴＤ＞
　　＜／ＴＲ＞
＜／ＴＡＢＬＥ＞
親のテーブルの中に子供のテーブルを入れてはいかがでしょうか？

お礼

お返事有難うございます。遅れてしまい申し訳ありません。

なるほど。入れ子にするのですね。色々試してみます。