テーブルのheightだけが2倍？？

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： ちは ： 2005/07/22 13:26
テーブルの4隅をwidthもheightも10ピクセルにしたくて、そうしているつもりなんですが、
heightだけ2倍の20ピクセルのようなサイズになってしまいます。
どこの記述が間違っているのか教えて頂けますでしょうか？
よろしくお願い致します。
（dreamweaver MXで作りました）


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>無題ドキュメント</title>
</head>

<body>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10" height="10" bgcolor="FF00FF">&nbsp;</td>
<td height="10" bgcolor="#000000">&nbsp;</td>
<td width="10" height="10" bgcolor="#FF00FF">&nbsp;</td>
</tr>
<tr bgcolor="#000000">
<td width="10">&nbsp;</td>
<td>&nbsp;</td>
<td width="10">&nbsp;</td>
</tr>
<tr>
<td width="10" height="10" bgcolor="#FF00FF">&nbsp;</td>
<td height="10" bgcolor="#000000">&nbsp;</td>
<td width="10" height="10" bgcolor="#FF00FF">&nbsp;</td>
</tr>
</table>
</body>
</html>
1   名前： カヅサツ ： 2005/07/22 13:26  ［URL］
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
table.test{
width: 500px;
border-collapse: collapse;
}
table.test td{
color: #FFFFFF;
background-color: #000000;
}
table.test td.nook{
background-color: #FF00FF;
width: 10px;
height: 10px;
}
td.nook,
td.side{
line-height: 1;
font-size: 1px;
padding: 0px;
}
td.nook img,
td.side img{
vertical-align: bottom;
}
</style>
</head>
<body>

<table class="test">
<tr>
<td class="nook"><img src="spacer.gif" alt=""></td>
<td class="side"><img src="spacer.gif" alt=""></td>
<td class="nook"><img src="spacer.gif" alt=""></td>
</tr>
<tr>
<td class="side"><img src="spacer.gif" alt=""></td>
<td>こういう場合、&amp;nbsp; ではなく、（透過）画像にした方が無難です。ただし、ブラウザの最低フォントサイズが10px以上だとどうしようもないです。
まぁどのみちユーザスタイルシートの前には無力ですが。</td>
<td class="side"><img src="spacer.gif" alt=""></td>
</tr>
<tr>
<td class="nook"><img src="spacer.gif" alt=""></td>
<td class="side"><img src="spacer.gif" alt=""></td>
<td class="nook"><img src="spacer.gif" alt=""></td>
</tr>
</table>

</body>
</html>

2   名前： ちは ： 2005/07/22 13:26
カヅサツ様　有難うございました。

スタイルシートはまだ全然無知なので、がんばって勉強してみます。
&nbsp;はドリームウィーバーで作った時に勝手に入ってしまうんですが謎です。

ところで、高さが2倍になってしまうのは、ブラウザの最低フォントサイズが原因ということになるのでしょうか？
3   名前： カヅサツ ： 2005/07/22 13:26  ［URL］
> ブラウザの最低フォントサイズが原因ということになるのでしょうか？

たぶん。
4   名前： ちは ： 2005/07/22 13:26
カヅサツ様

試しに10×10ピクセルじゃなくて、20×20ピクセルにして作ってみたら、
ちゃんと正方形になりました。
ってことは、やっぱりフォントサイズってことですかね。
有難うございました。
一覧へ戻る