テーブル内に画像を1枚表示したいです。

下記のようにIMGタグを用いると、画像が表示されますが、
横幅が100%の時の大きさで枠が表示
されます。横に余白があります。

この余白を無くして、テーブルの枠線が画像をピッタリ
囲む様にしたいです。

どなたか、ご教授願います。初心者なので詳しくお願い
します。

----------------------------------------------

<table border=1>
 <tr>
   <td >
<img src='./test_size/image2.jpg' width='50%' >
   </td>
 </tr>
</table>

このQ&Aに関連する最新のQ&A

A 回答 (3件)

画像のサイズが「幅50%」とありますが、


これは画像を半分の幅で表示したいと言うことでしょうか。
そういうことでないのでしたら、下記のようにセル幅(td width)を画像サイズに合わせれば大丈夫ですよ。

<table border=1>
 <tr>
   <td width="画像の幅(ピクセル数)">
<img src="../test_size/image2.jpg" width="画像の幅(ピクセル数)" height="画像の高さ(ピクセル数">
   </td>
 </tr>
</table>

補足ですが、画像を表示する際、imgタグには画像サイズも明記するとブラウザ側での読み込みが速くなります。
    • good
    • 0

テーブルで画像を囲い、そのテーブルの中の余白部分をすべて排除したいということでしたら、img要素のwidthをパーセントではなくピクセル単位で指定して、table要素かtd要素の横幅も画像の幅と同じように指定しておくとよいでしょう。

ついでに、table要素のcellpaddingを0にしておくと、完全にピッタリと画像と枠がくっつくと思います。
あと、ソース内の改行コードは、ブラウザで表示する時に半角スペースとして解釈される場合があるので、隙間を詰めたい時にはそれらの改行をなくしておくのが良いでしょう(この場合は、<td></td>タグの前後の改行を消す)。
以下はソース例です。

<table border="1" cellpadding="0" width="画像の表示幅">
<tr>
<td><img src='./test_size/image2.jpg' width='画像の表示幅'></td>
</tr>
</table>

なお、テーブルに対してスタイルシートが適用される場合、tableタグ内のwidthよりもスタイルシートが優先されることがあるので、もし上記のようなソースにしても同じように余白が出る場合は、

<table border="1" cellpadding="0" style="width:画像の表示幅(px);">
<tr>
<td><img src='./test_size/image2.jpg' width='画像の表示幅'></td>
</tr>
</table>

このようにしてみてください。

ちなみに、img要素のwidthを50%にする場合、その上の要素の50%の横幅(読み込む画像のサイズの半分ではありません)になるように領域を確保するはずですので、この指定をしている場合には必ず画像の横に空白ができてしまうと思います。 表示したいサイズをピクセル単位で指定する必要があるでしょう。

参考になれば幸いです。
    • good
    • 0

質問を上手く理解できませんが、


<table cellspacing="0" cellpadding="0" border="1">
ということでしょうか?
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

Q と、

<td></td> と、<td><BR></td>

ホームページビルダーで作ったホムペを、KompoZerというHTMLエディタで開くと、
テーブルのなにも入っていないセルに<BR>タグが勝手に挿入されてしまいます。
<td></td> と、<td><br></td> は、
ブラウザ上ではどちらでもちゃんと表示されるのですが、
HTML文法的にはどちらが正しいのでしょうか?
また、どちらも正しい場合、<br>がある・ないで、違いがあるのでしょうか?

※ホームページビルダー、KompoZerの善し悪しは無視してください。

Aベストアンサー

文法的にはどちらも正しいです。
ブラウザの種類やHTMLのモードによって、tdが空だと、見え方が違うケースがあります。
tableでborderを指定したときに、へこんで見えるかどうか。空でないとかならずへこんで見えます。

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

QTARGET=_blankと、

リンクに触れただけで、別ウインドウを開くには、どうしたら良いんでしょうか?
<a TARGET=_blank href=""onMouseOver="location.href='リンク先'"></a>
上は、どこが間違っているのでしょうか?
        

Aベストアンサー

<a href="" onMouseOver="window.open('リンク先')">ccc</a>
とかで良いのでは?

window.openについての詳細は書籍ネット等々で調べてください。

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

Qでテキストボックスとセルの間にわずかな隙間があいてしまう・・

<TABLE>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
</TALBLE>

こう書くときに、テキストボックスの下にわずかな隙間が
できるのを防ぎたいのですが、何か方法はありませんでしょうか?

Aベストアンサー

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>
</TABLE>
としていませんか?
HTMLとしては好ましくないと思いますが、<FORM>や</FORM>の前後にある<TR><TD>~</TD></TR>を取り除き、以下の様にします。
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<FORM ~>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD><INPUT TYPE="TEXT"></TD>
</TR>
<!-- ここまで -->
</FORM>
</TABLE>

尚、表の罫線を残すのであればBORDERを変更したりしてください。

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>...続きを読む

Q●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

Qで出る枠

を消すにはどうしたらいいのでしょうか?

Aベストアンサー

<a><img src="x.gif" border="0"></a>
で大丈夫だとおもいます。

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

Q■ 
~~ を表示することはできますか?

テーブルタグ
<table>
<tr>
<td>

をそのまま文字として表示することはできますでしょうか?

<を全角の<にすればいいのでしょうが、なにぶん、テーブルタグの量が膨大なため、手でいちいち直してたら数ヶ月、数年かかってしまいます。

タグをそのまま画面に表示させる良い方法はないでしょうか?

詳しい方いらっしゃいましたら教えていただけないでしょうか?

よろしくお願いします!

Aベストアンサー

タグの無効化というタグです

<xmp>タグ</xmp> タグを無効化にして文字として表示されます
良かったら使ってみて下さい


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング