OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

HTMLでテーブルを縦に並べたい!

  • すぐに回答を!
  • 質問No.161839
  • 閲覧数2244
  • ありがとう数7
  • 気になる数0
  • 回答数6
  • コメント数0

お礼率 71% (228/318)

基本的な質問でお恥ずかしいのですが、困っています。
テーブルを二つ、縦に並べたいのですが、何故か横に並んでしまいます。
どこが悪いのでしょうか?初心者ですみません…お知恵をお貸しください(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
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.2
レベル13

ベストアンサー率 61% (647/1050)

 
  乱暴な方法かも知れませんが、わたしなら、もう一つテーブルを造り、そのなかに、二つのテーブルを収めてしまいます(入れ子にする訳です)。つまり
 
<TABLE border="0"><TR><TD>

<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>

</TD></TR>

<!-- </p></div>
<p></p> -->

<TR><TD>

<table align="center" bgcolor="#80ffff" height="20" width="250" border="1"
cellspacing="2" cellpadding="0">
<tr><td><blink>HOME</blink></td></tr>
</table>

</TD></TR></TABLE>

  貴方のスクリプトはどこか変ですが、( <!-- -->で囲んだ部分は、対応するタグがなく、また無意味なので、伏せました。他にも無駄なものがあります)、それは置いておくとして、「大文字のタグ」がわたしが書き入れたタグです。これで、二つのテーブルは縦に並びます。
  なお、最初のテーブルで、align=left としてるので、二つ目のテーブルが、第一のテーブルの右に回り込むのだとも思えます。
 
お礼コメント
RYOKUYA

お礼率 71% (228/318)

ご回答有り難うございました。見事に縦に並びました。
助かりました!
感謝致します。表の中の表は、応用がききそうですね。
>貴方のスクリプトはどこか変ですが
まったくもってその通りで、お恥ずかしいです。
変だけど映ればいいや式に荒っぽい事をやっているんですが、
それでいつも通用する訳ではないですね…精進いたします;
投稿日時 - 2001-11-02 20:01:22
-PR-
-PR-

その他の回答 (全5件)

  • 回答No.1
レベル8

ベストアンサー率 35% (12/34)

2つ並び <table width="200" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> </tr> </table> ...続きを読む
2つ並び

<table width="200" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
お礼コメント
RYOKUYA

お礼率 71% (228/318)

素早いご回答ありがとうございます。
私の書き方が誤解を招いた様で申し訳ありません;
投稿日時 - 2001-11-02 19:45:33


  • 回答No.3
レベル14

ベストアンサー率 68% (2350/3407)

<table bgcolor="#80ffff" border="1"cellspacing="0" bordercolor="#0000ff" align="left">の「align="left"」を削除してください。 あと,<tr><th wid ...続きを読む
<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>もいらないですね。
お礼コメント
RYOKUYA

お礼率 71% (228/318)

ご回答有り難うございました。
やはりalign="left"が原因なのですね。
font指定のミスもご指摘頂き、重ねてお礼申し上げます。早速削除します。
投稿日時 - 2001-11-02 20:06:31
  • 回答No.4
レベル12

ベストアンサー率 75% (398/526)

なぜ横に並ぶかといえば、1つ目のTABLEタグで「align="left"」と指定しているからです。 恐らくテーブルを左に寄せて表示しようとしたのでしょうが、これは「テーブルを左に表示し、その右にテキストなどを表示するための指定」なので、次の2つ目のテーブルが右に表示されてしまうのです。 (通常はalignを指定しなくても、テーブルは左に表示されます。) alignを指定した ...続きを読む
なぜ横に並ぶかといえば、1つ目のTABLEタグで「align="left"」と指定しているからです。
恐らくテーブルを左に寄せて表示しようとしたのでしょうが、これは「テーブルを左に表示し、その右にテキストなどを表示するための指定」なので、次の2つ目のテーブルが右に表示されてしまうのです。
(通常はalignを指定しなくても、テーブルは左に表示されます。)

alignを指定したままでこれを直すには、2つ目のTABLEタグの前に、
 <BR clear="all">
を入れます。これは一切の回り込みを解除するタグです。
 </p></div>
 <p></p>
の部分はstarfloraさんの言う通り不要ですので、これの代わりに上記タグを入れてあげるとよいでしょう。
お礼コメント
RYOKUYA

お礼率 71% (228/318)

ご回答有り難うございました。助かります。
align="left"が何故いけなかったのか良く判りました。
回り込み禁止タグも、使用したいと思います。
実はフリーソフトのHTMLエディタで書いているのですが、
理解の無いまま使いこなすには少々無理があったようです;
投稿日時 - 2001-11-02 20:14:42
  • 回答No.5
レベル13

ベストアンサー率 61% (647/1050)

    補足です。   わたしが書き加えた最初のタグを次のようにすると、第二のテーブルが中心に来ます。   <TABLE border="0" width="100%" align=center><TR><TD>   上のスクリプトに変えて、先のタグを追加したスクリプト全体を、そのままコピー&ペーストすれば、綺麗に縦 ...続きを読む
 
  補足です。
  わたしが書き加えた最初のタグを次のようにすると、第二のテーブルが中心に来ます。
 
<TABLE border="0" width="100%" align=center><TR><TD>

  上のスクリプトに変えて、先のタグを追加したスクリプト全体を、そのままコピー&ペーストすれば、綺麗に縦に並びます。
 
お礼コメント
RYOKUYA

お礼率 71% (228/318)

補足までして頂いて有り難うございます。
早速作り変えますね。
投稿日時 - 2001-11-02 20:20:06
  • 回答No.6
レベル6

ベストアンサー率 11% (1/9)

ヒマなので、実際やってみました。 こんなの↓はどうですか?? <caption><font color="#ff0000">●</font>A <font color="#0000ff">●</font>B</font></caption> <table b ...続きを読む
ヒマなので、実際やってみました。
こんなの↓はどうですか??

<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>
お礼コメント
RYOKUYA

お礼率 71% (228/318)

ご回答ありがとうございました。
うーん、右横に並んでます…;やはり align="left" が原因の様ですね。
お手を煩わせて申し訳ありません;
投稿日時 - 2001-11-02 19:52:05
このQ&Aのテーマ
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

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

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

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ