よろしくお願いします。
テーブルの以下のタグ並びで、
<img src=>の部分の画像jpgを、枠にピッタリ表示したいのです。
以前作った他のhtmlファイルでは、画像のサイズに変化があっても、自動的に枠にピッタリ表示でき、
同じ通りタグを書いたはずなのですが、
なぜか?今回は、この画像が、
一行二列目の枠(これが大きくなってしまう)
のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。(枠の右側に不要な余白ができてしまう)
枠や画像のサイズを固定しても同じです。
この画像の枠以外は、画像ではなくテキストです。
うまくいかないのはなぜなのでしょう?
どこに間違いがあるのでしょうか、教えてください、お願いいたします。
<table width="85%"border="1" cellpadding="5" cellspacing="5" align="center">
<tr><td>一行一列目
</td>
<td rowspan="3">1行二列目~ココの部分~<img src="" width="" height="" align="center" valign="top" alt="">
</td></tr>
<tr><td>2行一列
</td></tr>
<tr><td>3行一列
</td></tr>
<tr><td>4行一列目
</td>
<td>4行二列目
</td></tr>
<tr><td colspan="2">5行一列
</td></tr>
<tr><td colspan="2">6行一列
</td></tr></table>
No.2ベストアンサー
- 回答日時:
私の場合これで反映されていますのでもうお力になれないと思いますが一つだけ。
私もたまにタグでやってておかしくなるときがあります。
そのときは、一部を修正して直る場合もありますがそうでない場合もあります。
そういう場合一度その部分だけを、別のページで一からすべて作り直してみると直るときがあります。
別のページでも一からすべてを記入するのではなく、徐々にタグを増やしていってどこが悪いのかを探してみるのも一つの手です。
この回答への補足
日付かわって、
今日、またあちこち調べ直してトライしてみたところ、
あの画像のセルを、こうやって指定してみたら、ピタッと反映されました。
<td style="background:url(/*画像*/) no-repeat center top" rowspan="3"></td>
スタイルで背景として固定をする、という方法もあったのですね。
未だに?以前のタグとの互換がどうか不明で、
まだまだ知識不足ですが、勉強になりました。
おっくうがらずに、コツコツやっていきます。
アドバイスありがとうございました!
たびたびありがとうございます。
アドバイス、心当たりにピッタリして助かりました。
そうですね、細かなチェックを繰り返しても、タグってとてもデリケート?
気分を変えて、もう一度新しいメモ帳白紙にコツコツ打ち直してみます。コピー・ペーストの反復で、どこかに隙間かモレか余計な閉めがあるのかもしれません。
それからもうひとつ、
気になったのですが、いわゆる「画像のあとの文字の回り込み」~というものにpaddingがひっかかる場合ってあるのでしょうか?
上手く反映している方のタグはpaddingを"5"で指定していても、どれもこれも画像サイズの縦横の変化のあるのにもかかわらず、ピタッと枠が決まっているのですが・・・。
とり急ぎ、お礼申しあげます。
No.1
- 回答日時:
>のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。
(枠の右側に不要な余白ができてしまう)まず画像の左に浮いたようなものが出来てしまうのは「cellpadding="5"」が原因ではないですか?
>(枠の右側に不要な余白ができてしまう)
>枠や画像のサイズを固定しても同じです。
たぶんですが「table width="85%"」が原因かと、とにかくテーブルの表示が画面表示の85%になってればOKと書いてますから。
「1行二列目~ココの部分~」に画像を入れて、その左の枠に文字を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">2行一列</td></tr>
<tr><td width="660" height="76">3行一列</td></tr>
<tr><td width="300">4行一列目</td>
<td width="360">4行二列目</td></tr>
<tr><td colspan="2" width="660">5行一列</td></tr>
<tr><td colspan="2" width="660">6行一列</td></tr>
</table>
※height="76"なのは、枠線の太さを「cellspacing="5"」としているため、(240-(5*2))/3=76.6のため
この回答への補足
ありがとうございます。
アドバイスに従って、paddingをはずしてテーブルやtrとtdの幅を指定しても、反映されませんでした・・・。
以前に元となったタグを作った時と、
PCやバージョンが変わったためでしょうか。
そういう原因しか思い当たらず、納得できるのですが、
なぜ、以前のタグではな~んにも指定していなかったのに、
画像が枠にピタッと貼られたのか?さっぱりわからなくなってしまいました。
未だに、その以前作成のページが同じサイトに並列して思い通りに反映されているのを見ると、悔しいです・・・。
<!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">
この指定も全く同じなのですが・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- Perl PERL 1 2022/04/26 14:15
このQ&Aを見た人はこんなQ&Aも見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
テーブル内に画像を表示したい。
HTML・CSS
-
htmlのtable内に画像
HTML・CSS
-
table で画像をピッタリとくっつけたい
HTML・CSS
-
-
4
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
5
<tbody>は何のためにあるんでしょうか?
その他(ソフトウェア)
-
6
HTML <td></td>タグ セル内余白を無くす方法
ホームページ作成・プログラミング
-
7
HTML5で、テーブル内tdタグの高さを常に固定に
HTML・CSS
-
8
table内で画像と文字をセンター合わせするには?
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルの行の高さを指定する...
-
文字列が入っているtdを削除せ...
-
cssで、表示されるテキストによ...
-
HTMLで文とテーブルの間が空く。
-
EXCELのセル内にHTMLタグを含む...
-
テーブルの表示がずれます
-
tableタグ内で、空白セルでも罫...
-
テーブルのヘッダとボディの幅...
-
HTMLのテーブルで桁をそろ...
-
逆L字の表(table)組み
-
tableでcolspanを使うと次行以...
-
表の1列だけをCSSを使って右揃...
-
tableの要素(tr、td)に一...
-
ホームページ 表の上の余白を...
-
tableにtableをネストした場合
-
ラジオボタンの選択範囲について
-
テーブルの任意の列を非表示に...
-
HTML <td></td>タグ セル内余...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
HTML <td></td>タグ セル内余...
-
cssで、表示されるテキストによ...
-
テーブルの表示がずれます
-
テーブルの行の高さを指定する...
-
中に<table></table>が使えるア...
-
テーブルのセルに画像をピッタ...
-
スタイルシートで colspan=3と...
-
ホームページ 表の上の余白を...
-
EXCELからhtmlへの変換で罫線が...
-
表の1列だけをCSSを使って右揃...
-
tableの要素(tr、td)に一...
-
逆L字の表(table)組み
-
テーブルタグのセルの幅の一部...
-
HTMLで外部ファイルの読み込み
-
表の中の列の順番を入れ替える...
おすすめ情報