テーブルのセルに画像をピッタリ表示するには

解決済

質問者：b_oleander
質問日時：2007/07/28 10:33
回答数：2件

よろしくお願いします。

テーブルの以下のタグ並びで、
<img src=>の部分の画像jpgを、枠にピッタリ表示したいのです。
以前作った他のhtmlファイルでは、画像のサイズに変化があっても、自動的に枠にピッタリ表示でき、
同じ通りタグを書いたはずなのですが、
なぜか？今回は、この画像が、
一行二列目の枠（これが大きくなってしまう）
のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。（枠の右側に不要な余白ができてしまう）
枠や画像のサイズを固定しても同じです。
この画像の枠以外は、画像ではなくテキストです。
うまくいかないのはなぜなのでしょう？
どこに間違いがあるのでしょうか、教えてください、お願いいたします。

<table width="85%"border="1" cellpadding="5" cellspacing="5" align="center">

<tr><td>一行一列目
　　　　</td>
<td rowspan="3">１行二列目～ココの部分～<img src="" width="" height="" align="center" valign="top" alt="">
</td></tr>
<tr><td>２行一列
</td></tr>
<tr><td>３行一列
</td></tr>
<tr><td>４行一列目
</td>
<td>４行二列目
</td></tr>
<tr><td colspan="2">５行一列
　　　　　　　　　　</td></tr>
<tr><td colspan="2">６行一列
　　　　　　　　　　</td></tr></table>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

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

「テーブル画像」に関するQ&A： html初心者です。画像サイズについて。テーブルの中に、文字と、画像リンクを貼っているのですが画像

さらに表示

「セル画像」に関するQ&A：範囲のあるセルに画像（ｊｐｇ）を貼り付けたい。

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： Night-cafe
回答日時：2007/07/28 21:39

私の場合これで反映されていますのでもうお力になれないと思いますが一つだけ。

私もたまにタグでやってておかしくなるときがあります。
そのときは、一部を修正して直る場合もありますがそうでない場合もあります。
そういう場合一度その部分だけを、別のページで一からすべて作り直してみると直るときがあります。
別のページでも一からすべてを記入するのではなく、徐々にタグを増やしていってどこが悪いのかを探してみるのも一つの手です。

この回答への補足

日付かわって、
今日、またあちこち調べ直してトライしてみたところ、
あの画像のセルを、こうやって指定してみたら、ピタッと反映されました。

<td style="background:url(/*画像*/) no-repeat center top" rowspan="3"></td>

スタイルで背景として固定をする、という方法もあったのですね。
未だに？以前のタグとの互換がどうか不明で、
まだまだ知識不足ですが、勉強になりました。
おっくうがらずに、コツコツやっていきます。
アドバイスありがとうございました！

補足日時：2007/07/29 12:06

通報する

- 1
- 件

通報する

この回答へのお礼

たびたびありがとうございます。
アドバイス、心当たりにピッタリして助かりました。
そうですね、細かなチェックを繰り返しても、タグってとてもデリケート？
気分を変えて、もう一度新しいメモ帳白紙にコツコツ打ち直してみます。コピー・ペーストの反復で、どこかに隙間かモレか余計な閉めがあるのかもしれません。

それからもうひとつ、
気になったのですが、いわゆる「画像のあとの文字の回り込み」～というものにpaddingがひっかかる場合ってあるのでしょうか？
上手く反映している方のタグはpaddingを"5"で指定していても、どれもこれも画像サイズの縦横の変化のあるのにもかかわらず、ピタッと枠が決まっているのですが・・・。
とり急ぎ、お礼申しあげます。

通報する

お礼日時：2007/07/28 22:01

No.1

回答者： Night-cafe
回答日時：2007/07/28 17:59

>のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。

（枠の右側に不要な余白ができてしまう）
まず画像の左に浮いたようなものが出来てしまうのは「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">

この指定も全く同じなのですが・・・。

補足日時：2007/07/28 20:44

通報する

- 0
- 件

通報する

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

「セル画像」に関するQ&A：エクセルで画像を透過させて画像の上に入力した文字を表示させる方法

さらに表示

「テーブル画像」に関するQ&A： Accessのフォームで商品の画像を表示したい

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

質問する（無料）

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

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

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

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

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

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

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

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

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

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

Aベストアンサー

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

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

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

他の回答も見る

Qテーブルセル余白（例えば左側だけ、上側だけ、など）

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ５ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="ＸＸ"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

１つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。右が 10px。下が 20px。左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">

</style>

他の回答も見る

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか？
<TD>タグや<TR>タグのところでいじくるのですか？

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
＃2の方法ですね。

テーブルごとやセル（<TD>）ごとにサイズを変更するには
スタイルシート（CSS）を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル（<TD>）ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

＃1の方法だとページ内の全てのセル（<TD>）に設定することになります。

スタイルシート（CSS）はこれら以外にも
いろいろな設定方法があります。

他の回答も見る

Q画像とテーブルの隙間をなくす。

トップページ一番上に画像を配置し、その下に表を載せ、その表の中にコンテンツを掲載しようと思っています。
ソースはこんな感じです。

<IMG src="images/obj_top_main.jpg" width="860" height="210" border="0">
<TABLE border="0" width="860" height="100%" cellpadding="0" cellspacing="0">
<TR>
<TD bgcolor="#ffffff">ここにコンテンツ</TD>
</TR>
</TABLE>

この、「画像と表の間」を0にして付けたいのですが、方法がわかりません。
CSSで出来そうな気がするのですが…
方法があれば教えてください。

Aベストアンサー

テーブルにクラスをつけて、

.クラス名{margin-top:0px;}

とするとどうでしょうか。

若しくは、画像とテーブルの幅が同じなので、画像をテーブルの中に入れてしまうという手もあると思います。

他の回答も見る

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか？

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver（ドリームウィーバー）2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px　右20px　下0　左30px　の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px　右右20px　の2方の隙間が開く。

他の回答も見る

Qtableの幅・高さの固定

初心者です。Dreamweaver2004MX操作の質問です。

【問題点
テーブルに適当な幅・高さを作成し、そのテーブルに画像ファイルを
挿入した際、テーブルの大きさより画像ファイルの幅・高さが多きい
場合、画像や文字を優先される様でテーブルサイズが自動的に挿入したファイルやリンク先の画像ファイルの大きさ比例してテーブルの幅・高さが変わってしまいます。

【やりたい事
テーブルの幅・高さを固定し、そのテーブルにそのテーブル幅・高さより大きな画像ファイルや文字を挿入してもあくまで、
固定されたテーブル幅・高さに合わせ画像や文字を拡小表示(挿入)する事って出来るのでしょうか？
大きい画像ほど、つぶれた画像になっても構いません。

スタイルシートの適用や拡張モードでの操作、
プロパティ等操作してみましたが、全くうまくいきません。
どなたかご教示願いますm(__)m

Aベストアンサー

こんにちは。
画像がいくつもあるのなら
table td{
width:(tdの幅)px;
height:(tdの高さ)px;
overflow:hidden;
}
table td img{
max-width:(画像の幅の最大値)px;
max-height:(画像の高さの最大値)px;
}
/* * * IE6用 * * */
*html table td img{
width:(画像の幅)px;
height:(画像の高さ)px;
}
のようにCSSで指定されてはどうでしょうか？

他の回答も見る

QHTML タグ　セル内余白を無くす方法

次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法？

<table border="1">
<tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td><br></td><td>
</table>
テーブル内を２列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合...続きを読む

Aベストアンサー

表を入れ子にしたらどうでしょうか↓

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td>　</td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>...続きを読む

他の回答も見る

Qテーブルとテーブルの間隔について

同じサイズのテーブル縦にいくつか並べているのですが、今現在は全く隙間無くくっついています。

これを少しだけ（改行タグ<br>の半分以）間隔を空けたいのですが、どうすれば良いのでしょうか？

Aベストアンサー

一番シンプルな方法としては
<table>タグを<table style="margin-bottom:○○px">と書き直します。

他の回答も見る

Qホームページで画像を横に並べるには？

ホームページ作成超初心者です。
初歩的な質問で恐縮です。

ホームページに画像を横に並べて（左→右）表示させたいと思っています。

<img src="画像ファイルのURL">
というHTMLで画像を表示できるところまでわかったのですが、続けて入れると画像が縦に並んでしまいます。

ド素人で申し訳ないですが、どなたか方法を教えて頂けませんか？
よろしくお願いいたします。

Aベストアンサー

<img src="画像ファイルのURL"><img src="画像ファイルのURL"><img src="画像ファイルのURL">・・・

とした場合、横に並びますよ
ただし、画像のサイズとブラウザサイズにもよりますが・・・

ブラウザサイズを無視して横に並べたいのであればTableを組んでしまうのも手です

<table>
<tr>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
</tr>
</table>

これで、横に並べれます

あと、アドバイス
<img src="画像ファイルのURL">　→　<img src="画像ファイルのURL" width="横寸法" height="縦寸法" alt="画像の名前">
のように、width、height、altは指定しましょう

他の回答も見る

Qテーブルタグの中にdivを含めてはダメ？

テーブルタグの中にdiv要素を入れるとダメなのでしょうか？
何か不都合でもあるのでしょうか？
何かご存知の方がいれば教えていただけませんか？

Aベストアンサー

以下、HTML 4.01での話です。（XHTMLでもほぼ同じだと思います）

tableタグ直下に書けるのは、caption，col，colgroup，head，tfoot，tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth，tdが書けることになっています（それ以外は不可）。

th，tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth，tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

他の回答も見る

ページトップ