• ベストアンサー

テーブルが一行下がる・・・

HTMLを作成していて、横一列に並べたいのに何故か一行下がってしまいます。 具体的には、 <TABLE width="50" border=1 align=left> <TBODY> <TR><TD noWrap align=middle>項目A</TD> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> </TABLE> <TABLE width="20" border=1 align=middle> <TBODY> <TR><TD noWrap align=middle>タイトル</TD></TR> </TBODY> </TABLE> <TABLE width="50" border=1 align=right> <TBODY> <TR><TD noWrap align=middle>項目B</TD></TR> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> というソースで、「項目A」→「タイトル」→「項目B」と横一線に並べたいのですが、何故か「項目B」が一行下がって表示されます・・・ HTMLを作るのは初めてで、色々と調べたのですがよく分かりませんでした・・・。 どなたか助けてください!! よろしくお願い致しますm(_ _)m

  • HTML
  • 回答数5
  • ありがとう数4

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

  • ベストアンサー
  • a-kuma
  • ベストアンサー率50% (1122/2211)
回答No.4

No.3 で書いた二つ目の方は、ちょっと間違いもあったんで、実際に書いて、 確認してみました。ちょっとタイトルが大きいのかもしれないけど、調整は 可能ですよね。 <HTML> <body> <TABLE width="100%" border=0> <tr> <td width="20%"> <TABLE width="50" border=1> <TBODY> <TR><TD noWrap align=middle>項目A</TD> </tr> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> </TABLE> <td valign="top"> <TABLE width="100%" border=1> <TBODY> <TR><TD noWrap align=middle>タイトル</TD></TR> </TBODY> </TABLE> <td width="20%"> <TABLE width="50" border=1 align="right"> <TBODY> <TR><TD noWrap align=middle>項目B</TD></TR> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> </table> </table> </body> </HTML>

dongurineko
質問者

お礼

ありがとうございます!! 教えていただいたものでほぼ大丈夫でした!! 助かりました・・・・ ありがとうございました!!

その他の回答 (4)

  • xruz
  • ベストアンサー率50% (72/143)
回答No.5

left、middle、rightの順にテーブルを定義されてますが、 left、right、middleの順で定義してみてください。

dongurineko
質問者

お礼

ありがとうございます!! 上手くいきました!! またよろしくお願いします♪

  • a-kuma
  • ベストアンサー率50% (1122/2211)
回答No.3

「こうやりたい」という気持ちは伝わってきますが、それはブラウザまで届いて いません。 三つの TABLE タグが、左・中央・右と指定されていますが、その三つが お互いに関係していることがブラウザには分かっていません。 あくまでも、その一つの TABLE に対して、できるだけ中央にしよう、という 動きをするだけです。項目Bは、一行下がっているのではなく、タイトルの テーブルの下に居るだけなんです。 というわけで、思い付く解決方法を二つ。 align の left、right は思ったより強いので、項目A、項目B、タイトルの 順に TABLE を書いてみましょう。質問の範囲であれば、期待通りの表示に なるようです(Netscape でのみ確認)。 ただ、この方法は、それぞれのテーブルの大きさや形に依存しそうなので、 正攻法としては、三つのテーブルを持つ大きなテーブルを作ることが、一番 確実な方法です。 <table width="100%" border=0> <tr width="40%"><td>   <table>   項目Aのテーブル内容をここに   </table> <tr><td>   <table>   タイトルの内容をここに   </table> <tr width="40%"><td>   <table>   項目Bのテーブル内容をここに   </table> </table> 多少はしょってますが、こんな感じです。

dongurineko
質問者

お礼

>align の left、right は思ったより強いので、項目A、項目B、タイトルの >順に TABLE を書いてみましょう。質問の範囲であれば、期待通りの表示に >なるようです これをIEでも試してみましたが、上手くいきました!! 記述の順番を変えれば良かったんですね・・・ その下の方法も、今試してみたところではちょっと上手くいかなかったのですが、もう少しやってみると何とかなるかもしれません。 ありがとうございました!!

  • Methyln
  • ベストアンサー率29% (242/823)
回答No.2

以下のようにしてはダメですか? <html> <head> <title>sample2</title> </head> <body> <center><table border=1 WIDTH="50%" > <tr> <td noWrap align=middle Height=80>項目A</td> <td noWrap align=middle>タイトル</td> <td noWrap align=middle>項目B</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </center> </body> </html> 同一のテーブル内での表示なら、あらたにテーブルを作成せずに 同一テーブル内で記述してはどうでしょうか? 意図した表示と違う結果であれば、ごめんなさい。 あなたの表示させたいページの構成が読み取れませんでしたので。

dongurineko
質問者

お礼

ありがとうございます。 せっかくアドバイスいただきましたが、私の表現が悪く、ちょっと違っていたようです。 すみません・・・どう書いたらよいかわかりませんでしたので・・・。 ですが、アドバイスは今後の参考にさせていただきます!!

  • fuzy
  • ベストアンサー率19% (4/21)
回答No.1

こうしたいのでは?と思う記述です。 <TABLE width="50" border=1 align=left> <TBODY> <TR> <TD noWrap align=middle>項目A</TD> <TD noWrap align=middle>タイトル</TD> <TD noWrap align=middle>項目B</TD> </TR> <TR> <TD noWrap align=middle Height=80>(項目Aの内容)</TD> <TD noWrap align=middle Height=80>(タイトルの内容)</TD> <TD noWrap align=middle Height=80>(項目Bの内容)</TD> </TR> </TBODY> </TABLE> どうしてもテーブルを3つ並べてトいうことであれば、 1)項目AのところのTRタグが閉じてない(</TR>がない) 2)項目Bの2行目が無い。 3)最後にTABLEタグが閉じていない(</TABLE>がない) の3つを直せばいいと思います。 #確認はしてませんが...

dongurineko
質問者

補足

すみません、私の書き方が悪かったようです。 私がやりたかったのは、 (1)項目Aと項目Bはページの左右の端にそれぞれ表示。 (2)項目Aと項目Bの下には印鑑を押すぐらいのスペースを設ける(何も無い領域を作る) (3)「タイトル」は枠で囲み、「項目A」の右隣に表示 というやりかたなんです・・・ アドバイスいただいた1~3も試してみましたが、ダメでした・・・(泣) もう、どうしたらよいのやら・・・

関連するQ&A

  • 項目名が勝手に折れる・・・

    HTML超初心者です。 上司から電子書類のHTMLを作るように言われたのですが、項目名が勝手に折れて表示されてしまいます。どうしたらちゃんと一行に表示されるのでしょうか? 下のソースで、「123」の下に「1.たいとる」を一行で表示させたいのですが… 申し訳ありませんが、よろしくお願い致します!! <TABLE width="100%"><TR><TD> <TABLE width="10%" border=1 align=left> <TBODY> <TR> <TD noWrap align=middle>123</TD> <BR></TD> </TBODY> </TABLE> <TABLE width="50%" border=1 align=right> </TABLE> </TD></TR></TABLE> <P><BR> <table> <tr> <TD width="91">1.たいとる</TD>

    • ベストアンサー
    • HTML
  • Dreamweaverのデザインで表示がおかしい時

    IEだと綺麗に表示されるけど、Dreamweaverのデザインで見ると表示がおかしい時って結構あり困ってます。 ソースフォーマットとかやってもやはり駄目です。 今回の場合、どのタグが悪そうでしょうか? <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-JP"> </HEAD> <BODY> <BR> <BR> <BR> <TABLE align="center" cellSpacing=0 cellPadding=0 width="95%" bgColor=#0066cc border=0> <TBODY><TR><TD> <TABLE cellSpacing=2 cellPadding=1 width="100%" border=0> <TBODY> <TR bgColor=#0066cc> <TD align=middle><SMALL><B><FONT color=#ffffff> テキストツール </FONT></A></B></SMALL>&nbsp; </TD></TR> <TR bgColor=#ffffff> <TD align=middle> <TABLE height="400" cellSpacing=0 cellPadding=1 width="95%" border=0> <TBODY> <TR valign=top> <TD width="100%" valign="center" align="center"> <BR><A>トップページ</A><BR><BR> </TD> </TR> <TR valign=top> <TD width="100%" valign="top" align="center"> <A HREF="list">あ</A><BR><BR> <A HREF="clist">い</A><BR><BR> <A HREF="slist">う</A><BR><BR> </TD> </TR> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </BODY></HTML>

  • テーブルの隙間をなくす

    テーブルの中に作ったテーブルを一番上に配置したいのですが、どうすれば良いでしょうか?テーブルの下で改行すると上に行くのですが、それだとしたがあまります。 HTMLはこれです。よろしくお願いします。 <table width="800" border="0" cellspacing="0" cellpadding="0" height="600"> <tr> <td> <TABLE width="100%"> <TBODY> <TR> <TD width="241" height="2">  </TD> <TD width="511" align="right" valign="bottom" style="font-size : 8pt;" height="2"> </TD> </TR> </TBODY> </TABLE> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • tableでレイアウトが崩れる場合

    技術の足りなさからCSSにできなかったので、再度テーブルでサイズを指定してやってみようとしているところです。 どこかの数字がおかしくなっていると思うのですが、どうしてもわかりません。 ちゃんと表示できるブラウザとそうでないブラウザがあり、Firefoxは環境設定により表示が崩れる場合があります。 使用ソフトはビルダーの11です。 なんでも良いのでどうぞアドバイスをよろしくお願い致します。 <body> <div ALIGN="center"> <table> <tbody> <tr> <td CLASS="td4" HEIGHT="70"> <table WIDTH="600" CELLSPACING="1" CELLPADDING="0"> <tbody> <tr> <td VALIGN="top" CLASS="td1" WIDTH="400" ALIGN="left" HEIGHT="180"> <b>文字 <textarea ROWS="15" COLS="70">文字</textarea><br> <br> </td> <td VALIGN="top" CLASS="td1" WIDTH="100" HEIGHT="180"> <table CELLSPACING="0" CELLPADDING="4"> <tbody> <tr> <td CLASS="td2" HEIGHT="16" WIDTH="100">文字</td> </tr> </tbody> </table> 文字 <br> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div> </body>

    • ベストアンサー
    • HTML
  • テーブルだらけのページをスッキリさせたい

    いま、ホームページビルダーで趣味のサイトを作っているところなのですが、 HTMLのことでわからない事があるので教えてください。 現在、大きなテーブルの中にさらに小さなテーブルをいれています。 そのためタグがとてもごちゃごちゃしています。 小さなテーブルはサイト更新の度に追加していく予定なので、 見た目よりデータが重いページになってしまうと思います。 これをなんとかスッキリさせたいのですが 良い方法はあるでしょうか? スタイルシートを使えばいいのでしょうか? どのように使用すれば無駄の無い形になるか 具体的なアドバイスをいただけると助かります。 参考までに作りかけのタグを載せました。 悪い部分等があったら、ぜひお願いします。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>サイト名「タイトル未定」</TITLE> </HEAD> <BODY> <CENTER> <TABLE border="0" cellpadding="0" cellspacing="0" width="840"> <TBODY> <TR> <TD colspan="2" align="center" height="40">サイト名 タイトル</TD> </TR> <TR> <TD colspan="2" align="center">サイトの説明と注意事項</TD> </TR> <TR> <TD colspan="2" height="15"> <HR> </TD> </TR> <TR> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#009900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">チューリップ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月1日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#999900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">さくら</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月2日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> </TR> <TR> <TD align="center"></TD> <TD align="center"></TD> </TR> <TR> <TD colspan="2"> <HR> </TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML>

  • テーブルを作ったんですが…

    はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>

  • ASP修正について

    下記のソースを書いています。 印刷ボタンと閉じるボタンがうまく表示されない。ボタンクリック表示されない。 不要なところは削除してもかまいません。 教えてください。 sResult = sResult & _ " </TR></TBODY></TABLE><BR>" & _ "<TABLE border=^0^><TBODY>" & _ " <TR>" & _ " <TD width=^354^><FONT size=^-1^ color=^#0099ff^></FONT></TD>" & _ " </TR><TR>" & _ " <TD><FONT size=^-1^>" & _ "  " & _ "  " & _ "  " & _ "  " & _ "  " & _ "  </FONT></TD>" & _ " </TR>" & _ "</TBODY></TABLE>" & _ "<input type=^button^ value=^印 刷^ onclick=^window.print()^>  <input type=^button^ value=^とじる^ onclick=^link()^>" & _ "<BR><BR><TABLE border=^0^ align=^center^><TBODY>" & _ " <TR><TD align=^center^>" & _ " <br><B>処理が完了しました。ご依頼ありがとうございます。<BR>" & _ " [印刷] ボタンをクリックすると、このページの内容をプリントアウトできます。<BR>" & _ " [印刷] ボタンが表示されない場合は、ブラウザの印刷機能をご利用ください。</B>" & _ " </TD></TR>" & _ "</TBODY></TABLE>" & _ "<BR></CENTER>" & _ "<TABLE border=^0^><TBODY>" & _ " <TR><TD><FONT size=^-1^>" & _ " " & _ " </FONT></TD>" & _ " </TR>" & _ "</TBODY></TABLE>" & _ "<BR></FONT>" & _ "<TABLE border=^0^ width=^660^ cellpadding=^1^ align=^center^><TBODY>" & _ " <TR><TD width=^911^ align=^center^>" & _ " <A href=^^>" & _ " <IMG src=^img/index.gif^ alt=^indexページへ^ border=^0^ height=^20^ width=^80^ align=^center^></A>" & _ " </TD></TR>" & _ "</TBODY></TABLE>" & _ "</FORM></BODY>" & _ "</L>"

  • テーブルの上下線を消したい

    タイトル通り、テーブルの上下だけの線を消したいのですが、 どのように書けば消えるのでしょうか? 一応今のものは <TABLE border="0" width="290" bgcolor="#ffffff" cellspacing="1" cellpadding="10" style="border:dotted 1px #000000"> <TBODY> <TR><TD valign="top" align="right" width="290" bgcolor="#ffffff" height="800"> <P> </P><p> </p> <DIV align="right"> ○○○ </DIV> </TD> </TR> </TBODY> </TD> </TR> </TBODY> </TABLE> です。お願いします。

    • ベストアンサー
    • HTML
  • 添付のような飾り枠内に箇条書きを配したものを作ったところ、1行目が枠の

    添付のような飾り枠内に箇条書きを配したものを作ったところ、1行目が枠の下端に近づくのですが、枠の内側に均等に余白を入れ、文章全体が中央に行くようにするにはどうしたらよいでしょうか。 <TABLE cellspacing="3" bgcolor="#dfe8bd"> <TBODY> <TR> <TD> <TABLE background="red.gif"> <TBODY> <TR> <TD></TD> <TD height="5"></TD> <TD></TD> </TR> <TR> <TD width="10"></TD> <TD align="center"> <TABLE bgcolor="#e1e9c2" width="100%" cellspacing="2"> <TBODY> <TR> <TD bgcolor="#e6ffe6" width="649" height="147"> <IMG src="tyoutin.gif" width="70" height="90" border="0" hspace="15" vspace="20" align="right"> <dl> <DD>日付 ○○○○○○○○○○○○○○○<br><br> <DD>日付 ○○○○○○○○○○○○○○○<br><br> <DD>日付 ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </dl> </TD> </TR> </TBODY> </TABLE> </TD> <TD width="10"></TD> </TR> <TR> <TD></TD> <TD height="5"></TD> <TD></TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE></center>

  • 次のテーブルで

    <table border=1> <caption nowrap align=left> あいうえおかきくけこ<br/> </caption> <tr><td nowrap colspan=3>abc</td></tr> <tr><td nowrap>A</td><td nowrap>B</td><td nowrap>C</td></tr> <tr><td nowrap>A</td><td nowrap>B</td><td nowrap>C</td></tr> <tr><td nowrap>A</td><td nowrap>B</td><td nowrap>C</td></tr> <tr><td nowrap colspan=3 height=15></td></tr> <tr><td nowrap colspan=3>abc</td></tr> <tr><td nowrap>A</td><td nowrap>B</td><td nowrap>C</td></tr> <tr><td nowrap>A</td><td nowrap>B</td><td nowrap>C</td></tr> </table> "あいうえおかきくけこ" が折り返されてしまいます 折り返さずにしかもそのサイズにテーブルを広げる方法はないでしょうか?

    • ベストアンサー
    • HTML