※ ChatGPTを利用し、要約された質問です(原文:テーブルのセルに画像をピッタリ表示するには)
テーブルのセルに画像をピッタリ表示する方法とは?
このQ&Aのポイント
テーブルのセルに画像をピッタリ表示する方法について解説します。以前作成した他のHTMLファイルでは、画像のサイズに変化があっても自動的に枠にピッタリ表示されましたが、今回はうまくいかないようです。
具体的には、一行二列目の枠に表示される画像が枠より小さく浮いてしまい、枠の右側に余白ができてしまう問題が発生しています。
枠や画像のサイズを固定しても同様の問題が起きるため、どこに間違いがあるのか教えていただきたいです。
よろしくお願いします。
テーブルの以下のタグ並びで、
<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>
お礼
たびたびありがとうございます。 アドバイス、心当たりにピッタリして助かりました。 そうですね、細かなチェックを繰り返しても、タグってとてもデリケート? 気分を変えて、もう一度新しいメモ帳白紙にコツコツ打ち直してみます。コピー・ペーストの反復で、どこかに隙間かモレか余計な閉めがあるのかもしれません。 それからもうひとつ、 気になったのですが、いわゆる「画像のあとの文字の回り込み」~というものにpaddingがひっかかる場合ってあるのでしょうか? 上手く反映している方のタグはpaddingを"5"で指定していても、どれもこれも画像サイズの縦横の変化のあるのにもかかわらず、ピタッと枠が決まっているのですが・・・。 とり急ぎ、お礼申しあげます。
補足
日付かわって、 今日、またあちこち調べ直してトライしてみたところ、 あの画像のセルを、こうやって指定してみたら、ピタッと反映されました。 <td style="background:url(/*画像*/) no-repeat center top" rowspan="3"></td> スタイルで背景として固定をする、という方法もあったのですね。 未だに?以前のタグとの互換がどうか不明で、 まだまだ知識不足ですが、勉強になりました。 おっくうがらずに、コツコツやっていきます。 アドバイスありがとうございました!