みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

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

解決済みの質問

スタイルシートのせい?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その1)
<table width="500"><tbody><tr>
<td>あああああ</td>
</tr></tbody></table>

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

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

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

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

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

投稿日時 - 2005-08-31 18:38:51

QNo.1617922

暇なときに回答ください

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

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

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

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

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

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

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

投稿日時 - 2005-09-01 00:19:31

お礼

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

投稿日時 - 2005-09-01 17:54:04

ANo.2

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

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

回答(2)

ANo.1

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

投稿日時 - 2005-08-31 19:42:34

お礼

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

投稿日時 - 2005-09-01 17:49:47

あなたにオススメの質問