- ベストアンサー
TABLE（表）を横に並べたいのですが
こういった表↓（実際はもっと縦が長いです）を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>
- xxtomocoxx
- お礼率85% (46/54)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
スタイル部分は、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は何か、検証環境（セミイコールで「ブラウザ」の意味だと思っておいて下さい）など）を補足して下さい。
その他の回答 (3)
- torayoshi
- ベストアンサー率62% (910/1449)
テーブルの入れ子にしないで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> みたいに。
お礼
回答ありがとうございます。 お返事遅くなってすみません。 本当はこのように入れ子（？）にしないで、cssを使うのが正当なんでしょうね。 テーブルに関してcssはあまり使ったことがないので、頑張ってみようと思います。 どうもありがとうございました。
- aatw
- ベストアンサー率37% (178/480)
★勘違い回答になるかも知れないので先に謝っておきます。 すんません。 私の場合は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> という入れ子で作ってみたらこんな感じです
お礼
回答ありがとうございます。 お返事遅くなってすみません。 なるほど。 こちらのやり方も簡単そうでいいですね。 使用させていただくこと、考えておきます。 どうもありがとうございました。
- aigaion
- ベストアンサー率47% (287/608)
あらピンク色で奇麗（ぁ <table border="0"> <TR> <TD> ここにテーブル </TD> <TD> ここにテーブル </TD> <TD> ここにテーブル </TD> </TR> </table> 上記のように見えないテーブルでレイアウトしてみては？ 列の幅を変えることで感覚を空けることもできます。
お礼
回答ありがとうございます。 お返事遅くなってすみません。 これは、 試したところ、綺麗に表示されますね。 １番簡単な方法かもしれませんね。 どうもありがとうございました。
お礼
回答ありがとうございます。 お返事遅くなってすみません。 試してみたところ、綺麗に表示されました。 先の方のお礼にも書いたのですが、css初心者なので助かりました。 これを気にチャレンジしようかと考えております。 どうもありがとうございました。