
基本的な質問でお恥ずかしいのですが、困っています。
テーブルを二つ、縦に並べたいのですが、何故か横に並んでしまいます。
どこが悪いのでしょうか?初心者ですみません…お知恵をお貸しください(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>
No.2ベストアンサー
- 回答日時:
乱暴な方法かも知れませんが、わたしなら、もう一つテーブルを造り、そのなかに、二つのテーブルを収めてしまいます(入れ子にする訳です)。つまり
<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 としてるので、二つ目のテーブルが、第一のテーブルの右に回り込むのだとも思えます。
ご回答有り難うございました。見事に縦に並びました。
助かりました!
感謝致します。表の中の表は、応用がききそうですね。
>貴方のスクリプトはどこか変ですが
まったくもってその通りで、お恥ずかしいです。
変だけど映ればいいや式に荒っぽい事をやっているんですが、
それでいつも通用する訳ではないですね…精進いたします;
No.6
- 回答日時:
ヒマなので、実際やってみました。
こんなの↓はどうですか??
<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" が原因の様ですね。
お手を煩わせて申し訳ありません;
No.5
- 回答日時:
補足です。
わたしが書き加えた最初のタグを次のようにすると、第二のテーブルが中心に来ます。
<TABLE border="0" width="100%" align=center><TR><TD>
上のスクリプトに変えて、先のタグを追加したスクリプト全体を、そのままコピー&ペーストすれば、綺麗に縦に並びます。
No.4
- 回答日時:
なぜ横に並ぶかといえば、1つ目のTABLEタグで「align="left"」と指定しているからです。
恐らくテーブルを左に寄せて表示しようとしたのでしょうが、これは「テーブルを左に表示し、その右にテキストなどを表示するための指定」なので、次の2つ目のテーブルが右に表示されてしまうのです。
(通常はalignを指定しなくても、テーブルは左に表示されます。)
alignを指定したままでこれを直すには、2つ目のTABLEタグの前に、
<BR clear="all">
を入れます。これは一切の回り込みを解除するタグです。
</p></div>
<p></p>
の部分はstarfloraさんの言う通り不要ですので、これの代わりに上記タグを入れてあげるとよいでしょう。
ご回答有り難うございました。助かります。
align="left"が何故いけなかったのか良く判りました。
回り込み禁止タグも、使用したいと思います。
実はフリーソフトのHTMLエディタで書いているのですが、
理解の無いまま使いこなすには少々無理があったようです;

No.3
- 回答日時:
<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指定のミスもご指摘頂き、重ねてお礼申し上げます。早速削除します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
どんなにやってもできないんです。
-
HTMLのJavaScriptが動作しない
-
どうやったらこの画像を一番下...
-
【HTML】 イメージの貼り付けと...
-
1ページにテーブルを複数設定...
-
WebにてExcelを生成してダウン...
-
テーブルで3セル作った行の下に...
-
テーブル全体の枠線の色を変え...
-
テーブルリンクで別ウインドウ...
-
縦書きホームページの段組表示
-
テーブルの中のグラデーション...
-
Divの幅指定を無視して子テーブ...
-
Tableずれ
-
スタイルシートで出来ますか?
-
IE11のCSSに関する質問
-
スタイルシートで<table>の内側...
-
CSSで分からないところがあります
-
ブラウザやディスプレイによる...
-
文字数によってsubmitできない
-
楽天オークション HTMLエラー
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
table内で画像と文字をセンター...
-
<td> 内のテーブルを上寄せにす...
-
Excelで可視部分だけをWeb形式...
-
テーブルで3セル作った行の下に...
-
HTMLでテーブルを縦に並べたい!
-
チェックボックスにチェックを...
-
Webの表で画像を並べたい
-
WebにてExcelを生成してダウン...
-
CSS line-height が効かない
-
perlについて質問があります。
-
テーブルとテーブルの間に、隙...
-
クリック後、TABLEの幾つかのセ...
-
セルからリンクを貼るのは間違...
-
文字サイズ変更でテーブル要素...
-
表の中でのフォーム
-
テーブルタグの高さ指定
-
オンマウスでプルダウンメニュ...
-
テーブルをスマートなソースで...
-
オンマウスで…
-
Dreamweaverでソースが横一列に...
おすすめ情報