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>

回答No.4

noname#30334 · ベストアンサー

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

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

回答No.3

noname#30334

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だとやっぱりちょっとずれるんですけどね。。。

お礼

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

回答No.2

noname#30532

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

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

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

回答No.1

noname#30532

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

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

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

補足

<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>

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