表の上に画像を隙間なくつけたいです（HPビルダー使用）

質問

HPビルダーを使用して、HPを作成中です。

現在、表の上にタブをイメージした画像を挿入したいと考えています。
作成中の画面では、表のすぐ上に隙間なく（余白なく）画像がくっついているように見えているのですが、プレビューすると画像と表の間に隙間ができてしまいます。
この隙間をなくす方法はありますでしょうか。

自分なりに調べたところ、 表の定義のところに「topmargin="0"」などを入れるといいのかと思ったのですが、それでも余白は消せませんでした。

初心者のため、とても初歩的な質問になってしまっているかもしれませんが、是非助けて頂きたいです。

回答No.2

koumei8 · ベストアンサー

画像をTRのタグで囲っていますが、caption（表題）にした方が良い様な感じもします。

とりあえず、画像と表の間の余白を消したいのであれば
margin-bottom : -4px　と無理やり余白を消してやる方法で
画像の方にスタイルシートを適用してはどうでしょうか？

<img src="image5.gif" style="margin-bottom : -4px;">
-4pxの所は、ご自分で調整してみて下さい。
タグで表すと

<TR>
<TD><img src="image5.gif" style="margin-bottom : -4px;">　　　←タブ画像です
<TABLE border="0" width="586" bgcolor="#004000" cellpadding="0" cellspacing="2">
<TBODY>
<TR>
<TD bgcolor="#679f00" height="8"></TD>
</TR>
<TR>
<TD bgcolor="#ffffff">　<FONT size="-1">テキスト</FONT></TD>
</TR>
</TBODY>
</TABLE>
　</TD>
</TR>

お礼

ご回答、ありがとうございます！

ご指摘通り「margin-bottom」を設定したところ、余白が消せました！
なるほど、余白なし=0、ではないんですね。
マイナスの値が設定できることをはじめて知りました。
（というか、そもそもmargin-bottom という書き方も初めてですが。）

とても助かりました。これから少しづつ自分でも勉強していければと思います！

回答No.3

lizaatwood

要するにタブの画像と、その下にある表の枠線をぴったりくっつけたいということでしょうか。私的にはこんな感じで作りますけど。

手順1) 　2行1列の表1を挿入。
表1のプロパティは、罫線の幅0px、セル内の余白0px、枠表示0px
この表1は、レイアウト用なので線は見えない。

手順2)　表1の1行目セルにタブの画像を貼り付け

手順3)　表1の２行目セルには、新しく別の1行1列の表2を挿入。
この表2の「表のプロパティ」は、以下のように設定。
・罫線の幅1px、セル内の余白0px、枠表示0px
・背景色はタブの色と同じ色を選ぶ。色はウェブアートデザイナーのスポイトツールでタブの色(RGUの各数値)を調べればOK。
さらに、表２の「セルのプロパティ」を次のように設定します。
・背景色を白。セル幅を414px、高さを517pxにする。

これでタブの色と同じ1pxの枠線ができます。後は、必要に応じて表２の中に、表1のような、レイアウト用の表をさらに入れて文字などをいれてもいいわけです。

これは一例で、方法はいくらでもあると思いますから、自分でいいデザインだと思ったHPには、名前をつけて保存して、後で研究するといいですよ。とても自分には作れないと思ったHPがしばらくするともっときれいにできたりするものです。どう作るべきかは、いろいろな考えがありますが、基本的には、見る人が使いやすいHPなら、好きなように作っていいと思います。

お礼

お礼が遅くなり申し訳ありません＆ご回答ありがとうございます！

ご回答の例でも自分で作成してみました。
これでも確かに私のイメージ通りに表示されました！

なるほど、同じようなデザインを作るのにも色んな方法があるんですね。とても勉強になります。まずは自分のイメージするものの答えに自力でたどり着けるようになるために、必死に勉強してみます！

回答No.1

UnkOhYeah

<td></td>
の間に改行が入ってしまっているとかでは無いでしょうか？

参考URL：

http://www.mdn.co.jp/content/view/1712/97/

お礼

ご回答ありがとうございます！

早速ご指摘頂いた点を確認してみたのですが、余分な改行はないように思えました。
ただ、ソースをきちんと理解していないので（お恥ずかしながらほぼビルダー機能任せで、ソースは後追いで勉強中です^^;）、私の確認方法に問題があるのかとも思いますので、該当部分のソースを以下に記述させて頂きます。
可能であれば、ソース問題点をご指摘頂けますでしょうか。
====================================
<TR>
<TD><IMG src="image5.gif">　　　←タブ画像です
<TABLE border="0" width="586" bgcolor="#004000" cellpadding="0" cellspacing="2">
<TBODY>
<TR>
<TD bgcolor="#679f00" height="8"></TD>
</TR>
<TR>
<TD bgcolor="#ffffff">　<FONT size="-1">テキスト</FONT></TD>
</TR>
</TBODY>
</TABLE>
　</TD>
</TR>
====================================
長文で、失礼致しました。よろしくお願い致します。