こういった表↓（実際はもっと縦が長いです）をhtmlで少し間隔をあけて横に並べて表示したいのですが、どのようにすればいいのでしょうか？可能なのでしょうか？宜しくお願い致します。ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字

テーブルの入れ子にしないでCSSのmarginとfloat使うのが一番スマートだと思いますが。テーブルとテーブルの間隔はmarginで調節してください。ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字ここに文字みたいに。

★勘違い回答になるかも知れないので先に謝っておきます。すんません。私の場合は3×3の表の隣に4×4の表を添えたい場合タグのあとに再度タグを入れてもう一つ作ります。タグがないので左右に並んで表示します。表の間隔き外枠の太さを透明で太くすることで回避しています。あとタグを使って真ん中に寄せておくこともいいかもしれません * * * + + + - - - o o o o 1 1 1 1 2 2 2 2 3 3 3 3 という入れ子で作ってみたらこんな感じです

あらピンク色で奇麗（ぁここにテーブルここにテーブルここにテーブル上記のように見えないテーブルでレイアウトしてみては？列の幅を変えることで感覚を空けることもできます。

TABLE（表）を横に並べたいのですが

解決済

質問者：xxtomocoxx
質問日時：2008/07/12 20:19
回答数：4件

こういった表↓（実際はもっと縦が長いです）をhtmlで少し間隔をあけて横に並べて表示したいのですが、どのようにすればいいのでしょうか？可能なのでしょうか？
宜しくお願い致します。

<table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#ffffff;text-align:center"><tbody><tr>
<td style="border:1px solid #ffcccc" colspan="3">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr></tbody></table>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： abril
回答日時：2008/07/13 00:54

スタイル部分は、CSSにして分離して定義した方がHTMLがすっきりしますしスタイル変更の管理も格段に楽です。

また、「横に並べる」というレイアウトの為だけにテーブルをいたずらに入れ子にするのはお奨めできませんので、ここでは違う方法の一例をあげます。

まず、HTMLのマークアップからstyle属性の部分を全て削除した上で、2つのテーブルを<div>で囲んでみて下さい。下記の様な感じです。

<div class="hoge">
<table>
<tbody>
<tr>
<td colspan="3">ここに文字</td>
</tr>
<tr>
<td>ここに文字</td>
<td>ここに文字</td>
<td>ここに文字</td>
</tr>
（以下同様）
</tbody>
</table>

<table>
（以下同様）
</tbody>
</table>
</div>

そして、CSSを外部ファイルにして参照するか、<head></head>内に<style>タグを使って以下の様に定義して下さい。事情が許す限り前者の方法を推奨します。なお、各記述方法は「CSS　スタイルシート」等のキーワードでググればいくらでも出てきますので省略します。

div.hoge {
zoom: 100%;
margin: 0;
}
div.hoge:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: left;
}
div.hoge table {
float: left;
margin-right: 10px;
border-collapse: collapse;
font-size: 12px;
color: #000000;
background: #ffffff;
text-align:center;
}
div.hoge table td {
padding: 5px;
border: 1px solid #ffcccc
}

要は、親要素のdivの中で、子要素のtableをフロートさせて横並びにするということです。この場合のdivは、子要素のtableがフロートする事で後に続く要素が回り込むなどの不具合を解消する為の指定をしています。
これで試して見て何か問題がある様でしたら、更に詳細（具体的にどの様な不具合が起きているか、HTMLファイルのDOCTYPEは何か、検証環境（セミイコールで「ブラウザ」の意味だと思っておいて下さい）など）を補足して下さい。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
お返事遅くなってすみません。

試してみたところ、綺麗に表示されました。
先の方のお礼にも書いたのですが、css初心者なので助かりました。
これを気にチャレンジしようかと考えております。

どうもありがとうございました。

通報する

お礼日時：2008/07/13 09:45

No.3

回答者： torayoshi
回答日時：2008/07/13 00:36

テーブルの入れ子にしないでCSSのmarginとfloat使うのが一番スマートだと思いますが。

テーブルとテーブルの間隔はmarginで調節してください。

<table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#ffffff;text-align:center;margin-right: 10px; float: left;"><tbody><tr>
<td style="border:1px solid #ffcccc" colspan="3">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr></tbody></table>
<table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#ffffff;text-align:center"><tbody><tr>
<td style="border:1px solid #ffcccc" colspan="3">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
<td style="border:1px solid #ffcccc">ここに文字</td>
</tr></tbody></table>

みたいに。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
お返事遅くなってすみません。

本当はこのように入れ子（？）にしないで、cssを使うのが正当なんでしょうね。
テーブルに関してcssはあまり使ったことがないので、頑張ってみようと思います。

どうもありがとうございました。

通報する

お礼日時：2008/07/13 09:42

No.2

回答者： aatw
回答日時：2008/07/12 22:01

★勘違い回答になるかも知れないので先に謝っておきます。

すんません。

私の場合は3×3の表の隣に4×4の表を添えたい場合
</>タグのあとに再度<table>タグを入れてもう一つ作ります。
<BR>タグがないので左右に並んで表示します。
表の間隔き外枠の太さを透明で太くすることで回避しています。
あと<center>タグを使って真ん中に寄せておくことも
いいかもしれません
<CENTER>
<TABLE>
<TABLE CELLSPACING="100">
<TR>
<TD><TABLE>
<TR><TD>*</TD><TD>*</TD><TD>*</TD>
<TR><TD>+</TD><TD>+</TD><TD>+</TD>
<TR><TD>-</TD><TD>-</TD><TD>-</TD>
</TABLE>
</TD>
<TD><TABLE><TR><TD>o</TD><TD>o</TD><TD>o</TD><TD>o</TD></TR>
<TR><TD>1</TD><TD>1</TD><TD>1</TD><TD>1</TD></TR>
<TR><TD>2</TD><TD>2</TD><TD>2</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>3</TD><TD>3</TD><TD>3</TD></TR></TABLE></TD>
</TR>
</TABLE>
</CENTER>
という入れ子で作ってみたらこんな感じです