解決済み

TABLE(表)を横に並べたいのですが

  • 困ってます
  • 質問No.4171460
  • 閲覧数561
  • ありがとう数4
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 85% (46/54)

こういった表↓(実際はもっと縦が長いです)を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>

質問者が選んだベストアンサー

  • 回答No.4

ベストアンサー率 69% (388/560)

スタイル部分は、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は何か、検証環境(セミイコールで「ブラウザ」の意味だと思っておいて下さい)など)を補足して下さい。
お礼コメント
xxtomocoxx

お礼率 85% (46/54)

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

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

どうもありがとうございました。
投稿日時 - 2008-07-13 09:45:57
感謝経済

その他の回答 (全3件)

  • 回答No.3

ベストアンサー率 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>

みたいに。
お礼コメント
xxtomocoxx

お礼率 85% (46/54)

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

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

どうもありがとうございました。
投稿日時 - 2008-07-13 09:42:58
  • 回答No.2

ベストアンサー率 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>
という入れ子で作ってみたらこんな感じです
お礼コメント
xxtomocoxx

お礼率 85% (46/54)

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

なるほど。
こちらのやり方も簡単そうでいいですね。
使用させていただくこと、考えておきます。
どうもありがとうございました。
投稿日時 - 2008-07-13 09:39:51
  • 回答No.1

ベストアンサー率 47% (287/608)

あらピンク色で奇麗(ぁ

<table border="0">
<TR>
<TD> ここにテーブル </TD>
<TD> ここにテーブル </TD>
<TD> ここにテーブル </TD>
</TR>
</table>

上記のように見えないテーブルでレイアウトしてみては?
列の幅を変えることで感覚を空けることもできます。
お礼コメント
xxtomocoxx

お礼率 85% (46/54)

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

これは、
試したところ、綺麗に表示されますね。
1番簡単な方法かもしれませんね。

どうもありがとうございました。
投稿日時 - 2008-07-13 09:37:03
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


感謝指数によるOK-チップ配布スタート!

ピックアップ

ページ先頭へ