スタイルシートのせい？IEのせい？

質問

自己サイトのリニューアルに伴い、今までゴチャゴチャだったHTMLソースをHTML＋CSSで簡潔にしたい、と思って作業を開始したのですが、例えば下記のように

（外部スタイルシート）
TABLE{
padding-top : 5px;padding-left : 5px;padding-right : 5px;padding-bottom : 5px;
border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : black black black black;}

（HTMLその１）
<table width="500"><tbody><tr>
<td>あああああ</td>
</tr></tbody></table>

(HTMLその２)
<table border="0" cellpadding="0" cellspacing="0" width="500"><tbody><tr>
<td>あああああ</td>
</tr></tbody></table>

と記述しIE6で確認したところ、その２では思った通りの余白(padding)ができるのに、その１ではできませんよね。

CSSに関するページを読みあさる限りではその１の記述の方が正しいと思われるのですが・・・
CSSでpaddingを指定しているのに、わざわざHTMLで0にしなきゃいけないのが納得いかない・・・
これは私のCSSの記述の仕方が悪いのでしょうか？
それともIEの解釈によるもの？

本当は上記のようなレイアウトも<div>でやりたいのですが、まだ抵抗があって・・・
このままでは結局以前と同じゴチャゴチャのHTMLソースになってしまいそうです・・・

ちなみにエディタはHPBv6をメインで使っていますが、最終的にはテキストエディタで手直ししています。
他のブラウザではまだ動作未確認です。

回答No.2

quads · ベストアンサー

table要素とtd要素は隔離できません。
cellspacing="0" によって内枠の太さが0になり、
table要素のpaddingがtd要素に適用されることで、
> その２では思った通りの余白(padding)ができる
のです。（多分。

普通にtd要素内にpaddingを取りたかったら、>>#1の方の通りです。
th,td{padding : 5px;}

テーブルの周りに枠線を付けるなら、
table{border:1px solid black;}
でよいかもしれません。

セルの枠線を重ねてしまうのであれば、
table要素に{border-collapse:collapse}を指定してください。
cellspacing="0"と同じようなものです。

セルの枠線を重ねずに表示したいなら、普通に
<table border="1">
と、border属性を指定してください。

このような感じで如何でしょうか。

お礼

丁寧な解説ありがとうございました。
我ながらtableとtdの要素を混同していたようです。
ご教示いただいた方法を色々なパターンで試してみましたが、上手くいきました。
どうもありがとうございました。

回答No.1

mousengoke

tableではなくてtdにスタイルを指定すればいいんじゃないですか。
あと話はそれますが、通常全方向同じ指定する場合はひとつにまとめることが出来るのですが。

TABLE{
padding-top : 5px;padding-left : 5px;padding-right : 5px;padding-bottom : 5px;
border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : black black black black;}

　　　　↓
th,td{
padding: 5px;
border-width : 1px;
border-style : solid;
border-color : black;
}

お礼

「ひとつにまとめることが出来る」件、ご教示ありがとうございました。
やはりエディタに頼っていてはいけませんねー。もっと勉強します。