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 回答日時： 2011/03/31 12:43

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

TABにするか、削る。

この回答へのお礼

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

お礼日時：2011/03/31 14:25

No.5 回答者： sweyuki 回答日時： 2011/03/31 13:19

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

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

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

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

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

この回答へのお礼

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

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

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

お礼日時：2011/03/31 14:41

No.4 回答者： outbrave 回答日時： 2011/03/31 13:14

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

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

この回答へのお礼

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

お礼日時：2011/03/31 14:36

No.3 回答者： naokita 回答日時： 2011/03/31 12:51

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>

この回答へのお礼

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

お礼日時：2011/03/31 14:33

No.1 回答者： makkie33 回答日時： 2011/03/31 12:36

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が問題なのか、解決しませんでした。

お礼日時：2011/03/31 14:18