テーブルのレイアウトについて

質問

こんにちは。
素材屋さんに置いてあるテーブル用の画像を使い、
テーブルの一番外側のセルに画像を入れているのですが、
最上段と２番目の行との間にどうしても隙間ができてしまいます。
具体的にはこのページのようになってしまいます。
→http://sumiresou.web.fc2.com/test2.html
自分で原因検索をしてみてもなかなか上手くいきません。
どなたか教えて頂けないでしょうか？
使用ソフトはHTML Formater、パソコンはMac OS10.4です。
よろしくお願いいたします。

回答No.1

megane3333 · ベストアンサー

<td>タグとその中の<img>タグの間にスペース、または改行が入ってる為、その分の行の高さが出てしまっています。
そのスペースや改行を削除してみたら、想定したとおりの表示になると思います。

また、その他の方法としては、<td>タグに　style="line-height:0px;"　を指定してみる方法もあります。
1行目を以下のようにします。

<tr>
<td style="line-height:0px;"><img src="image/aqua_sd01/c1.gif" width="75" height="75" border="0"></td>
<td style="line-height:0px;" background="image/aqua_sd01/s1.gif"><img src="image/aqua_sd01/dummy.gif" width="1" height="1" border="0"></td>
<td style="line-height:0px;"><img src="image/base_sd01/c2.gif" width="75" height="75" border="0"></td>
</tr>

お礼

早速のご指摘ありがとうございました！
スペースの有無にかかわらず、同じ症状が起こってしまっていたのですが、
教えて頂いたタグを使ってみたところ無事解決いたしました。
本当にありがとうございました。

回答No.2

Questa

1行目の左右の IMG要素に style="vertical-align:bottom" を挿入すると隙間がなくなります。

<img src="image/aqua_sd01/c1.gif" ... border="0" style="vertical-align:bottom">
<img src="image/base_sd01/c2.gif" ... border="0" style="vertical-align:bottom">

お礼

教えて頂きありがとうございます！
Questaさんの教えてくださった方法でも無事に上手くいきました。
本当にありがとうございました。