こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

tableがずれる理由がわかりません

上のテーブルはずれないのですが
同じレイアウトの下のテーブルはずれます。
widthの指定がききません。
なぜでしょう??

前からこの現象はしていたのですが理由が知りたいです。
<table border="1" cellpadding="0" cellspacing="1">
<tr height="10" bgcolor="#cccccc">
<td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td>
</tr>
<tr height="10" bgcolor="#cccccc">
<td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td>
<td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td>
</tr>
<tr height="10" bgcolor="#cccccc">
<td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td>
<td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td>
</tr>
<tr height="10" bgcolor="#cccccc">
<td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td>
<td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td>
<td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td>
<td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td>
<td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td>
</tr>
</table>
<br />
<br />
<table border="1" cellpadding="0" cellspacing="1">
<tr height="10" bgcolor="#cccccc">
<td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td>
</tr>
<tr height="10" bgcolor="#cccccc">
<td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td>
<td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td>
</tr>
<tr height="10" bgcolor="#cccccc">
<td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td>
<td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td>
</tr>
<tr height="10" bgcolor="#cccccc">
<td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td>
<td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td>
</tr>
</table>

投稿日時 - 2007-02-27 21:05:58

QNo.2789249

すぐに回答ほしいです

質問者が選んだベストアンサー

No.3です。間違えました。

(誤)Firefoxで見ると、ずれもなく、2行2列の表(幅:40+70)にしか見えません。
(正)Firefoxで見ると、ずれもなく、2行2列の表(幅:40+90)にしか見えません。

投稿日時 - 2007-02-28 16:03:59

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

No.1さんの補足のソースを基に書かせていただきます。

セルは4個ですが、一応2行3列の表ですね。
2列目の幅は、いくつでしょうか?
"20"ではありません。頭の中で勝手に引き算してはいけません。
"0"です。正しくは、"null"または、"未定義"です。
だから、思ったような互い違いにはなりません。
ちょっとだけずれているのは、2列目のborderやcellspacingの幅によるものだと思います。
実際、<table border="0" cellpadding="0" cellspacing="0">
として、Firefoxで見ると、ずれもなく、2行2列の表(幅:40+70)にしか見えません。
IEだとやっぱりちょっとずれるんですけどね。。。

投稿日時 - 2007-02-28 13:26:02

お礼

すごく分かりやすかったです。
なるほどってかんじです。

投稿日時 - 2007-03-02 03:33:24

ANo.2

いや、ですから単純に、<td>に属性つけても認識されなかったりするからと言いたいのですが。

最初の表では最後の行で10*10のイメージ使って大きさを特定してますよね。
それを5列に分けてるので、ここで基準が出来てるわけです。

下の表にはそれがないので、ブラウザが適当な大きさを判断して間を取ってずれると。

投稿日時 - 2007-02-27 23:19:11

ANo.1

文法はなにを基準にされているんですか…?
http://members.jcom.home.ne.jp/pctips/www/DOCTYPE.html

<br />というタグは使えないはずです。

また、<tr>にheightなどの属性を持たせるのもよくないです。スタイルシートを使ったほうがいいですよ。
現状では「意図したように表示されなくても仕方がない」書き方と言えます。

投稿日時 - 2007-02-27 21:49:02

補足

<table border="1">
<tr>
<td width="40" colspan="2"><img src="img/px_blue.gif" width="40" height="10"></td>
<td width="70"><img src="img/px_red.gif" width="70" height="10"></td>
</tr>
<tr>
<td width="20"><img src="img/px_blue.gif" width="20" height="10"></td>
<td width="90" colspan="2"><img src="img/px_red.gif" width="90" height="10"></td>
</tr>
</table>

単純にテーブルの列を互い違いにするとできない理由について教えてください。

投稿日時 - 2007-02-27 22:07:28

あなたにオススメの質問