マルシェル新規登録で5000円分当たる

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

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>の間に十数行の空欄ができます。

CSSを取り除いてHTMLだけにしても、こう表示されます。
ご回答お願いします。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

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



TABにするか、削る。
    • good
    • 0
この回答へのお礼

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

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

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



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

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

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

もしサイト全体をテーブルで組んでいるなら確かに問題ではあります。
    • good
    • 0
この回答へのお礼

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

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

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

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

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



□□□□□ <table class="table">
□□□□□□<tr>
以下、同様に全角スペースが入っていますので削除してください。
    • good
    • 0
この回答へのお礼

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

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

NO.1さんのマージンではないとすれば、


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

テキスト部分の改行を反映しない設定にするか、
HTMLか書く場合には、改行をせずに1行に書くかの二択です。
1行とは、具体的には、
<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>
    • good
    • 0
この回答へのお礼

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

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

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



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

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


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

そもそも、レイアウトするのにtableを使ってしまってるあたりで問題ですが…。
    • good
    • 0
この回答へのお礼

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

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

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

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブルとテーブルの間隔について

同じサイズのテーブル縦にいくつか並べているのですが、今現在は全く隙間無くくっついています。

これを少しだけ(改行タグ<br>の半分以)間隔を空けたいのですが、どうすれば良いのでしょうか?

Aベストアンサー

一番シンプルな方法としては
<table>タグを<table style="margin-bottom:○○px">と書き直します。

Qテーブルとテーブルの間に、隙間があいてしまいます。

お世話になります。
表題のとおりです。

下記ソースのテーブル<!-- 丸枠 -->と<!-- ヘッダ -->間は、問題ないのですが
テーブル<!-- ヘッダ -->と<!-- ロゴ -->の間に隙間が開いてしまいます。
1時間ほど考えましたが、どうにもこうにも理由が分かりません。
初心者的なソースで恐れ入りますが、詳しい方にご助力いただければ幸いです。

---------------------------以下ソース--------------------------------------
<body>
<!-- 背景白 -->
<table border="1" cellpadding="0" cellspacing="0" class="table_white">
<tr>
<td>
<!-- 丸枠 -->
<table width="820" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="image/head.gif" width="820" height="9" /></td>
</tr>
</table>
<!-- 丸枠ここまで -->
</td>
</tr>
<tr>
<td align="center">
<!-- ヘッダ -->
<table width="730" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="324" height="15" align="left" >
<strong class="seo01">ミ</strong></td>
<td width="203"></td>
<td width="5" align="center"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
<td width="42"><a href="kaisya.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','image/head_kaisya_ov.gif',1)"><img src="image/head_kaisya.gif" alt="会社概要" width="42" height="11" border="0" id="Image4" /></a></td>
<td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
<td width="61"><a href="toiawase.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('問い合わせ','','image/head_toiawase_ov.gif',1)"><img src="image/head_toiawase.gif" alt="お問い合わせ" width="61" height="11" border="0" id="問い合わせ" /></a></td>
<td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
<td width="62"><a href="sitemap.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sitemap','','image/head_sitemap_ov.gif',1)"><img src="image/head_sitemap.gif" alt="sitemap" width="62" height="11" border="0" id="sitemap" /></a></td>
<td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
</tr>
</table>
<!-- ヘッダ ここまで-->
</td></tr>
<tr>
<td align="center">

<table width="730" border="0" cellspacing="0" cellpadding="0">
<!-- ロゴ -->
<tr>
    <td colspan="13" align="left"><a href="http://www.com/"><img src="image/logo.gif" alt="ミ" width="92" height="48" border="0" ></a></td>
</tr>
<!-- ロゴ ここまで -->
---------------------------ソースここまで--------------------------------------

---------------------------念のため使用CSS--------------------------------------
body {
font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
font-size: 12pt;
font-weight: normal;
color: #5c5c5c;
background-color: #889fb6;
margin-left: 30px;
margin-top: 30px;
letter-spacing: 2.5px;
line-height: 18px;
}


.table_white {
background-color: #FFFFFF;
width: 820px;
}

.seo01 {
font-size: x-small;
letter-spacing: normal;
font-weight: normal;
}

---------------------------ここまで--------------------------------------

お世話になります。
表題のとおりです。

下記ソースのテーブル<!-- 丸枠 -->と<!-- ヘッダ -->間は、問題ないのですが
テーブル<!-- ヘッダ -->と<!-- ロゴ -->の間に隙間が開いてしまいます。
1時間ほど考えましたが、どうにもこうにも理由が分かりません。
初心者的なソースで恐れ入りますが、詳しい方にご助力いただければ幸いです。

---------------------------以下ソース--------------------------------------
<body>
<!-- 背景白 -->
<table border="1" cellpadding="0" cellspacing="0" cl...続きを読む

Aベストアンサー

オリジナルのソースもこの通りなのでしたら、

<!-- ロゴ -->
<tr>
※    <td colspan="13" align="left"><a href="http://www.com/"><img src="image/logo.gif" alt="ミ" width="92" height="48" border="0" ></a></td>
</tr>
<!-- ロゴ ここまで -->

※のところに全角スペースが4つも入ってます。ソースをインデントしたければ、タブを使用して下さい。<tr>の直下には子要素である<th>もしくは<td>しか入れません。テキストデータが素のままで入る事は有り得ません。

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q 内のテーブルを上寄せにするには?

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
</table>
</td>

<td width="800" height="1200" border="1">

</td>
</tr>
</table>

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
...続きを読む

Aベストアンサー

TABLE Aを入れているtdに対してvalign="top"を入れると
解決しますよ。

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qテーブルの上に空行が入る・・・消したい!

http://oshiete1.goo.ne.jp/kotaeru.php3?q=558624
の質問と同じ現象だと思うのですが、
下記のコード(時刻表をつくりたいのです)をメモ帳で書き、IE6.0で表示させたたところ、
テーブルの上の方にテーブルの長さの3倍ほどの空行が表示されてしまいます.
過去の質問では、質問者さんが自己解決されているようで、しかもなにかツールを使ってコードを書いているようでしたので、メモ帳で直接コードを書いている場合の解決方法を教えてください.
----
<html>
<body>
 <table border="1" cellpadding="0">
<tr>
    <th>時</th>
<th>平日</th>
<th>土曜</th>
<th>休日</th>
</tr>
 <tr>
 <td>5</td>
  <td>-</td>
  <td>-</td>
  <td>-</td>
  </tr>
 <tr>
 <td>6</td>
  <td>00 10 20 30 40</td>
  <td>00 10 20 30 40</td>
  <td>00 10 20 30 40</td>
  </tr>
 <tr>
 <td>7</td>
  <td>00 10 20 30 40</td>
  <td>00 10 20 30 40</td>
  <td>00 10 20 30 40</td>
  </tr>
 <tr>
 <td>8</td>
  <td>00 10 20 30 40</td>
  <td>00 10 20 30 40</td>
  <td>00 10 20 30 40</td>
  </tr>
 <tr>
 <td>9</td>
  <td>00 10 20 30 40</td>
  <td>00 10 20 30 40</td>
  <td>00 10 20 30 40</td>
  </tr>
 <tr>
 <td>10</td>
  <td>00 10 20 30 40</td>
  <td>00 10 20 30 40</td>
  <td>00 10 20 30 40</td>
  </tr>
 </table>
</body>
</html>

http://oshiete1.goo.ne.jp/kotaeru.php3?q=558624
の質問と同じ現象だと思うのですが、
下記のコード(時刻表をつくりたいのです)をメモ帳で書き、IE6.0で表示させたたところ、
テーブルの上の方にテーブルの長さの3倍ほどの空行が表示されてしまいます.
過去の質問では、質問者さんが自己解決されているようで、しかもなにかツールを使ってコードを書いているようでしたので、メモ帳で直接コードを書いている場合の解決方法を教えてください.
----
<html>
<body>
 <table border="1" cellpadding="0"...続きを読む

Aベストアンサー

こんばんは

2バイトスペース(全角スペース)は取り除きましょう。
揃えたい1バイトスペース(半角スペース)で行います。
置換してしまえば良いでしょう。
これは、HTMLがスペースをセパレータとしている為、ブラウザで表示された時には無視してくれます。

これだけでもかなり変わると思います。
ご確認下さい。

Qテーブルの表示がずれます

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>

(2)行が2つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト2</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
<tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>
宜しくお願い致します。

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>...続きを読む

Aベストアンサー

こんにちは。
イマイチどうしたいのかがよく判らないので、具体的な説明を補足してください。
ソース自体は間違いではないと思いますが…。
<tr>や<td>の前にある空白はもちろん半角空白ですよね?全角だと不具合がでます。

行が増えると下に表が大きくなるのは必然ですし。
行が1行のものと、2行のものとでは、ページが違うんですよね?
もし、同じページに表示するのであれば、1ページにつき、<html>タグは一組です。(あくまでも基本的に、ですが)
これが、直接行がずれるっていうことにはならないと思いますけど…。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング