
テーブル内に画像を1枚表示したいです。
下記のようにIMGタグを用いると、画像が表示されますが、
横幅が100%の時の大きさで枠が表示
されます。横に余白があります。
この余白を無くして、テーブルの枠線が画像をピッタリ
囲む様にしたいです。
どなたか、ご教授願います。初心者なので詳しくお願い
します。
----------------------------------------------
<table border=1>
<tr>
<td >
<img src='./test_size/image2.jpg' width='50%' >
</td>
</tr>
</table>
No.1ベストアンサー
- 回答日時:
画像のサイズが「幅50%」とありますが、
これは画像を半分の幅で表示したいと言うことでしょうか。
そういうことでないのでしたら、下記のようにセル幅(td width)を画像サイズに合わせれば大丈夫ですよ。
<table border=1>
<tr>
<td width="画像の幅(ピクセル数)">
<img src="../test_size/image2.jpg" width="画像の幅(ピクセル数)" height="画像の高さ(ピクセル数">
</td>
</tr>
</table>
補足ですが、画像を表示する際、imgタグには画像サイズも明記するとブラウザ側での読み込みが速くなります。

No.3
- 回答日時:
テーブルで画像を囲い、そのテーブルの中の余白部分をすべて排除したいということでしたら、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%の横幅(読み込む画像のサイズの半分ではありません)になるように領域を確保するはずですので、この指定をしている場合には必ず画像の横に空白ができてしまうと思います。 表示したいサイズをピクセル単位で指定する必要があるでしょう。
参考になれば幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
-
大麻の使用罪がなかった理由や法改正での変更点、他国との違いを弁護士が解説
ドイツで2024年4月に大麻が合法化され、その2ヶ月後にサッカーEURO2024が行われた。その際、ドイツ警察は大会運営における治安維持の一つの方針として「アルコールを飲んでいるグループと、大麻を吸っているグループ...
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
FOMA対応サイトでの背景指定の...
-
HTMLについて
-
テーブルが自動改行される
-
CSSで文字を一番下の中央に表示...
-
dreamweaver☆背景画像の繰り返し
-
テーブルを使ったレイアウトで
-
tableの背景色のみ半透明にする
-
テーブルの背景を透過する方法
-
DreamweaverMX2004でのテーブル...
-
2つのテーブルを左右に表示した...
-
ホームページのテーブルに斜線...
-
テーブルを中央に配置
-
テーブルの中身がないセルについて
-
bodyで一括指定したものの部分...
-
tableタグ内で、空白セルでも罫...
-
テーブルデータのスクロール
-
TRタグの余白をcssで設定するには
-
CSSで特定のテーブルだけに...
-
テーブルの一部分のセルだけに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの横に画像を
-
テーブル内に画像を表示したい。
-
テーブルの位置を細かく指定し...
-
箇条書きリストのすぐ横に画像...
-
ウィンドウのサイズを変えても...
-
テーブルの高さ幅の固定方
-
プルダウンの表示位置
-
一つのテーブル内の文字色だけ...
-
テーブル内でdlタグ使った際の...
-
HTMLでテーブルを横に並べる方法
-
tableのheight指定が効かない
-
画像の横にテーブルを。。。
-
2つのテーブルを左右に表示した...
-
ディスプレイの解像度について。
-
テーブルの横に文字を置くタグ
-
ヘッダー固定のスクロールが可...
-
複数のテーブルを無条件に中央...
-
Dreamweaverでテーブルの列幅を...
-
Visual C++ 6.0 で SQLServer...
おすすめ情報