会員登録で5000円分が当たります

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

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



***** 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;
}

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

A 回答 (9件)

もしかしてマイナスマージンを指定していることと関係あるのでしょうか?


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

この回答への補足

border-spacing:0px;とやると、マイナスマージンを指定しなくてもsafari、firefox、opera、chromeでは問題なく表示されるようです。

デザイン上の根拠が無いのに、ブラウザの都合でマイナスマージンを使うというのは、ブラウザも星の数ですので、知らないところでおかしな表示を生じてしまう可能性があります。こちらの記述の方がスッキリしていいですね。

ありがとうございます。

ただIEだけはまだ隙間が残っているんです・・・

補足日時:2009/02/07 11:02
    • good
    • 0

ANo.7-8です。

ANo.7のお礼を読みました。
現在の http://makoji.web.fc2.com/test/test_06/test_06.h … も拝見させて頂きました。
その上で、おせっかいかなあとも思ったのですが、2点だけ気になる箇所があったのでもう一度だけレスさせて頂きます。

img.logoとdiv.comentの"float: left;"との指定の意図は何でしょうか?
この指定だとimg.logoとdiv.comentは「左に浮いた」状態になっているので、もしも親要素の同じセル内でそれぞれに続く要素があった場合、続く要素(例えばテキストなど)は回り込む事になり、想定しているレイアウトは崩れます。以下の様に試しにテキストを入れて見たりすると現在どういう状態になっているかがよくわかるのではないかと思います。
---------------------------------------------------------------------
http://makoji.web.fc2.com/test/test_06/test_06.h …
---------------------------------------------------------------------
(省略)
<tr class="logo">
<td class="logo">
<img class="logo" src="logo.jpg" alt="">ロゴに続く要素
</td>
<td class="coment">
<div class="coment">コメント</div>コメントに続く要素
</td>
</tr>
(省略)
---------------------------------------------------------------------
内容からして、上記の様に要素が続く事は考えておられないとは思いますが、質問者様が現在のヴァージョンで実現したかった事は:

(1)<img class="logo"~>を<td class="logo">~</td>のセルに隙間無くぴったり収めたい
(2)<div class="coment">~<div>を<td class="coment">~</td>のセルの左端にぴったり寄せたい

という事だけなのではないでしょうか?img.logoとdiv.comentの"float: left;"だけ削除した状態にしてみた時にIEで起こる表示結果から想像したのですが。

もしそうであるなら、IEでは"float: left;"の追加で「一見」問題が解決している様に見えたかもしれませんが、先述の説明とサンプルの通り(「浮かせる」必然性がある様には見えないので)適切な解決にはなっておりません。(1)(2)の状態を求めるだけならば、一例としてCSSを以下の様に変更すれば解決します。
---------------------------------------------------------------------
img.logo {
width: 352px;
height: 55px;
vertical-align: bottom;←追加
("float: left;"を削除)
}
td.coment {
padding: 0px;
background-color: red;
text-align: left;←追加
}
div.coment {
background-color: green;
margin: 0px;
padding: 0px;
height: 55px;
width: 468px;
("float: left;"を削除)
}
---------------------------------------------------------------------

最後に。

> 画面の真ん中に全ての要素を綺麗にならべるのに、tableを使ったらどうなるか試してみたかったのですが、tableをそういう用途で使用することがあまりお薦めでないなら、このくらいの段組全体にtableを用いるべきではなさそうですね。

そうですね。あくまでtableは論理的意味は「表」であり、段組レイアウトをする為に用意されている性質のものではありませんので、この場合であればやはりtableでのマークアップは相応しくないと思われます。

> それにtableを使ってみて、divブロックを並べていくのと比べて、それほどコードが簡便になるということではなさそうですし。

適切なマークアップ(「ブロックを並べ」るのに相応しいのはdivとは限らない場合も多いです)をした上で、適切なスタイルを与えられれば、大概のレイアウト((X)HTML向きのデザインを大きく逸脱したものでなければ)は解決できますので、頑張ってみて下さい。
    • good
    • 0
この回答へのお礼

左の画像を下げたら右の画像を含めて全体が上に締まるという発想は今の私にはありませんでした。text-alignとfloatの違いも今まであまり意識していませんでしたし、とても勉強になりました。

ありがとうございます。

お礼日時:2009/02/13 17:37

ANo.7です。



今改めてやりとりを見直していたら、ANo.5様が「テーブルの内部の画像って logo.jpg のことですね?」とおっしゃってますが、ANo.4の補足でレスされていた「IEではやはり隙間が残ったまま」「テーブルの内部で、画像との間に隙間が生じている」というのは、ヘッダー画像<img class="header" src="header_01.jpg" alt="">ではなく、セル内のロゴ画像<img class="logo" src="logo.jpg" alt="">の事だったでしょうか?

もしそうなら、その件は本来のご質問内容とはまた別の現象ですので特に触れませんでしたが、先程の修正版のサンプルで見る限り、IEと他のブラウザとの差は、<img class="logo" src="logo.jpg" alt="">の水平方向の位置が<td class="01">のセルの領域に対して”左寄せ”になっているか”センタリング”になっているかの差だけですが(ただこの現象であればむしろ、IEの方が「隙間がない」という状態に相応しいので、ちょっとレスの字面と矛盾してしまうのですが)。

仮にこの事であるなら、tdのスタイルとして"text-align: left;"を追加すれば一律で(paddingで設定された様に)セルの左端から20pxの位置で揃います。
追記:"td.01"の様に数字で始まるクラス・セレクタは無効になりますので、このクラス・セレクタに某かのスタイルを別途用意(提供されているCSS内には見当たらないので…)されているならば"td.data01"などの様にアルファベットで始まるクラス名を付けて下さい。
    • good
    • 0
この回答へのお礼

コードは次のURLのソースのように直しました。
http://makoji.web.fc2.com/test/test_06/test_06.h …

確かに「border-collapse: collapse;」で隙間が小さくなりました。一度試してダメだったんですけど、多分スペルミスでもしていたのでしょう。

でも、それでも1pxほどの隙間が残ったので、div.comentを「padding: 0px;」としたら隙間がなくなりました。

ありがとうございます。

今、練習で既にあるサイトを勝手に真似ているのですが、その元のサイトが次のURLです。
http://gshop2.com/main/

画面の真ん中に全ての要素を綺麗にならべるのに、tableを使ったらどうなるか試してみたかったのですが、tableをそういう用途で使用することがあまりお薦めでないなら、このくらいの段組全体にtableを用いるべきではなさそうですね。

それにtableを使ってみて、divブロックを並べていくのと比べて、それほどコードが簡便になるということではなさそうですし。

お手数をおかけしました。

ありがとうございます。

お礼日時:2009/02/12 03:22

ざっと質問と回答の経過を見たところ、各回答者様からのアドバイスを「正しく組み合わせた修正」さえしていれば、既に解決に至っていたのではないかと思われますが…



現状がどうなっておられるのかわからないので、とりあえず今回はANo.5の補足で質問者様が書かれているHTML(test_06.html)&CSS(test_06.css)が最終ヴァージョンと仮定した上で、HTMLのサンプルはそのままで、CSSの方のみ修正を加えてみました。あくまで現在のHTML(test_06.html)の文書構造に手を加えないで…という事なら、CSSを下記の様に変更すればお悩みの症状は改善されると思います。
検証環境はIE6/7、Firefox2/3、Safari3、Opera9.61、Google Chromeです。
---------------------------------------------------------------------
【test_06.cssの修正版】
---------------------------------------------------------------------
body {
margin-top: 0px;
background: url("header_back.gif") repeat-x #CBE5FF;←(特に分ける意図がないのであれば)background-color属性もまとめた方がすっきりします
}

div.main {
margin: 0px;
padding: 0px;
text-align: center;
}

img.header {
display: block;←★ブロック要素化
width: 820px;
margin: 0px auto;
}
※"padding: 0px;"は(初期値が0なので)不要。

table {
margin: 0px auto;
width: 860px;
border-collapse: collapse;←★このプロパティを指定しないと、初期値が分離モデル"separate"の為、セルの間隔が0ではなくなり(tdとtdとの間に更に見えない隙間の様なものができる仕様と思っておいて下さい。paddingとは別物です。)、今回のスタイルには不都合と思われます。
background: url("wrapper_01.gif") repeat-y;
}
※"padding: 0px;"は(元々paddingは与えられていないので)不要。
※"border-spacing: 0px;"は、border-collapseプロパティの値が"separate"の時だけ有効であり、またIEでは実装されていないので今回は不要。

※tr {~}の指定部分は丸ごと削除。trはmargin及びpaddingプロパティの適用対象にならないので、無効。

td {
padding: 0px 0px 0px 20px;
width: 352px;
}
※tdはmargin及びfloatプロパティの適用対象にならず無効なので、それらを削除。

img.logo {
width: 352px;
}
※"margin: 0px;"、"padding: 0px;"は(それぞれ初期値は0なので)不要。
---------------------------------------------------------------------

本件の現象の直接の原因は、★の部分のみですが、←や※で示した箇所は、オリジナルのCSSに不足していた指定及び不要(無効を含む)な指定ですのでこの際修正された方が宜しいでしょう。

> IEでは、ヘッダーの画像とテーブルの間の隙間は解消されているようです。テーブルの内部で、画像との間に隙間が生じているようです。

ANo.4様の「3 <img class="header" src="header_01.jpg" alt=""><table class="main"> と続けてみる。(間に空白も改行も入れない)」をHTML側に適用したのだとしたら、<img>と<table>の2要素間に改行コードが入らないので、その結果「ヘッダーの画像とテーブルの間の隙間は解消」されたのでしょうが、border-collapseプロパティが指定されていなかったのでIEでは初期値である"border-collapse: separate;"と実装されていない"border-spacing: 0px;"の組み合わせとなってしまっていた為、セル間の隙間が全くの0ではなくなり「テーブルの内部で、画像との間に隙間が生じて」いたのでしょう(ANo.2様とのやりとりで疑問に思われていた問題は、これに依るものです。)。

ちなみに、上記の★で追加した様に、img.headerをdisplayプロパティでブロック要素化しておけば、最初のサンプルの様に<img>と<table>の2要素間に改行コードが入ったHTMLソースであっても「ヘッダーの画像とテーブルの間の隙間」はできません。
何故か…という説明は省略させて頂きますので、ご興味があったら「ブロック要素/インライン要素」などのキーワードで調べてみて下さい。(X)HTML文書を正しく理解する為の最も重要なポイントの一つです。

「ブラウザ次第で隙間の大きさが違うのに困っています。」については、確かにそういう場合もないわけではないすが、「隙間をなくす」というこの程度のスタイルであれば、指定が適切であれば主要モダン・ブラウザブラウザ間の差は吸収できます。本件においてはやはりCSSの各プロパティの指定が適切ではなかった事が原因です。

それから、CSSに対する正確な理解がかなり不足しておられる(例えば質問者様のオリジナルの指定の様に、実際にtdがfloatできたりしたら大変な事になってしまいますよ…)様に見受けられますので、ちょっと混乱されてしまったのではないでしょうか。一度CSSの仕様を段階を踏んで学ばれておく事をお奨めします。覚えるまでは、各プロパティがどの要素の適用対象になっているかを確認しながらスタイルを設定して行く習慣を付けておく方がいいですよ。

あとは補足というか蛇足です。ANo.1様とANo.3様の”bodyの直下にimgは置けない”というご指摘は、質問者様の現在のHTML文書がANo.5の補足にある通りのDOCTYPEであるならば、質問者様が「文法チェックもしてみましたが、これでエラーは出ない」とレスされた通り、違反ではないですね。Another HTML-lint gatewayでもパスします。ただし、これよりより厳密な文法を必要とするDOCTYPEでは違反ですので、今からでもimgに対して某かの子要素として位置づけられるマークアップを意識されておいた方がベターかとは思いますが(例えばこの場合であれば、画像のネーミングからして「見出し(タイトル)」の様に思えますので、もしそうであれば<h1><img class="header" src="header_01.jpg" alt=""></h1>という様に。)。

それから、現在のロゴを収めるテーブルのマークアップについて色々やりとりがある様ですが、実際にこのtable部分に入る他の要素の情報が不足している以上、このマークアップが(少なくとも現段階の情報では)適切か否かは判断できません。ただ、もし真実「表」が相応しい内容でなかった場合は…次の機会にでも見直されてみるのがいいですね。勿論、「表」が相応しい内容であるならそのままで結構です。
    • good
    • 0

≫heder.jpgとlogo.jpgの間に『<h2>見出し</h2>』だの『<p>文章</p>』だの入れて、どうやって二つの画像の間の隙間をなくそうと言うのか・・・



 ちゃんとしたHTMLなら、いとも簡単に出来ることを、HTMLがおかしいから、苦労するのです。

 実際に使用されている画像のPATHとサイズ、そして、文章構造にしたがってマークアップしたHTMLを例を参考に示してください。すなわち、文章なり画像が意味を持つものなら、それを含めてということ。
 携帯で画像なしで表示して意味が取れるということ

≫本を読んで分からないから相談しているんです。
 わたしも本は書きますが?tableでもないのに、tableを使って説明してある本なら捨てなさい。
    • good
    • 0

テーブルの内部の画像って logo.jpg のことですね?



td のスタイルに left 以外の padding が見当たらないのですが、私の見落しでしょうか?

# IE ではデフォルトがゼロで無かった様な記憶が...

この回答への補足

コードを以下のように書き換えてみてもやはりIEではだめですね。
どうしてなのでしょう。

***** 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>
<div class="main">

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

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

</div>
</body>
</html>

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

div.main {
margin: 0px;
padding: 0px;
text-align: center;
}

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

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

tr { margin: 0px;
padding: 0px;
}

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

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

補足日時:2009/02/07 18:01
    • good
    • 0

私なら、以下の試行錯誤をすると思います。



1 TABLEのstyleに padding-top: 0px; を追加。

2 TABLEタグの直後に <caption align="bottom"></capion> を追加

3 <img class="header" src="header_01.jpg" alt=""><table class="main"> と続けてみる。(間に空白も改行も入れない)


# 以前、<caption align="top"> を持ったテーブルで、 caption の上の余白・下の余白を Firefox と IE6 で同一にするのにえらい苦労しました。

この回答への補足

captionの件は失念していたので、<caption align="bottom"></capion>は助かりました。

でもIEではやはり隙間が残ったままです。

IEでは、ヘッダーの画像とテーブルの間の隙間は解消されているようです。テーブルの内部で、画像との間に隙間が生じているようです。

補足日時:2009/02/07 11:38
    • good
    • 0

いやはや・・。


W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/ )のにあるように、
「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。」

<body>要素には、
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
と、ブロック要素およびins,dellしか含まれないと書かれている。
 ≪7.5.1 BODY要素/HTML 4.01 仕様書 (邦訳) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 最低限、仕様書くらいは目を通さなきゃ・・
 そこには、_____(以下引用)
こうしたテクニックは、・・・【中略】・・・すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
・・・【中略】・・・
* テキストを画像に置き換えて表現する。
・・・【中略】・・・
* ページレイアウトの目的で表を用いる。
・・・【中略】・・・
 こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで

 なら、このようなHTML(文字を画像で置き換えたり、tableで配置したり)にはならないはず。

≫mgタグはインライン要素なので、display属性を使ってブロック化しました。
 スタイルシートでdisplay:blockとしても、HTML構文の不正を直せるわけじゃない。
≫文法チェックもしてみましたが、これでエラーは出ないようです。
 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )ですか?。ありえません。

★正しいHTMLを書きましょう。
 検証システムは、構造的解析は出来ても、内容的に正しくマークアップされているかについてはチェックできない。
【引用】____________ここから
単純にDTD的にValidだというだけじゃつまらない。構造的にというか、文書として真に妥当たりえているかって辺りまで、とりあえず意識だけでも常々したいところだ。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Valid HTML/XHTML - I'll sleep on it.( http://homepage1.nifty.com/VET06031/web/lint100. … )]より

よって、わたしの回答はあなたの求めている回答ではありませんが・・・
 あなたはとっても回り道をしているようなので、あえて・・

≫table周辺の隙間をなくしたい。
の方法はありますが、このHTMLの場合はその技術は不要です。
まず、
「CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTML」に書き直しましょう。
 たとえば、
<body>
<h1><img class="header" src="header_01.jpg" alt="****のページ"><span>****のページ</h1>
<h2>見出し</h2>
<p>文章</p>
・・・・・・・・・・・【中略】・・・・・・・・
<div class="Logo">
  <p><<img class="logo" src="logo.jpg" alt=""></p>
</div>
</body>
</html>
とか・・・。

【正当なHTMLが出来てから、CSSをどう書くか】
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

この回答への補足

ご忠告、ありがとうございます。

ただ正しいHTMLを、として例示された記述が

例えば
<body>
<h1><img class="header" src="header_01.jpg" alt="****のページ"><span>****のページ</h1>
<h2>見出し</h2>
<p>文章</p>
・・・・・・・・・・・【中略】・・・・・・・・
<div class="Logo">
  <p><<img class="logo" src="logo.jpg" alt=""></p>
</div>
</body>
</html>


heder.jpgとlogo.jpgの間に『<h2>見出し</h2>』だの『<p>文章</p>』だの入れて、どうやって二つの画像の間の隙間をなくそうと言うのか・・・

上記の例えは純粋なる一般論でHTML文を例示しただけですよね。

そうすると、全体として、本でも読んだら・・・という程度の内容にしかなっていないんですよ。本を読んで分からないから相談しているんです。

補足日時:2009/02/07 17:08
    • good
    • 0

bodyのすぐ下にimg要素は置けませんp要素などを使った方が良いです。



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

この回答への補足

imgタグはインライン要素なので、display属性を使ってブロック化しました。文法チェックもしてみましたが、これでエラーは出ないようです。

一応divタグで囲んでみましたが、IEでは隙間がなくならないようです。firefox、safari、opera、chromeではmarginの調整で隙間がなくなるようです。

全てのブラウザに共通する解決方法はないものでしょうか。

補足日時:2009/02/07 02:50
    • good
    • 0

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

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

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

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

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

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

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

Aベストアンサー

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

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;}

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

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

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>しか入れません。テキストデータが素のままで入る事は有り得ません。

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 タグ セル内余白を無くす方法

次の様なプログラムで画像(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>
テーブル内を2列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合をしないで、ごく普通に2行2列にすると画像とセル枠との間には余白が生じない。
セル結合した場合に生ずる余白を無くす方法を教えて下さい。エディタは「メモ帖」、OSはWinXP、ブラウザはInternet Explorer6です。

次の様なプログラムで画像(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>
テーブル内を2列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合...続きを読む

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テーブルセル余白(例えば左側だけ、上側だけ、など)

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

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

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

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

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

Aベストアンサー

1つのセルだけなら、下記で。
<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テーブル内の文字サイズを変更したい。

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 style='float : left;'>
を用いて、tableを並べています。
この時table同士がくっついてしまうのですが、間隔を開ける方法がありましたら教えて下さい。

Aベストアンサー

マージンをあければいいのでは?

<table style="float:left;margin:5px;"> などなど...。

margin-left:10px; と、左側だけを指定する事も出来ます。
margin-right、margin-top、margin-bottom などなど。

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> 

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


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

人気Q&Aランキング