• 締切済み

テーブルの中に画像を入れたい

テーブルの中にイメージ画像をぴったりはまるようにしたいのですが、 画像の大きさとテーブルの大きさを合わせても(枠なし、隙間なし)、なぜか下のほうに少し隙間が出来てしまいます。 NetscapeやFirefoxだときちんと隙間なく見れますが、IEのみ隙間が出来るようです。また、幅を合わせてもIEの場合だけ、上下に作ったテーブルの間隔がずれるようです。 これはどのようにすれば、きれいに見せることが出来るでしょうか。

みんなの回答

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.3

<td backgroud="***.gif" width="***" height="***"> ではどうでしょうか? widthとheightの設定がかなりシビアになりますけど(--;) 表示する画像のピクセルより少しこまめにしないと画像が繰り返し表示されているので・・・

参考URL:
http://html.eweb-design.com/0703_td.html
mutu560
質問者

お礼

皆様 ありがとうございます。 新しく作り直したら直りました。 理由はいまだ分らないんですが、とりあえず解決です。

全文を見る
すると、全ての回答が全文表示されます。
noname#56851
noname#56851
回答No.2

img のmarginを指定する、とかはどうですか。 自信ないけれど。

全文を見る
すると、全ての回答が全文表示されます。
noname#227760
noname#227760
回答No.1

こんばんは。 タグを書くときにスペースを詰めてみては? つまり、  <table> <tr> <td> <img src="...." /> </td> </tr> </table> ではなく、 <table><tr><td><img src="...." /></td></tr></table> や <table ><tr ><td ><img src="...." /></td ></tr ></table> と書きます。 <td>や<img>タグの間の改行がレイアウトに反映されてしまう場合があるので、 これを防ぐ方法です。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • テーブルの中の背景画像

    windowsでHTMLを制作しています。 テーブルの中にテーブルを入れてレイアウトしているのですが、 大きいほうのテーブルに背景画像を指定、 中に入れた小さいテーブルには下の背景をそのまま反映させたいと思います。 IEでは問題なく表示されますが、ネスケで見ると、 小さいテーブルにもダブって背景画像が出てきてしまいます。 解消するタグはあるのでしょうか。

    • ベストアンサー
    • HTML
  • 画像ははみ出すけど文字ははみ出さないtable

    こんにちは tableでwidthを600に設定すると、600まで行ったら自動改行されますが、 そのテーブルの中に幅が600を超える画像を入れると、画像がはみ出して文字も画像の横幅に合わせて改行してしまいます。 これを、画像は600を超えるとテーブル枠をはみだしますが、 文字はそのまま600の位置まで来たら改行される という風にしたいのです。 つまりブログみたいな形にしたいです。 tableでなくてもかまいません。 よろしくおねがいします。

    • ベストアンサー
    • CSS
  • DreamWeaver8 テーブル間のセル行幅変更

    DreamWeaver8にて4行3列のテーブルを作成しました。 各セルの中に画像を隙間なく埋め込もうとしているのですが、 画像の上下に余白がついてしまうので、セル幅を変えようと セルのラインをクリック→ドラッグして行幅を狭くしたいのですが、 他の動かしたくないセルの行幅までも動いてしまい、テーブル全体が 大きくなってしまいます。 任意の1つのセルのみ行列幅を変更したい場合はどのように すればよろしいのでしょうか。

  • 画像がテーブル内に収まらない

    IEを使っているのですが テーブルの中に縮小した画像を入れると、 元の画像のサイズ分、テーブルが広がってしまいます。 テーブルのタグは <TABLE> <TBODY> <TR> <TD><A href="aaa.html"><IMG class=size src="/image/aaa.jpg"></A></TD></TR></TBODY></TABLE> このような感じです。 スタイルシートで sizeは } IMG.size { ZOOM: 20% } のように指定しています。 IE8の時は 画像をクリックする時も、マウスカーソルで画像を押してる時だけ元の画像サイズが、点々で表示されます。 IE9の場合も同じく画像が広がりますが マウスカーソルを画像に当てても点々は表示されません。 スレイプニル等のブラウザなら、テーブルの中に画像を入れても 画像は指定したサイズで表示され、テーブルに収まります。 テーブルのサイズを <TABLE width="30%"> としても、やはり画像の元サイズを基準にテーブルも広がってしまいます。

  • 画像を使ったテーブルで隙間ができてしまいます

    画像を枠に使ったテーブルをHTMLで作成し、FC2ブログに載せています。 Chrome上ではうまく表示されるものの、IE、Firefoxでは Rowの上に隙間ができてしまい、枠画像が正しく表示されません。 ----------Tableの基本構造---------- <table cellspacing="0" cellpadding="0" border="0" width="x" height="y" bgcolor="#FFFFFF"> <tr><td><img src="左上角"></td> <td><img src="上部"></td> <td><img src="右上角"></td></tr> <tr><td width="15"><img src="左1列目"></td> <td style="color:# … ;"> 内容1</td> <td width="15"><img src="右1列目"></td></tr> <tr><td width="15"><img src="左2列目"></td> <td style="color:# … ;"> 内容2</td> <td width="15"><img src="右2列目"></td></tr> <tr><td><img src="左下角"></td> <td><img src="下部"></td> <td><img src="右下角"></td> </tr></table> -------------以上-------------- 上記のものよりも実際は行と列を増やしておりますが、基本的に増殖しているだけです。 1行目と2行目の間に隙間ができて縦の画像枠が細切れになっています。 隙間ができているのは行の下ではなく、上の部分のように見えます。(背景色の見え方などから) テーブルのみの上記コードは、ローカル環境ではIEでも正しく表示されるため、 ブログにアップした際乱れるのは、スタイルシートの影響かと考えております。 自分でそれらしいところをいろいろ設定をいじりましたが改善しません。 ということで、 ≪スタイルシートの設定で、画像を枠に使ったテーブルの隙間に影響を与えうる要素≫ が何が考えられるか教えて頂ければと存じます。 なお、使っているStyle Sheetは以下のものですが、 http://blog-imgs-30-origin.fc2.com/w/m/k/wmks/wm_gienah_R.html TableにかかわるStyle部分はコメントアウトしましたので、テーブル自体のスタイルは 適用されていないはずです。

    • ベストアンサー
    • CSS
  • テーブル内の画像の隙間

    私はmac OS10.3.4 IE5.2を使っています。 テーブル内で画像を使ったとき、サファリで見たら何ともないのですが IEだと左に寄せたら隙間はないのに右によせると隙間ができてしまうのです。(ちなみに何故か中央にもできません) tdより後に空白を入れないようにするといいと書いてあったのを実行してもどうにもなりません。 どうか知恵を貸してください。お願いします。

  • テーブルの隙間について

    テーブルについてあまり理解できていませんが、理解しようとやってはみるもののうまくいきません。 今までビルダーの6ではなんとなくできたからこれでいいやでやってきました。ですからテーブルなど自分がややこしいと思ったものは使わずにきました。 ですがホームページビルダー10を手に入れ、今ホームページをリニューアル中でして、今回は自分で満足できるものを作りたいと思っています。 ですがテーブルがどうもうまくいきません。 セルとセルの繋がるところがうまくいかず画像を入れると隙間ができてしまいます。罫線の幅を0にして枠表示のチェックもはずしているのですが画像が繋がってくれません。 どうしたらよいのでしょうか? よろしくお願いいたします。

  • テーブルについて

    初心者でHTMLでHPを作成中です。 テーブルを上中下と作成し、上下に色をつけ、中に画像を入れました。 ところが画像の外枠に1mm程度の白いスペースができてしまいます。 隙間をなくす方法(ソース)を教えてください。

  • テーブルの隙間を無くしたい

    DreamWeaverCS4を使いホームページを作成しております。そこでテーブルについて、狙い通りに上手く表示が出来なくて困っております。どなたかご指導アドバイスをお願い致します。具体的な内容は下記のとおりです。 ・テーブルを「7列2行(全体の大きさは横700px×縦100px)」で作成し、内訳は1行目は、一枠横100px×縦50pxの大きさで7枠作成。2行目は横700px×50pxで作成。 上記内容のテーブル1行目に横100px×縦50pxのサイズの画像を7つ挿入。そして2行目には横700px×縦50pxの画像を1つ挿入しました。 そしてテーブルの設定は「ボーダーは0」です。 しかし、画像挿入後には2行目の画像横700px×縦50pxが入っているテーブルに隙間が出来て背景が見えてしまいます。1行目を見ると…微妙に各画像間の間に隙間が空いていて、この隙間が全体的に700pxを超えているようなんです。それで、2行目の画像に対して背景が見えて(テーブルの幅が広がってしまっています)いるのです。 そこでですが、画像を配置後にテーブルの隙間をきっちりと無くして背景が見えなくする方法ってあるのでしょうか? 解る方がいましたら…ご指導…アドバイスをお願い致します…。よろしくお願い致します…。

    • ベストアンサー
    • HTML
  • TABLEのなかに画像を入れたい

    <table>の<td>~</td>のなかに以下の条件で画像を入れたいのですができますか? ・画像は一回だけ使用する(繰り返さない) ・(もしできるようなら)<td>の中の文章量によってサイズが長くなったり短くなったときに画像を自動でサイズを合わせられるようにしたい。 イメージとしてはbackgroundをつかって背景画像を指定。 その画像の上に文章を書いていく。 文章の量によって将来的にはおそらく縦に伸びていってしまうので、そのたびに画像を編集しないですむよう縦長にはなるが、自動で縦横の比率を調整できるようにする。(テーブルと同じサイズにする) です。<body>のなかに画像固定をして入れるのはわかるのですが、<table>ではやり方がわからなくて困っています。(同じようにstyleを使うのでしょうかね?)<table>~</table>の中を簡単に書いていただけると助かります。

    • ベストアンサー
    • HTML