• ベストアンサー
  • すぐに回答を!

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

  • 質問No.2789249
  • 閲覧数7010
  • ありがとう数1
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 27% (3/11)

上のテーブルはずれないのですが
同じレイアウトの下のテーブルはずれます。
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
  • ベストアンサー
No.3です。間違えました。

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

その他の回答 (全3件)

  • 回答No.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だとやっぱりちょっとずれるんですけどね。。。
お礼コメント
kikanbo

お礼率 27% (3/11)

すごく分かりやすかったです。
なるほどってかんじです。
投稿日時:2007/03/02 03:33
  • 回答No.2
いや、ですから単純に、<td>に属性つけても認識されなかったりするからと言いたいのですが。

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

下の表にはそれがないので、ブラウザが適当な大きさを判断して間を取ってずれると。
  • 回答No.1
文法はなにを基準にされているんですか…?
http://members.jcom.home.ne.jp/pctips/www/DOCTYPE.html

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

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

お礼率 27% (3/11)

<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
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ