プロが教える店舗&オフィスのセキュリティ対策術

よろしくお願いします。

テーブルの以下のタグ並びで、
<img src=>の部分の画像jpgを、枠にピッタリ表示したいのです。
以前作った他のhtmlファイルでは、画像のサイズに変化があっても、自動的に枠にピッタリ表示でき、
同じ通りタグを書いたはずなのですが、
なぜか?今回は、この画像が、
一行二列目の枠(これが大きくなってしまう)
のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。(枠の右側に不要な余白ができてしまう)
枠や画像のサイズを固定しても同じです。
この画像の枠以外は、画像ではなくテキストです。
うまくいかないのはなぜなのでしょう?
どこに間違いがあるのでしょうか、教えてください、お願いいたします。

<table width="85%"border="1" cellpadding="5" cellspacing="5" align="center">

<tr><td>一行一列目
    </td>
<td rowspan="3">1行二列目~ココの部分~<img src="" width="" height="" align="center" valign="top" alt="">
</td></tr>
<tr><td>2行一列
</td></tr>
<tr><td>3行一列
</td></tr>
<tr><td>4行一列目
</td>
<td>4行二列目
</td></tr>
<tr><td colspan="2">5行一列
          </td></tr>
<tr><td colspan="2">6行一列
          </td></tr></table>

A 回答 (2件)

私の場合これで反映されていますのでもうお力になれないと思いますが一つだけ。



私もたまにタグでやってておかしくなるときがあります。
そのときは、一部を修正して直る場合もありますがそうでない場合もあります。
そういう場合一度その部分だけを、別のページで一からすべて作り直してみると直るときがあります。
別のページでも一からすべてを記入するのではなく、徐々にタグを増やしていってどこが悪いのかを探してみるのも一つの手です。

この回答への補足

日付かわって、
今日、またあちこち調べ直してトライしてみたところ、
あの画像のセルを、こうやって指定してみたら、ピタッと反映されました。

<td style="background:url(/*画像*/) no-repeat center top" rowspan="3"></td>

スタイルで背景として固定をする、という方法もあったのですね。
未だに?以前のタグとの互換がどうか不明で、
まだまだ知識不足ですが、勉強になりました。
おっくうがらずに、コツコツやっていきます。
アドバイスありがとうございました!

補足日時:2007/07/29 12:06
    • good
    • 1
この回答へのお礼

たびたびありがとうございます。
アドバイス、心当たりにピッタリして助かりました。
そうですね、細かなチェックを繰り返しても、タグってとてもデリケート?
気分を変えて、もう一度新しいメモ帳白紙にコツコツ打ち直してみます。コピー・ペーストの反復で、どこかに隙間かモレか余計な閉めがあるのかもしれません。

それからもうひとつ、
気になったのですが、いわゆる「画像のあとの文字の回り込み」~というものにpaddingがひっかかる場合ってあるのでしょうか?
上手く反映している方のタグはpaddingを"5"で指定していても、どれもこれも画像サイズの縦横の変化のあるのにもかかわらず、ピタッと枠が決まっているのですが・・・。
とり急ぎ、お礼申しあげます。

お礼日時:2007/07/28 22:01

>のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。

(枠の右側に不要な余白ができてしまう)
まず画像の左に浮いたようなものが出来てしまうのは「cellpadding="5"」が原因ではないですか?

>(枠の右側に不要な余白ができてしまう)
>枠や画像のサイズを固定しても同じです。
たぶんですが「table width="85%"」が原因かと、とにかくテーブルの表示が画面表示の85%になってればOKと書いてますから。
「1行二列目~ココの部分~」に画像を入れて、その左の枠に文字を2行目になるまでいっぱい入れれば画像を入れてる枠がぴったりになると思いますよ。

画像が360*240サイズとして枠のサイズを固定なら
以下の構文ではどうでしょうか?
<table width="660" border="1" cellspacing="5" align="center">
<tr><td width="300" height="76">一行一列目</td>
<td rowspan="3" width="360">
<img src="" align="center" width="360" height="240" align="top" alt="">
</td></tr>

<tr><td width="660" height="76">2行一列</td></tr>
<tr><td width="660" height="76">3行一列</td></tr>
<tr><td width="300">4行一列目</td>
<td width="360">4行二列目</td></tr>
<tr><td colspan="2" width="660">5行一列</td></tr>
<tr><td colspan="2" width="660">6行一列</td></tr>
</table>

※height="76"なのは、枠線の太さを「cellspacing="5"」としているため、(240-(5*2))/3=76.6のため

この回答への補足

ありがとうございます。
アドバイスに従って、paddingをはずしてテーブルやtrとtdの幅を指定しても、反映されませんでした・・・。
以前に元となったタグを作った時と、
PCやバージョンが変わったためでしょうか。
そういう原因しか思い当たらず、納得できるのですが、
なぜ、以前のタグではな~んにも指定していなかったのに、
画像が枠にピタッと貼られたのか?さっぱりわからなくなってしまいました。
未だに、その以前作成のページが同じサイトに並列して思い通りに反映されているのを見ると、悔しいです・・・。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01Frameset//EN">
<META http-equiv="Content-style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

この指定も全く同じなのですが・・・。

補足日時:2007/07/28 20:44
    • good
    • 0

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

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