プロが教えるわが家の防犯対策術！

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

解決済

  • 質問者：shibachuta2
  • 質問日時：
  • 回答数：2件

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

下記ソースのテーブル<!-- 丸枠 -->と<!-- ヘッダ -->間は、問題ないのですが
テーブル<!-- ヘッダ -->と<!-- ロゴ -->の間に隙間が開いてしまいます。
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: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 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;
}

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

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

「LINE white」に関するQ&A： White lined paper tablet　の意味を教えてください

A 回答 (2件)

No.2ベストアンサー

  • 回答者： abril
  • 回答日時：

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



<!-- ロゴ -->
<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>しか入れません。テキストデータが素のままで入る事は有り得ません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

丁寧ご説明及び補足、誠にありがとうございます。
今後気をつけようと思います。

通報する
お礼日時：2008/09/10 16:27

No.1

  • 回答者： THX1138
  • 回答日時：

-----------------------------------------------------


　　　　<td colspan="13" align="left"><a href="​http://www.com/">（以下略）
-----------------------------------------------------

この行の先頭に全角スペースが入っていますが、
それが表示されているためではないでしょうか。
削れば縮むと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご説明、誠にありがとうございます。
おかげで解決しました！

通報する
お礼日時：2008/09/10 16:25

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

「LINE white」に関するQ&A： 英語がわかる方に質問です！！

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

Q質問する（無料）

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

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

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

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

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

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

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

Aベストアンサー

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

他の回答も見る

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って　テーブルを作成しました。（これをテーブル(1)とします。）
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。（ここで作成したテーブル（表）をテーブル(2)とします。）
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか？
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE>　ここからテーブル(2)
<TBODY>
<TR>
<TD>　

他の回答も見る

Q画像とテーブルの隙間をなくす。

トップページ一番上に画像を配置し、その下に表を載せ、その表の中にコンテンツを掲載しようと思っています。
ソースはこんな感じです。

<IMG src="images/obj_top_main.jpg" width="860" height="210" border="0">
<TABLE border="0" width="860" height="100%" cellpadding="0" cellspacing="0">
<TR>
<TD bgcolor="#ffffff">ここにコンテンツ</TD>
</TR>
</TABLE>


この、「画像と表の間」を0にして付けたいのですが、方法がわかりません。
CSSで出来そうな気がするのですが…
方法があれば教えてください。

Aベストアンサー

テーブルにクラスをつけて、

.クラス名{margin-top:0px;}

とするとどうでしょうか。

若しくは、画像とテーブルの幅が同じなので、画像をテーブルの中に入れてしまうという手もあると思います。

他の回答も見る

QHTML タグ　セル内余白を無くす方法

次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法？

<table border="1">
<tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td><br></td><td>
</table>
テーブル内を２列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合をしないで、ごく普通に２行２列にすると画像とセル枠との間には余白が生じない。
セル結合した場合に生ずる余白を無くす方法を教えて下さい。エディタは「メモ帖」、ＯＳはWinXP、ブラウザはInternet Explorer６です。

次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法？

<table border="1">
<tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td><br></td><td>
</table>
テーブル内を２列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合...続きを読む

Aベストアンサー

表を入れ子にしたらどうでしょうか↓

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td>　</td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>　</td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
</table>
</td>
</tr>
</table>

表を入れ子にしたらどうでしょうか↓

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td>　</td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>...続きを読む

他の回答も見る

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）はこれら以外にも
いろいろな設定方法があります。

他の回答も見る

Qtableにtableをネストした場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<style type="text/css">
body{margin:0}
table{border-collapse:collapse}
td{padding:0;}
</style>
</head>
<body>
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td>

<table style="width:100px;height:100px;background-color:#f93;">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td>
a
</td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>

</td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>

以上のソースをIEで見たとき。よく分からない1pxぐらいの隙間が上に開いてしまいます。
FFで見たときには思ったとおりに表示されるのですが・・・。
どなたか原因が分かる方おられましたら教えてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<style type="text/css">
body{margin:0}
table{border-collapse:collapse}
td{padding:0;}
</style>
</head>
<body>
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td>

<table style="width:100px;height:100px;background-color:#f93;">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td>
a
</td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>

...続きを読む

Aベストアンサー

単純に最初のテーブルタグの<tr>-</tr>分の空白ですね。
以下のソース上で、青の部分が最初のテーブルの枠線部分。
上下に少しだけ有る赤の部分が件の空白に当たる部分です。最初の、<tr>～</tr>までを消せば空白も消えます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<style type="text/css">
body{margin:0}
table{
border-collapse:collapse;
padding:0;
border-style: solid;
border-width: 8px;
border-color: blue;
background-color: red;
}
.aaa{
width:100px;
height:100px;
background-color: orange;
}
td{padding:0;}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<table class="aaa">
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td>
<td>a</td>
<td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>

単純に最初のテーブルタグの<tr>-</tr>分の空白ですね。
以下のソース上で、青の部分が最初のテーブルの枠線部分。
上下に少しだけ有る赤の部分が件の空白に当たる部分です。最初の、<tr>～</tr>までを消せば空白も消えます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<style type="text/css">
body{margin:0}
table{
border-collapse:collapse;
padding:0;
border-style: solid;
border-width: 8px;
border-color: blue;
background-color: red;
}
.aaa{
...続きを読む

他の回答も見る

Qtable周辺の隙間をなくしたい。

ヘッダーのバーとすぐ下のtableの間の隙間を無くしたいのですが、どうすれば良いのでしょう。

margin属性を調整すれば隙間を無くせるブラウザもあるようですが、ＩＥはどうしてもダメなのではないでしょうか。なによりも、ブラウザ次第で隙間の大きさが違うのに困っています。



***** test_06.html *****
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>只今お勉強中！</title>
<link href="test_06.css" rel="stylesheet" type="text/css">
</head>

<body>

<img class="header" src="header_01.jpg" alt="">

<table class="main">
<tr class="logo">
<td class="01">
<img class="logo" src="logo.jpg" alt="">
</td>
<td class="02">
<div></div>
</td>
</tr>
</table>

</body>
</html>

***** test_06.css *****
body { margin-top: 0px;
text-align: center;
background: url("header_back.gif") repeat-x;
background-color: #CBE5FF;
}

img.header {
margin: 0px auto;
width: 820px;
display: block;
}

table { margin: 0px auto;
width: 860px;
background: url("wrapper_01.gif") repeat-y;
}

td { margin: 0px;
padding-left: 20px;
width: 352px;
float: left;
}

img.logo {
width: 352px;
margin: -3px 0px -3px -3px;
}

ヘッダーのバーとすぐ下のtableの間の隙間を無くしたいのですが、どうすれば良いのでしょう。

margin属性を調整すれば隙間を無くせるブラウザもあるようですが、ＩＥはどうしてもダメなのではないでしょうか。なによりも、ブラウザ次第で隙間の大きさが違うのに困っています。



***** test_06.html *****
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; ...続きを読む

Aベストアンサー

もしかしてマイナスマージンを指定していることと関係あるのでしょうか？
テーブルのセルの間隔などを指定するプロパティが用意されているので、それを使えば解決するのではないでしょうか。
imgのマイナスマージンを消してtableにborder-collapse:collapse;を追加します。

他の回答も見る

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL：http://www.htmq.com/style/border-spacing.shtml

他の回答も見る

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

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

Aベストアンサー

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

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

他の回答も見る

Qテーブルセル余白（例えば左側だけ、上側だけ、など）

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ５ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="ＸＸ"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

１つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

他の回答も見る
ページトップページトップ

Q質問する（無料）

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

人気Q&Aランキング

おすすめ情報