- ベストアンサー
テーブルのセルに画像をピッタリ表示する方法とは？
- テーブルのセルに画像をピッタリ表示する方法について解説します。以前作成した他のHTMLファイルでは、画像のサイズに変化があっても自動的に枠にピッタリ表示されましたが、今回はうまくいかないようです。
- 具体的には、一行二列目の枠に表示される画像が枠より小さく浮いてしまい、枠の右側に余白ができてしまう問題が発生しています。
- 枠や画像のサイズを固定しても同様の問題が起きるため、どこに間違いがあるのか教えていただきたいです。
- b_oleander
- お礼率22% (2/9)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
私の場合これで反映されていますのでもうお力になれないと思いますが一つだけ。 私もたまにタグでやってておかしくなるときがあります。 そのときは、一部を修正して直る場合もありますがそうでない場合もあります。 そういう場合一度その部分だけを、別のページで一からすべて作り直してみると直るときがあります。 別のページでも一からすべてを記入するのではなく、徐々にタグを増やしていってどこが悪いのかを探してみるのも一つの手です。
その他の回答 (1)
- Night-cafe
- ベストアンサー率49% (155/316)
>のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。（枠の右側に不要な余白ができてしまう） まず画像の左に浮いたようなものが出来てしまうのは「cellpadding="5"」が原因ではないですか？ >（枠の右側に不要な余白ができてしまう） >枠や画像のサイズを固定しても同じです。 たぶんですが「table width="85%"」が原因かと、とにかくテーブルの表示が画面表示の85％になってればOKと書いてますから。 「１行二列目～ココの部分～」に画像を入れて、その左の枠に文字を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">２行一列</td></tr> <tr><td width="660" height="76">３行一列</td></tr> <tr><td width="300">４行一列目</td> <td width="360">４行二列目</td></tr> <tr><td colspan="2" width="660">５行一列</td></tr> <tr><td colspan="2" width="660">６行一列</td></tr> </table> ※height="76"なのは、枠線の太さを「cellspacing="5"」としているため、(240-(5*2))/3＝76.6のため
補足
ありがとうございます。 アドバイスに従って、paddingをはずしてテーブルやtrとtdの幅を指定しても、反映されませんでした・・・。 以前に元となったタグを作った時と、 ＰＣやバージョンが変わったためでしょうか。 そういう原因しか思い当たらず、納得できるのですが、 なぜ、以前のタグではな～んにも指定していなかったのに、 画像が枠にピタッと貼られたのか？さっぱりわからなくなってしまいました。 未だに、その以前作成のページが同じサイトに並列して思い通りに反映されているのを見ると、悔しいです・・・。 <!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"> この指定も全く同じなのですが・・・。
お礼
たびたびありがとうございます。 アドバイス、心当たりにピッタリして助かりました。 そうですね、細かなチェックを繰り返しても、タグってとてもデリケート？ 気分を変えて、もう一度新しいメモ帳白紙にコツコツ打ち直してみます。コピー・ペーストの反復で、どこかに隙間かモレか余計な閉めがあるのかもしれません。 それからもうひとつ、 気になったのですが、いわゆる「画像のあとの文字の回り込み」～というものにpaddingがひっかかる場合ってあるのでしょうか？ 上手く反映している方のタグはpaddingを"5"で指定していても、どれもこれも画像サイズの縦横の変化のあるのにもかかわらず、ピタッと枠が決まっているのですが・・・。 とり急ぎ、お礼申しあげます。
補足
日付かわって、 今日、またあちこち調べ直してトライしてみたところ、 あの画像のセルを、こうやって指定してみたら、ピタッと反映されました。 <td style="background:url(/*画像*/) no-repeat center top" rowspan="3"></td> スタイルで背景として固定をする、という方法もあったのですね。 未だに？以前のタグとの互換がどうか不明で、 まだまだ知識不足ですが、勉強になりました。 おっくうがらずに、コツコツやっていきます。 アドバイスありがとうございました！