tableのズレについて

質問

はじめて投稿します。
説明がわかりづらいかも知れませんが、
どなたかお知恵をお貸し頂けると助かります。

当方、パソコンは仕事ではなく私用で使っておりますが、
サイトをいくつか持っており、
ＨＴＭＬとＣＳＳだけは独学である程度勉強しましたが、
それ以外のパソコン知識は全くの素人ですので、
出来ればパソコンの専門用語等は使わずご教授頂けると助かります。
わががま言ってごめんなさい。ｍ（＿＿）ｍ

表題のtableのズレについてですが、
tableタグを使用しておおまかなサイトの枠組みを作っているのですが、
その中でwidthによってtdタグの幅を指定している部分があるのですが、
そのtdタグ内に画像を貼ると指定した幅がズレるのです。
指定したwidthの幅を超える大きな画像を貼った場合ならわかるのですが、
かなり幅に余裕のある画像を貼ってもズレるのです。
考えられる理由としてはどのような事が考えられるでしょうか？

本等を読んでも全然理由が見当たりません。
どなたかご教授頂けると助かります。
どうかよろしくお願いいたします。ｍ（＿＿）ｍ

回答No.6

leap_day · ベストアンサー

こんにちは

id名はNo.5様の言うようにアルファベットからはじめてくださいね（＾＾）

でセル幅を絶対に変えたくないというのであれば方法はあります

<p><img src="・・・.jpg"></p>

の部分を

<p id="a3"><img src="***.jpg"></p>

のように変えて

stylesheet内に以下を追加してください

#a3{
position:relative;
height:262px;
}
#a3 img{
position:absolute;
top:0px;
left:50px;
}

imgの位置は#a3 imgのtopとleftのpx数を変えて調整してください

お礼

ご回答ありがとうございます。ｍ（＿＿）ｍ

おっしゃる様にすればセル幅は固定されました！
ありがとうございます。ｍ（＿＿）ｍ

ちなみにこのスタイル指定はwidthではなくheightを指定していますよね？
という事は幅が問題なのではなく高さが問題だという事でしょうか？

それと、ページ毎に異なるサイズの画像を使用していて、
ページが相当数ありますので、
画像の高さを指定するこの方法で対応するのはかなり大変です。

それと、以前のものは何がマズかったのか教えて頂けるとありがたいです。

図々しいことばかり申しまして、申し訳ありません。ｍ（＿＿）ｍ

回答No.7

leap_day

こんにちは

HTMLのソースはページ毎に書かれていてそこで表示される画像は固定のものという前提で話します

stylesheet

#a3{
position:relative;
}
#a3 img{
position:absolute;
}

HTML

<p id="a3" style="height:100px;" ><img src="img/00.jpg" style="top:0px;left:100px;"></p>
<p>あ</p>
<p>あ</p>
<p id="a3" style="height:262px;"><img src="img/01.jpg" style="top:0px;left:0px;"></p>

のようにすれば外部cssは同じものを呼び出せばいいですし画像によって高さと位置を変えることができます

height指定してやったのはheight:262px;を消して表示してみれば分かると思いますがtextの上に画像が配置される状態になるのでその配置スペースを作ってやったわけです（＾＾）

ズレる理由については僕も分かりません（＞＜）
恐らくwidth指定してやった場合幅が指定より超えるとそのtable内で配分の微調整がおこなわれる為ではないでしょうか？
<div id="main"> widthを消すと変わりませんし、width:830pxあたりでようやくズレが出にくくなくなりましたので・・・

他の画像でも大丈夫のようならこちらの方が簡単ですね
#main {
width:830px;
}

お礼

ご回答ありがとうございます。ｍ（＿＿）ｍ

やはりＨＴＭＬソースに書き込むスタイルを増やすしかなくなりますよね・・。
ＳＥＯ対策上、極力スタイルはＣＳＳへ放り込みたくて、
以前はテーブルタグは一切使わずに全てＣＳＳの段組を使っていたのですが、
テーブル以上にズレが多くて、少し構成を変えるともう全体を修正しないといけなくなって・・。
それで部分的にテーブルを使っているのですが、
どうにもこうにも難しいですね＾＾；

485pxに指定しているセルをそのままにして、
280pxに指定しているセルの幅指定をやめてみました。
そうするとズレが納まりました。
485pxのセルが空白だとズレますが、
このセルにはテキストをたくさん書き込むので、
全てのページで横幅一杯に使いますので、
ズレているのだとは思いますが全ページで同じ幅に統一されるようになりました。

ＨＴＭＬ言語については理解不足のまま終わりますが、
こちらの方がソースがシンプルなので、
これで行こうと思います。

それにしてもプロの方々でも試行錯誤しながらされているのですね＾＾；
ＨＴＭＬ言語やＣＳＳ言語自体に不備があるのでしょうか。

ともかくお陰さまで目先の問題はとりあえず解決しました。
皆様にはお手数をお掛けしまして大変申し訳ありません。
どうも本当にありがとうございました。助かりました。ｍ（＿＿）ｍ

回答No.5

key-child

id名が不正

http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/types.html#type-name

お礼

ご回答ありがとうございます。ｍ（＿＿）ｍ

ＩＤ名って、アルファベットで始めないといけなかったのですね。
だんだんＩＤ名を名付けるのが面倒になって、
どんどん簡素化しているうちに
"1"とか"2"とかに省略してしまってました＾＾；

ただ、それでもスタイルはしっかり適用されていて、
今まで気になったことはなかったんです。
で、今回も修正して試してみましたが、変化なしでした・・・。

回答No.4

noname#39970

tableタグ用styleとして
border-collapse:collapse
を追加するとどう？

お礼

度重なるご回答ありがとうございます。ｍ（＿＿）ｍ

やってみましたがダメでした。ｏｒｚ

回答No.3

buonodog

よくわからないのでHTMLのソースを載せていただけると答えやすいかもしれません。

お礼

ご回答ありがとうございます。ｍ（＿＿）ｍ

ソースをそのまま載せると個人の特定に繋がってしまうため、
お言葉に甘えまして、テキストを削除したものを載せてみました。

以下、ＨＴＭＬソースのbodyタグの間のソースです。～～～

<div id="main">
<h1></h1>
<table cellspacing="0" cellpadding="10">
<tr><td width="280px" bgcolor="khaki" valign="top">
<div id="1">
<h2></h2>
<p></p>
<p></p>
<p></p>
<h2></h2>
<p></p>
<p></p>
<p></p>
<p></p>
</td>
</div>
<td></td>
<td width="485px" valign="top" rowspan="2">
<div id="2">
<h2></h2>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><img src="・・・.jpg"></p>
</div>
</td>
</tr><tr></tr>
<tr><td colspan="3" bgcolor="lightblue" width="780px" align="center">
<p></p>
</td></tr>
</table>
</div>
～～～～～～～～～～～～～～～

以下が外付けのＣＳＳです。～～～

body{text-align:center;
margin:0;}

#main{width:780px;
text-align:left;}

h1{margin:0 0 10px 0;}

h2{font-size:90%;
border-bottom:2px solid darkslategray;
margin:10px 0;
padding:0;}

p{font-size:90%;
padding:0;
margin:5px 3px;}

#2 p{font-size:95%;
padding:3px;
margin:1px 15px;}

#1{margin:0;
padding:0;}

#2{margin:0;
padding:0;}
～～～～～～～～～～～～～～～

・・・.jpgの画像サイズは220×262です。

このソースの幅485pxのセル内に幅220pxの画像を貼ると、
セルが膨張してか、khaki色のセルが縮むのです＾＾；

お手数をお掛けいたしますがご教授頂けると幸いです。ｍ（＿＿）ｍ

回答No.2

noname#39970

そうそう　それと

<td>
<img>
</td>

って書くと改行が空白になって隙間が空くからズレるよ
↓
<td><img></td>

あるいは
<td
><img
></td>

imgをaタグで囲ってるならそれのstyle指定も忘れずに

お礼

ご回答ありがとうございます。ｍ（＿＿）ｍ

サイトの大きな枠組みに使っているので、
<td>
<img>
</td>
どころか、
<td>
<h2></h2>
<h3></h3>
<p></p>
<p></p>
<h3></h3>
<p></p>
<p></p>
<h2></h2>
<p></p>
<p></p>
<img>
</td>
のようになっています＾＾；
相当ヨコ長のソースになりましたが、
<td><img></td>
の形につなげてみましたが、
それでもやっぱり変化ありませんでした。ｏｒｚ

リンクを貼っている画像でも貼っていない画像でも同様の現象が起きます。
ちなみにwidthは485pxに設定してあるのですが、
幅200px程度の画像でもズレるんです。
ドラッグしてみても明らかにwidth幅より小さな画像なのですが・・。

回答No.1

noname#39970

img{margin:0;padding:0}

どうなる？

お礼

ご回答ありがとうございます。ｍ（＿＿）ｍ

早速やってみましたが変化ありませんでした。ｏｒｚ