HTMLで文とテーブルの間が空く。

質問

現在ＨＴＭＬとＣＳＳでホームページを作成しています。
それで文とテーブルの間に意図しない空欄ができてしまいます。
この理由と対策を教えてください。

ＨＴＭＬは↓
<div id="contents">

<div id="main">
<h2>会社概要</h2>
　　　　　 <table class="table">
　　　　　　<tr>
　　　　　　<th>社名</th>
　　　　　　<td></td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　<th>所在地</th>
　　　　　　<td></td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　<th>代表者</th>
　　　　　　<td></td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　<th>設立</th>
　　　　　　<td></td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　<th>資本金</th>
　　　　　　<td></td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　<th>従業員数</th>
　　　　　　<td></td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　<th>関連会社</th>
　　　　　　<td></td>
　　　　　　</tr>
　　　　　 </table>
</div><!-- main end -->

<div id="totop">
<p><a href="#top">ページのトップへ戻る</a></p>
</div><!-- totop end -->

</div><!-- contents end -->

です。

この会社概要<h2>と<table>の間に十数行の空欄ができます。

ＣＳＳを取り除いてＨＴＭＬだけにしても、こう表示されます。
ご回答お願いします。

回答No.2

localica · ベストアンサー

全角スペースを使っているからでしょう。

TABにするか、削る。

お礼

回答ありがとうございました。
スペースを削ってみたら、きれいに改行がなくなりました。

回答No.5

sweyuki

十数行の空欄、と言うのは装飾上のスペースなのかテキストとしての改行なのか…。

改行が挿入されているのであれば、#2さんと#3のおっしゃるあたりが怪しいですね。

改行ではなく単純にスペースなのであれば、#1さんのおっしゃるmarginかもしくはline-heightあたり。paddingの可能性もありますが。
まあ、CSS完全にオフの状態でも出るのであれば改行<br>なんでしょうね。

ところで、#1さんがテーブルレイアウト云々と仰っていますが、こういった会社概要のコンテンツはテーブルで組むのはごく当たり前、正しい記述です。まぎれもなく「表」ですので。見せ方として全く異なる手法を用いる場合もありますが。

もしサイト全体をテーブルで組んでいるなら確かに問題ではあります。

お礼

CSSをオフにしてもなるので変だなぁとは思っていたんですが、テキスト上見やすくするスペースが犯人だとは・・・

あと、レイアウトはテーブルでは作成していません。
今のところ、ここだけをテーブルにする予定です。

回答ありがとうございました。

回答No.4

outbrave

ANo.2さんに賛同します。

□□□□□ <table class="table">
□□□□□□<tr>
以下、同様に全角スペースが入っていますので削除してください。

お礼

とても分かりやすい回答ありがとうございました。
これだけの情報で、解決法がわかるのはすごいです。
スペースには気をつけます。

回答No.3

naokita

NO.1さんのマージンではないとすれば、
CMSなどのシステム側でテキストの改行部分に br を混入するという素人仕様だからです。
表示されたHTMLを見れば、テーブルの各セル部分に br があるはずです。

テキスト部分の改行を反映しない設定にするか、
HTMLか書く場合には、改行をせずに１行に書くかの二択です。
１行とは、具体的には、
<h2>会社概要</h2><table class="table"><tr><th>社名</th><td></td></tr><tr><th>所在地</th><td></td></tr><tr><th>代表者</th><td></td></tr><tr><th>設立</th><td></td></tr><tr><th>資本金</th><td></td></tr><tr><th>従業員数</th><td></td></tr><tr><th>関連会社</th><td></td></tr></table>

お礼

分かりやすい説明とご回答ありがとうございました。
犯人は、必要のないところにあるスペースでした。

回答No.1

makkie33

CSSで、tableのmarginを設定していませんか？

CSSのtableで
margin:10px 10px 10px 10px;
と言う記述がありませんか？（数字は適当です。）
もしくは、
margin-top:10px;
の様な記述です。

marginは、tableの外側の余白の設定なので、
これを「0」にすれば不自然な余白は無くなると思います。

参考までに
「会社概要」をtableの中に入れてしまえば、
このmarginに振りまわされる事はないのでは？と思いますが…

そもそも、レイアウトするのにtableを使ってしまってるあたりで問題ですが…。

お礼

回答ありがとうございました。
テーブルのmarginには、デザインの関係上0px 0px 10px 0pxで設定しています。
また、h2にもmarginのbottomには設定していません。

CSSは外部ファイルでして、一回削除したりもしましたがHTMLが問題なのか、解決しませんでした。