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

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

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

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

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

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

A 回答 (3件)

<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 テーブルでレイアウトしない方が良いです・・・


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

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

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

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

お礼日時:2011/04/09 13:49

こういう時ははやっぱりスタイルシートでしょう。


右に配置したいテーブルにfloat:right;
テーブル同士の間隔はマイナスmarginで調整。

右のテーブル<table border="*"style="float:right;margin-left:-***px;">
左のテーブル<table~>
<p style="clear:both;">下に続く要素</p>
    • good
    • 1
この回答へのお礼

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

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

お礼日時:2011/04/09 13:46

ごくごく、単純な記述ですが、


<TABLE>
  <TR>
  </TR>
  <TR>
    <TD>
     <TABLE>
      <TR>
      </TR>
      <TR>
      </TR>
      <TR>
      </TR>
     </TABLE>
    </TD>
    <TD>
     <TABLE>
      <TR>
      </TR>
      <TR>
      </TR>
     </TABLE>
    </TD>
  </TR>
</TABLE>
親のテーブルの中に子供のテーブルを入れてはいかがでしょうか?
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2011/04/09 13:44

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Qcssで、テーブルのtdの中の文字を左右に分けたい

テーブルの入れ子をせずに<span>などをつかって、
文字を左右に配置する事はできるのでしょうか?

<table width="200">
<tr><td>
左右
</td><tr>
</table>

 ↓↓↓こんな感じに

----------------
|左     右|
----------------

よろしくお願いします

Aベストアンサー

>かなり力技の様な気がするのですが…どうなんでしょうか?

はい。力技です。
だって『<span>などをつかって、』というお題があったから…

>テーブルの入れ子で、最初は対応しようと考えていました。

あれれ?もしかしてこういうのを希望していたのでしょうか?

.L {
width:100px;
float:left;
}
.R {
text-align:right;
margin-left:100px;
}

<table width="200">
<tr><td>
<div class="L">左</div>
<div class="R">右</div>
</td></tr>
</table>

定石はやっぱり無理やり <span> を使うんじゃなく、今回の例のように素直に生粋のブロックレベル要素でレイアウトしてやる事だと思いますよ。

Qtable表を横に並べる際の間隔指定

<table style='float : left;'>
を用いて、tableを並べています。
この時table同士がくっついてしまうのですが、間隔を開ける方法がありましたら教えて下さい。

Aベストアンサー

マージンをあければいいのでは?

<table style="float:left;margin:5px;"> などなど...。

margin-left:10px; と、左側だけを指定する事も出来ます。
margin-right、margin-top、margin-bottom などなど。

Qテーブルとテーブルの間隔について

同じサイズのテーブル縦にいくつか並べているのですが、今現在は全く隙間無くくっついています。

これを少しだけ(改行タグ<br>の半分以)間隔を空けたいのですが、どうすれば良いのでしょうか?

Aベストアンサー

一番シンプルな方法としては
<table>タグを<table style="margin-bottom:○○px">と書き直します。

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 

Qテーブルの位置を細かく指定したい。

現在、テーブルを組み合わせたサイトを作っていまして
そのテーブルの位置に悩んでおります。


背景固定で一つ大きめのイラストを置いていまして
そこに合わせてテーブルの位置を細かく調整したいのです。

center、left、rightの偏った3種類の位置じゃなく
左から200ピクセル程度の位置にテーブルを置きたいのです。

この様なタグはありませんか?

これはCSSなどて指定するしかないのでしようか?

Aベストアンサー

>左から200ピクセル程度の位置にテーブルを置きたいのです

<TABLE style="margin-left:200px;">
<TR><TD></TD></TR>
</TABLE>

CSSを使っての指定になると思います。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Q 内のテーブルを上寄せにするには?

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
</table>
</td>

<td width="800" height="1200" border="1">

</td>
</tr>
</table>

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
...続きを読む

Aベストアンサー

TABLE Aを入れているtdに対してvalign="top"を入れると
解決しますよ。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報