HTMLで表を横並びにしたくて、下記のような表を作りました。

解決済

質問者：aiaiwaiwai77
質問日時：2010/10/15 13:08
回答数：5件

HTMLで表を横並びにしたくて、下記のような表を作りました。
この表をもう一つ右隣に作りたいのですが、どうもうまくいきません。
何を付け足せば横に並んでくれるのでしょうか？

<table style= width="500" bgcolor="#007500" cellspacing="1" cellpadding="5">
<tr>
<td bgcolor="#e5ffe5" width="120"><a href="紹介したURL">ああああ</td>
<td bgcolor="#ffffff">ああ </td>
</tr>
<tr>
<td bgcolor="#e5ffe5"><a href="紹介したいURL">ああああ</a>
</td>
<td bgcolor="#ffffff">ああ </td>
</tr>
<tr>
<td bgcolor="#e5ffe5"><a href="index.html"></td>
<td bgcolor="#ffffff">あああああ</td>
</tr>
</table> 
</tr>

通報する

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

質問の本文を隠す

回答 (5件)

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

No.5ベストアンサー

回答者： fujillin
回答日時：2010/10/21 12:28

No1、No2です。

No2の例ではfloat:leftしか指定していないので、ブラウザの幅を縮めれば縦に並びます。
実は、そのようなレイアウトを指定しているからです。
（＝幅を縮めたブラウザでも、そりあえずその幅の中に内容を表示する。）

いつも横並びにしたければ、それだけの幅を確保してあげればよいだけです。
CSSに　body { width:900px; } のような1行を追加すれば、全体が900pxの固定幅になりますので、ブラウザの幅を縮めても横並びを保持するようになります。

No2に上げた参考サイトに、「本文の構成や内容はHTMLで、表現やレイアウトはCSSで」とあるように、（↑）の例ではHTMLソースを変更することなくCSSの修正で表示方法（見え方）を変えていることになります。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

HTMLとCSSの違いがよく分からないんですが、まだ勉強不足ですね。
これから徐々に覚えていこうと思います。
参考にさせていただきます。

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

通報する

お礼日時：2010/10/22 08:37

No.4

回答者： takuwanosho
回答日時：2010/10/21 05:49

テーブルを単純に２つ付けただけだと、ウィンドウの幅を縮めると縦に並んでしまいます。

どうしても、横並びで固定したい場合は、テーブルの中にテーブルを作る方法があります。
※説明に余分なテーブル装飾は全て削除してあります。

<table width="200" boarder="0"><tr>
<td>
<table "width="100" border="1">
<tr><td>あ</td><td>い</td></tr>
<tr><td>か</td><td>き</td></tr>
</table>
</td>
<td>
<table "width="100" border="1">
<tr><td>あ</td><td>い</td></tr>
<tr><td>か</td><td>き</td></tr>
</table>
</td>
</table>

ただし、これは余り推奨される書き方では有りません。
でも、どーしても力技で抑え込みたい時には、覚えておくと便利だったりはします。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

これが一番、簡単な書き方ですね。
力技使いたい時に、やってみます。

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

通報する

お礼日時：2010/10/21 09:33

No.3

回答者： fujillin
回答日時：2010/10/20 23:14

No2です。

＞CSSに移行するというのは、どうすればいいのですか？
表示内容はHTMLで、表示スタイルはCSSで、という方向に移行しているようです。
CSSについては検索すればたくさんヒットすると思いますので調べてみてください。
　http://www.kanzaki.com/docs/html/htminfo17.html

例えば、ご提示のソースではwidth="500;"やfont color="#000000"などの指定があってもそれが反映されていないところがあると思います。
リンクタグも閉じてなかったり…

ごく簡単に、移してみると。（＝かなりいい加減）
（横幅は400pxに変えています）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
caption { margin:10px; padding:0; }
table.t { width:400px; float:left; margin-right:10px; border-collapse:collapse; background-color:#fff; color:#000; }
table.t a:link { color:black; }
table.t td { border:1px solid #007500; padding:5px; font-weight:bold; }
table.t td.b { width:120px; background-color:#e5ffe5; }
table.t td.c a { color:#007500; }
</style>
</head>

<body>
<table class="t" >
<caption>CSSによる表1</caption>
<tr>
<td class="b"><a href="紹介したURL">ああああ</a></td>
<td>ああ</td>
</tr>
<tr>
<td class="b c"><a href="紹介したいURL">ああああ</a></td>
<td>ああ</td>
</tr>
<tr>
<td class="b"><a href="index.html"></a></td>
<td>あああああ</td>
</tr>
</table>

<table class="t" >
<caption>CSSによる表2</caption>
<tr>
<td class="b"><a href="紹介したURL">ああああ</a></td>
<td>ああ</td>
</tr>
<tr>
<td class="b c"><a href="紹介したいURL">ああああ</a></td>
<td>ああ</td>
</tr>
<tr>
<td class="b"><a href="index.html"></a></td>
<td>あああああ</td>
</tr>
</table>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

いい加減な作りだったんですね。
お恥ずかしいです。

もっと勉強が必要ですね。
ありがとうございました。

通報する

お礼日時：2010/10/21 09:36

No.2

回答者： fujillin
回答日時：2010/10/15 18:49

よくわかんないけれど、もしかしてこういうこと？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
table { float:left; margin-right:10px; }
</style>
</head>

<body>
<table style= "width="500;" bgcolor="#007500" cellspacing="1" cellpadding="5">
<tr>
<td bgcolor="#e5ffe5" width="120"><a href="紹介したURL">ああああ</td>
<td bgcolor="#ffffff">ああ </td>
</tr>
<tr>
<td bgcolor="#e5ffe5"><a href="紹介したいURL">ああああ</a>
</td>
<td bgcolor="#ffffff">ああ </td>
</tr>
<tr>
<td bgcolor="#e5ffe5"><a href="index.html"></td>
<td bgcolor="#ffffff">あああああ</td>
</tr>
</table>

<table style= "width="500;" bgcolor="#007500" cellspacing="1" cellpadding="5">
<tr>
<td bgcolor="#e5ffe5" width="120"><a href="紹介したURL">ああああ</td>
<td bgcolor="#ffffff">ああ </td>
</tr>
<tr>
<td bgcolor="#e5ffe5"><a href="紹介したいURL">ああああ</a>
</td>
<td bgcolor="#ffffff">ああ </td>
</tr>
<tr>
<td bgcolor="#e5ffe5"><a href="index.html"></td>
<td bgcolor="#ffffff">あああああ</td>
</tr>
</table>

</body>
</html>

* は非推奨みたいなので、CSSに移行したほうがよろしいかも。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

早速、試してみましたところ、希望通りの横並びの表になっていました。
CSSに移行するというのは、どうすればいいのですか？

また、お返事頂ければ嬉しいです。

通報する

お礼日時：2010/10/16 10:02

No.1

回答者： jjon-com
回答日時：2010/10/15 14:56

<table style= width="500" bgcolor="#007500" cellspacing="1" cellpadding="5">

<tr>
<td bgcolor="#e5ffe5" width="120"><a href="紹介したURL">ああああ</td>
<td bgcolor="#ffffff">ああ </td>
<td bgcolor="#ffffff">いい </td>
</tr>
<tr>
<td bgcolor="#e5ffe5"><a href="紹介したいURL">ああああ</a>
</td>
<td bgcolor="#ffffff">ああ </td>
<td bgcolor="#ffffff">いいい </td>
</tr>
<tr>
<td bgcolor="#e5ffe5"><a href="index.html"></td>
<td bgcolor="#ffffff">あああああ</td>
<td bgcolor="#ffffff">いいいい</td>
</tr>
</table>
 

追伸．
この質問の投稿先としてより適切なのは次のカテゴリだと思います。
[技術者向] コンピューター > プログラミング > HTML