- ベストアンサー
HTMLで横並びの表を作りたい！
- HTMLで横並びの表を作りたい！横に並ぶ表を作る方法を教えてください。
- HTMLで2つの表を横に並べたいです。どのようにすれば実現できますか？
- HTMLの表を横に並べたいと思っています。具体的な手順を教えてください。
- その他([技術者向] コンピューター)
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
No1、No2です。 No2の例ではfloat:leftしか指定していないので、ブラウザの幅を縮めれば縦に並びます。 実は、そのようなレイアウトを指定しているからです。 （＝幅を縮めたブラウザでも、そりあえずその幅の中に内容を表示する。） いつも横並びにしたければ、それだけの幅を確保してあげればよいだけです。 CSSに body { width:900px; } のような1行を追加すれば、全体が900pxの固定幅になりますので、ブラウザの幅を縮めても横並びを保持するようになります。 No2に上げた参考サイトに、「本文の構成や内容はHTMLで、表現やレイアウトはCSSで」とあるように、（↑）の例ではHTMLソースを変更することなくCSSの修正で表示方法（見え方）を変えていることになります。
その他の回答 (4)
- takuwanosho
- ベストアンサー率36% (59/163)
テーブルを単純に２つ付けただけだと、ウィンドウの幅を縮めると縦に並んでしまいます。 どうしても、横並びで固定したい場合は、テーブルの中にテーブルを作る方法があります。 ※説明に余分なテーブル装飾は全て削除してあります。 <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> ただし、これは余り推奨される書き方では有りません。 でも、どーしても力技で抑え込みたい時には、覚えておくと便利だったりはします。
お礼
ありがとうございます。 これが一番、簡単な書き方ですね。 力技使いたい時に、やってみます。 ありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
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>
お礼
ありがとうございます。 いい加減な作りだったんですね。 お恥ずかしいです。 もっと勉強が必要ですね。 ありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかんないけれど、もしかしてこういうこと？ <!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"><font color="#000000"><strong><a href="紹介したURL">ああああ</strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>ああ<br></strong></font></td> </tr> <tr> <td bgcolor="#e5ffe5"><font color="#007500"><strong><a href="紹介したいURL">ああああ</a> </strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>ああ<br></strong></font></td> </tr> <tr> <td bgcolor="#e5ffe5"><font color="#000000"><strong><a href="index.html"></strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>あああああ</strong></font></td> </tr> </table> <table style= "width="500;" bgcolor="#007500" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#e5ffe5" width="120"><font color="#000000"><strong><a href="紹介したURL">ああああ</strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>ああ<br></strong></font></td> </tr> <tr> <td bgcolor="#e5ffe5"><font color="#007500"><strong><a href="紹介したいURL">ああああ</a> </strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>ああ<br></strong></font></td> </tr> <tr> <td bgcolor="#e5ffe5"><font color="#000000"><strong><a href="index.html"></strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>あああああ</strong></font></td> </tr> </table> </body> </html> * <font>は非推奨みたいなので、CSSに移行したほうがよろしいかも。
お礼
ありがとうございます。 早速、試してみましたところ、希望通りの横並びの表になっていました。 CSSに移行するというのは、どうすればいいのですか？ また、お返事頂ければ嬉しいです。
- jjon-com
- ベストアンサー率61% (1599/2592)
<table style= width="500" bgcolor="#007500" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#e5ffe5" width="120"><font color="#000000"><strong><a href="紹介したURL">ああああ</strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>ああ<br></strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>いい<br></strong></font></td> </tr> <tr> <td bgcolor="#e5ffe5"><font color="#007500"><strong><a href="紹介したいURL">ああああ</a> </strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>ああ<br></strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>いいい<br></strong></font></td> </tr> <tr> <td bgcolor="#e5ffe5"><font color="#000000"><strong><a href="index.html"></strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>あああああ</strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>いいいい</strong></font></td> </tr> </table> <br> 追伸． この質問の投稿先としてより適切なのは次のカテゴリだと思います。 [技術者向] コンピューター > プログラミング > HTML
お礼
ありがとうございます。 試してみましたが、こちらの表は私の希望していたのとは違いました。 ですが、このような表を作るような事がありました時は、是非参考にさせていただこうと思いました。 本当にありがとうございました。
お礼
ありがとうございます。 HTMLとCSSの違いがよく分からないんですが、まだ勉強不足ですね。 これから徐々に覚えていこうと思います。 参考にさせていただきます。 ありがとうございました。