HTML表の上部にはみ出た空白が出る

このQ&Aのポイント
  • HTMLで書いた表の上部にはみ出た空白が発生しています。表の行数が増えるにつれて、空欄の高さも長くなってしまいます。この問題を解決する方法を教えてください。
  • HTML表の上部に白い空白が出現する原因が分かりません。表の行数が増えると同時に空欄の高さも増え、白い部分が表示されます。この問題を解決する方法を教えてください。
  • HTMLで作成した表の上部に白い空白が表示されています。表の行数が増えると、空欄の高さも長くなってしまいます。この問題を解決する方法を教えてください。
回答を見る
  • ベストアンサー

HTMLで書いた表の上部にはみ出た空白が出る

HTMLで書いた表の上部に空白部分が表をはみ出てきてしまいます。たとえば11列の表を作りました。しかし行が増えるに従って、表の上部にはみ出た空欄が出て空欄の高さが長くなってきます。どういう指定をすれば表だけになって、この白い部分はなくなるか教えて下さい。あるいは最後のところのHTMLが不足しているとか。 <TABLE> <TABLE BORDER=5 WIDTH=800> 一列目 <TR bgColor=#f0ffff> <TD width=30>1</TD> <TD width=100>7/18(月)</TD> <TD width=500>成田発<BR>ミュンヘン着</TD> <TD width=300>午前<BR>午後</TD> 同じように10列の表があるとする。 最後</TABLE> 同じように11列くらい書いていると 上部に白い空白が出来てくる。なぜでしょうか。

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.3

前回答者です(#2の補足も拝見済み) ----------------------- アドレスを書いて良いかどうかは知りませんし、検証出来る場合と出来ない場合があります。当然都合もあります。 ----------------------- 自分で書いたソースがそのまま正確に反映されるなら、検証ができますが、 ここまでの経緯いから推測すると、 どうも、内部的にソースが追加されているようなので、そのシステムを利用してみないと、外からURLを検証しただけでは原因の追及は困難です。 そのサービスのサポートやユーザー掲示板・フォーラムなどでご相談下さい。 外部からHTMLの不具合などの原因を追及するには、下記のページから検証もしてみて下さい。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 残念ながら、内部的な不具合の原因などは、 これだけの情報では誰にも想像できませんって事です。

その他の回答 (2)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

前回答者です(補足拝見済み) ----------------------- とりあえず、1行にしたら、その分のスペースが消えたという事ですね。 しかし、 残念ながら、補足説明での状況がわかりません・・・ 説明文が何処の何なのかとか、 >白い部分が消えた分だけ間があいています とか意味や状況がわかりません。 ただ、補足での様子から間違いを指摘するなら、 <TABLE><TABLE BORDER=5 WIDTH=800><TR vAlign=top ALIIGN="RIGHT"><TR bgColor=#f0ffff> これは変です。 本来は、 <table><tr><td> の順に並ぶので、 <table><table><tr><tr><td> とはなりませんよ・・・ </HEAD> の次に <HR NOSHADE> のような、いきなり罫線も変ですね。 </HEAD>以前の部分は、ブラウザ上では非表示のmetaなどのhead内情報しかありませんよ。 質問状況以外の所でも、根本的に何かが間違っていると思います。 ファイルを全検証しないと無駄な予想しかできませんし・・・ >自作ホームページです。 という事はそもそも、ブログでもCMSでもないと思いますから それで、改行が反映されるのは変ですね・・・ テキスト埋め込み型のウェブサービスでしょうか? これは、HTML仕様のHTMLファイルをウェブブラウザで見た時の話ですか? 何かが違うようで、回答するのに非常に違和感があります・・・ ウェブ画面を表示したまま右クリックでソースを表示して、 自分で記述したソースと同じになっていますか?

asanogawa
質問者

お礼

文章のてにおはが間違っていました。訂正します。なお、若干ご指摘のように訂正しました。基本的には表示に変化はありませんでした。ソースはサーバーにアップロードすると自分ではわからない難しいプログラムが沢山追加されています。自動的にそうなるものであると解釈しています。 早速メッセージすみません。素人で勉強して10年以上ホームページを作って流しています。検索も十分機能しています。ある意味での業務用です。 ここにホームページのアドレスを書けば私の意図するするところがわかっていただけるのですが、書いてもいいものでしょうか? 上記についてはご指示のようにちょっとこれからさわってみますが。

asanogawa
質問者

補足

早速メッセージすみません。素人で勉強して10年以上ホームページを作ってながいしています。あり意味での業務用です。 ここにホームページのアドレスを書けば私の意図するするところがわかっていただけるのですが、書いてもいいものでしょうか? 上記についてはご指示のようにちょっとこれからさわってみますが。

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

多分ですが、ブログやCMSで投稿してませんか? 自動改行分が付加されてるのでしょう。 それなら、1行にするか自動改行をOFFにするかの選択。 例:1行にするとは、改行を無くす事。 <TABLE BORDER=5 WIDTH=800><TR bgColor=#f0ffff><TD width=30>1</TD><TD width=100>7/18(月)</TD><TD width=500>成田発<BR>ミュンヘン着</TD><TD width=300>午前<BR>午後</TD> それと、多分、仕様はXHTMLだと思うので 小文字 や " " を使った方が良いと思いますが・・・

asanogawa
質問者

補足

いや嬉しい。見事に消えました。自作ホームページです。知りませんでした。いい勉強させてもらいました。 ところで白い部分は消えましたが、表と上部の説明文はHR shadeで線を引いています。その間には<BR>は一つも入れていませんが、白い部分が消えた分だけ間があいています。詰めるにはどうしたらいいでしょうか。教えていただけますか>? </HEAD><HR NOSHADE><TABLE><TABLE BORDER=5 WIDTH=800><TR vAlign=top ALIIGN="RIGHT"><TR bgColor=#f0ffff><TD width=30>1</TD><TD width=100>7/18(月)</TD><TD width=500>成田発<BR>ミュンヘン着</TD><TD width=300>午前<BR>午後</TD><TD width=600>航空機</TD><TD>欧州主要都市経由ミュンヘンへ<PRE>  ミュンヘン泊</PRE></TD></TR> 嬉しい!!

関連するQ&A

  • このような表をもっとスッキリさせるには?

    <table bgcolor="#000000" table style="font-size:12px" cellspacing="1" cellpadding="5" width="500" height=""> <colgroup width="20%"> <colgroup width="30%"> <colgroup width="50%"> <tr><td bgcolor="#FFFF00">あああ</td><td bgcolor="#FFFFFF">ああああ</td><td bgcolor="#FFFFFF">あああああ</td></tr> <tr><td bgcolor="#FFFF00">いいい</td><td bgcolor="#FFFFFF">いいいい</td><td bgcolor="#FFFFFF">いいいいい</td></tr> <tr><td bgcolor="#FFFF00">うううう</td><td bgcolor="#FFFFFF">うううう</td><td bgcolor="#FFFFFF">ううううう</td></tr> </table> ↑こんな感じで表を作っています。 【bgcolor="#FFFFFF"】のようなものがやたらに多いので、CSSを使ってもっとスッキリさせたいのですがどうCSSタグを配置したらよいのかわかりません。。 お分かりの方、是非教えてください!!

  • HTMLで表を横並びにしたくて、下記のような表を作りました。

    HTMLで表を横並びにしたくて、下記のような表を作りました。 この表をもう一つ右隣に作りたいのですが、どうもうまくいきません。 何を付け足せば横に並んでくれるのでしょうか? <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><br> </tr>

  • 書いたHTMLを見てもらえないでしょうか

    HTMLで困ってしまいました… <table width=100 rules="cols" border=1 align="right" cellspacing="0" cellpadding="0"> <TR bgcolor=white><TD><img width=100 height=100 src="test.jpg"></TD></TR> </table> たくさんあそんだ土曜日<br> 楽しかった日曜日<br> <table width=1000> <TR bgcolor=pink><TD>休日明け</TD></TR> </TABLE> ネコと遊んだ月曜日<br> 買い物をした火曜日<br> よくわからない木曜日<br> テレビをよく見た金曜日<br> 上記のようなソースを作ったのですが、IEで表示すると <table width=1000> <TR bgcolor=pink><TD>休日明け</TD></TR> </TABLE> この部分が画像の部分にかぶさって表示されてしまいます。 「width=1000」の数字を少なくする方法も試したのですが、 ウィンドウを小さくすると又画像にかぶさって表示されてしまって悩んでいます。 どうすれば、かぶさらないように表示できるのでしょうか。 どなたか詳しい方教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 表の中のテキストを中央ではなく上部に表示したい

    現在、ホームページビルダーVer.14でホームページ作成中です。 1行1列の表を作成し、中にテキストを入力しましたが、表の中央に表示されてしまいます。 表の上部に表示したいので、下記のように入力しましたが、表の中央に表示されうまくいきません。 在庫あります)。<br> の後ろに</font>を入力しても「エラーを検出しました」というメッセージが表示され消されてしまいます。 <table border="0" bgcolor="#ffffff"> <tbody> <tr> <td width="301" height="433"><span style="line-height10%> <font size=" -1">年末年始は、12月30日から1月3日までお休みになります。<br> <br> インフルエンザワクチン予約受付、接種実施中。<br> 料金:1回3000円<br> <br> 四種混合ワクチンの予約を始めました(接種は11月2日より、在庫あります)。<br> </span>&nbsp;</td> </tr> </tbody> </table> 表の上部に表示する方法につきご教示ください(HTML)。 OSは、Windows7 Home Premiumです。よろしくお願い致します。

  • HTMLの表で幅を指定しても折り返すことは無理なのでしょうか?

    以下のHTMLの表は横幅を指定していますが、 すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか? <html> <head> <title>table</title> </head> <body> <table width="570" border="1"> <tr><td width="130"> test1</td> <td bgcolor="#CCCCCC" width="440"> oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </td></tr></table> </body> </html>

    • ベストアンサー
    • HTML
  • エクセルでのHTMLの表の切替(行・列切替も)

    こんにちは。 お世話になります。 ショッピングサイトで表示中のサイズ表を新たなデザインに変えることにしました。 具体的には下記に記載の通りです。 元は横に伸びる表記だったものをこのタイミングで縦に伸びる表記に変えます。 また、デザインもよりシンプルなものになります。 このアイテム1点であればこれにて作業完了なのですが、 1000点ともなると、仕組みを作った方がはるかに早いのですが、 手法が頭に浮かびません。 新レイアウトにするのは、エクセル上でひな形の表を作って、それをマクロでボタンを押せば 一気にHTMLのTABLEタグ付きで出力すればイケるかも、と思いました。 ではそのひな形の表を現在のHTMLタグから起こすには… 想像ができませんでした。 それともそもそもまったく違う手法の方が簡易…?難しいです。 よろしければご教示いただけないでしょうか。 ちなみに袖丈があるものもあったり、アイテムによって形状・揃えているサイズ展開が違うため、 テーブルの行や列はアイテムによって変わってきてしまい、○行○列のものです、と いうことはできません。 -------------------- ※現在のサイズ表である↓を <font color=#000000 size=3><b>サイズ表</b></font><br><table width=300 cellspacing=0 cellpadding=2 bgcolor=#FFFFFF><tr><td bgcolor=#66CC66><table width=100% cellspacing=1 cellpadding=1 bgcolor=#FFFFFF><tr><td bgcolor=#99CC99><table width=100% cellspacing=0 cellpadding=20 bgcolor=#FFFFFF><tr><td bgcolor=#FFFFFF align=left><font color=#000000 size=3><table border=1 width=420><tr><td width=60></td><td width=60>92cm</td><td width=60>98cm</td><td width=60>104cm</td><td width=60>110cm</td><td width=60>116cm</td><td width=60>122cm</td></tr> <tr><td width=60>総丈</td><td width=60>54cm</td><td width=60>57cm</td><td width=60>60cm</td><td width=60>63cm</td><td width=60>66cm</td><td width=60>69cm</td></tr> <tr><td width=60>身幅</td><td width=60>26cm</td><td width=60>27cm</td><td width=60>28cm</td><td width=60>29cm</td><td width=60>30cm</td><td width=60>31cm</td></tr></table><br>※平置きでの採寸になるので、若干の誤差はご了承ください。<br></font></td></tr></table></td></tr></table></td></tr></table> 新しい以下のサイズ表表記に切り替えたいです。 【サイズ表】 <table> <tr> <th scope="row">年齢・身長</th> <th scope="row">総丈</th> <th scope="row">身幅</th> </tr> <tr> <th scope="row">92cm</th> <td>54cm</td> <td>26cm</td> </tr> <tr> <th scope="row">98cm</th> <td>57cm</td> <td>27cm</td> </tr> <tr> <th scope="row">104cm</th> <td>60cm</td> <td>28cm</td> </tr> <tr> <th scope="row">110cm</th> <td>63cm</td> <td>29cm</td> </tr> <tr> <th scope="row">116cm</th> <td>66cm</td> <td>30cm</td> </tr> <tr> <th scope="row">122cm</th> <td>69cm</td> <td>31cm</td> </tr> </table> ※平置きでの採寸になるので、若干の誤差はご了承ください。 <br> ちなみに、新しいサイズ表は、サイズ表以外の他の商品情報とともに 以下のスタイルで定義されています。 <style> .sc-table-01{width: 320px;font-size: 0.9em;} .sc-table-01 table{ border-collapse:collapse; margin: 5px; width: 100%; } .sc-table-01 th{ font-style: normal; font-size: 0.9em; color: #000; background-color: #FFD6C1; border: 1px solid #999; padding: 6px; white-space: nowrap; line-height: 150%; } .sc-table-01 td{ border: 1px solid #999; font-size: 0.9em; padding: 10px; line-height: 150%; } </style> <div class="sc-table-01">

  • HTMLの質問・・段落のしたかを教えてください。

    ホームページを制作しています。かなりのド素人です。 このカテゴリーじゃない気もしますが。。どうか教えてください。 下記の黄色■の横にあああああが来るようにするには どうすればよいのでしょうか?何か消すのでしょうか? 教えてください。 <table bgcolor="#FFFF00" border="1px" bordercolor="#c0c0c0" cellspacing="1" cellpadding="5" width="10px" height="15px"> <tr><td bgcolor="#FFFF00" align="left" valign="top"></td><tr> </table><font color="#44C600">ああああああ</font><br>

  • HTMLでテーブルを作成すると上に大きなスペースが空いてしまいます。

    HTMLでテーブルを作成すると上に大きなスペースが空いてしまいます。 色々ネットで検索して他の方がおっしゃる通りためしてみたのですができなくて困っています。 できないのは下記の二点です。 間違ってるところがあればご教授下さい。 1. <table width=600 border="5" bgcolor=#FFC0CB> 2. <table width=800 border=0 cellpadding=30 cellspacing=0 bgcolor=#FFB6C1><tr> <td width=0%><br></td></tr><tr> <td width=0%><br></td> <td align=left> <font color=#696969 size=3> よろしくお願いしますm(__)m

  • 【HTML5】テーブルデータの空白部分について

    あるテキストで見かけた表の作成方法です。 添付してある画像の一番下の行に空白が2つあります。 このテキストでは空白部分に<br>が使ってあります。 <br>は一般的に改行するときに使用すると他のテキストやサイトに書かれています。 空白の場合はCSSで幅、高さなどの調整するものだと思っていました。 table内に空白のデータがある場合、<br>を入れておくというのは通常現場などでも使われている方法なのですか? 空白のデータは皆さんはどのように処理なされているのでしょうか? 実務経験のない初心者です。まだ勉強中のものです。 よろしくお願いします。 <table> (略) <tfoot> <tr> <th>計</th><td><br></td><td><br></td><td>160</td> </tr> </tfoot> </table>

    • ベストアンサー
    • HTML
  • 1pxの表を重ねたときにその重ねた部分が2pxになってしまいます

    列数が違う表を重ねたのですが重ねた部分が2pxになってしまうので 重ねた部分も1pxで表示させたいのですがどうすればいいのでしょうか? ソースはこちらです <TABLE BORDER="0" WIDTH="400" CELLSPACING="1" CELLPADDING="5" BGCOLOR="#1C79C6"> <TR BGCOLOR="#E3F0FB"> <TD>あ</TD> <TD>い</TD> </TR> <TR BGCOLOR="#E3F0FB"> <TD>う</TD> <TD>え</TD> </TR> </TABLE> <TABLE BORDER="0" WIDTH="400" CELLSPACING="1" CELLPADDING="5" BGCOLOR="#1C79C6"> <TR BGCOLOR="#E3F0FB"> <TD>↑の部分が2pxになるのを防ぎたいです</TD> </TR> </TABLE> 宜しくお願い致します。

    • ベストアンサー
    • HTML