テーブル内に画像を表示したい。

質問

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

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

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

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

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

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

回答No.1

mac-as · ベストアンサー

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

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

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

回答No.3

noname#199778

テーブルで画像を囲い、そのテーブルの中の余白部分をすべて排除したいということでしたら、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%の横幅(読み込む画像のサイズの半分ではありません)になるように領域を確保するはずですので、この指定をしている場合には必ず画像の横に空白ができてしまうと思います。 表示したいサイズをピクセル単位で指定する必要があるでしょう。

参考になれば幸いです。

回答No.2

the845t

質問を上手く理解できませんが、
<table cellspacing="0" cellpadding="0" border="1">
ということでしょうか？