- ベストアンサー
HTMLでテーブルを縦に並べたい！
基本的な質問でお恥ずかしいのですが、困っています。 テーブルを二つ、縦に並べたいのですが、何故か横に並んでしまいます。 どこが悪いのでしょうか？初心者ですみません…お知恵をお貸しください(T_T)。 <caption><font color="#ff0000">●</font>A <font color="#0000ff">●</font>B</font></caption> <table bgcolor="#80ffff" border="1"cellspacing="0" bordercolor="#0000ff" align="left"> <tr><th width="30"><font size="+5"><font color="#ff0000">●</font></th> <th width="150"> <font size="+4"><strong><big>C</big></strong></font></th> <td><font size="+2">D<br>E</font></td></tr> <tr><td></td><td><div align="center"> <font size="4" color="#8080ff"> 準備中</font></div></td><td></td></tr></table> </p></div> <p></p> <table align="center" bgcolor="#80ffff" height="20" width="250" border="1" cellspacing="2" cellpadding="0"> <tr><td><blink>HOME</blink></td></tr> </table> </body>
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (5)
- morimai
- ベストアンサー率11% (1/9)
ヒマなので、実際やってみました。 こんなの↓はどうですか？？ <caption><font color="#ff0000">●</font>A <font color="#0000ff">●</font>B</font></caption> <table border=0> <table bgcolor="#80ffff" border="1" cellspacing="0" bordercolor="#0000ff" align="left"> <tr><td width="30"><font size="+5"><font color="#ff0000">●</font></td> <td width="150"> <font size="+4"><strong><big>C</big></strong></font></td> <td><font size="+2">D<br>E</font></td></tr> <tr><td></td> <td><div align="center"> <font size="4" color="#8080ff"> 準備中</font></div></td> <td></td></tr> </table> <table bgcolor="#80ffff" height="20" width="250" border="1"> <tr><td><blink>HOME</blink></td></tr> </table></table> </body>
お礼
ご回答ありがとうございました。 うーん、右横に並んでます…；やはり align="left" が原因の様ですね。 お手を煩わせて申し訳ありません；
- starflora
- ベストアンサー率61% (647/1050)
補足です。 わたしが書き加えた最初のタグを次のようにすると、第二のテーブルが中心に来ます。 <TABLE border="0" width="100%" align=center><TR><TD> 上のスクリプトに変えて、先のタグを追加したスクリプト全体を、そのままコピー＆ペーストすれば、綺麗に縦に並びます。
お礼
補足までして頂いて有り難うございます。 早速作り変えますね。
- leaz024
- ベストアンサー率75% (398/526)
なぜ横に並ぶかといえば、１つ目のTABLEタグで「align="left"」と指定しているからです。 恐らくテーブルを左に寄せて表示しようとしたのでしょうが、これは「テーブルを左に表示し、その右にテキストなどを表示するための指定」なので、次の２つ目のテーブルが右に表示されてしまうのです。 （通常はalignを指定しなくても、テーブルは左に表示されます。） alignを指定したままでこれを直すには、２つ目のTABLEタグの前に、 <BR clear="all"> を入れます。これは一切の回り込みを解除するタグです。 </p></div> <p></p> の部分はstarfloraさんの言う通り不要ですので、これの代わりに上記タグを入れてあげるとよいでしょう。
お礼
ご回答有り難うございました。助かります。 align="left"が何故いけなかったのか良く判りました。 回り込み禁止タグも、使用したいと思います。 実はフリーソフトのHTMLエディタで書いているのですが、 理解の無いまま使いこなすには少々無理があったようです；
- gakushaneko
- ベストアンサー率68% (2350/3407)
<table bgcolor="#80ffff" border="1"cellspacing="0" bordercolor="#0000ff" align="left">の「align="left"」を削除してください。 あと，<tr><th width="30"><font size="+5"><font color="#ff0000">●</font></th>の部分のFontの指定ですが，<font size="+5"><font color="#ff0000">とせずに<font size="+5" color="#ff0000">としてください。 また，Bのあとの</font>もいらないですね。
お礼
ご回答有り難うございました。 やはりalign="left"が原因なのですね。 font指定のミスもご指摘頂き、重ねてお礼申し上げます。早速削除します。
- milano11
- ベストアンサー率35% (12/34)
2つ並び <table width="200" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> </tr> </table>
お礼
素早いご回答ありがとうございます。 私の書き方が誤解を招いた様で申し訳ありません；
お礼
ご回答有り難うございました。見事に縦に並びました。 助かりました！ 感謝致します。表の中の表は、応用がききそうですね。 ＞貴方のスクリプトはどこか変ですが まったくもってその通りで、お恥ずかしいです。 変だけど映ればいいや式に荒っぽい事をやっているんですが、 それでいつも通用する訳ではないですね…精進いたします；