掲示板/総合質問板/過去ログ/一覧/ TABLE要素の設定について

0 名前： 台風15号 ： 2007/10/10（水） 16:43 ID:eAZWinpN sub-Cl

ブロック要素の大きさを比較してみたのですが、CSSは共通のものを設定して　【互換モード】では　同じ表示になりますが、【標準モード】になるとTABLE要素に表示の違いがみられます(幅とパディング)TABLE要素のwidth,padding,borderの　基準？　は他のBLOCK要素のそれと　異なることが　正しいのでしょうか？
サンプルの3つのボックスを標準モードで同じ表示にするための　基本設定(ハックみたいなもの)はあるのでしょうか？
検証はIE6Verです、他のUAでは確認しておりません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title></title>
<style title="text/css">

*{margin:0;padding:0;}

.B_500px{
width:500px;
padding:10px;
}

div{border:10px solid black;}
table{border:10px solid red;}
p{border:10px solid green;}


</style>
</head>
<body>

<div class="B_500px">
あああああああああああああああああああああああああああああああああ
</div>

<table class="B_500px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
あああああああああああああああああああああああああああああああああ
</td>
<td>
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</td>
<td>
ううううううううううううううううううううううううううううううううう
</td>
</tr>
</table>

<p class="B_500px">
えええええええええええええええええええええええええええええええええ
</p>

</body>
</html>

一応　下記文書型も　確認してみましたが　　TABLEの横幅・パディングの表示がことなります

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1 名前： key-child ： 2007/10/10（水） 16:43 ID:8GUFlW2K sub-DR

> TABLE要素のwidth,padding,borderの　基準？　は他のBLOCK要素のそれと　異なることが　正しいのでしょうか？

調べた限りでは他のブロック要素と同様のはず。
しかし、表の幅はボーダーを含んだ値らしい。（これは実装側の慣習？）

表ボックスの幅は，パディング左辺内側から，パディング右辺内側までの距離です（ボーダー間隔は含むが，表のパディングおよびボーダーは除外）。しかしHTMLおよびXHTML1のtable要素の幅は，ボーダー左辺から，ボーダー右辺までの距離です。

強調は引用者
CSS2リファレンス　表のボーダーモデル(border-collapse)
http://hp.vector.co.jp/authors/VA022006/css/tables.html?jouyou_l#border-collapse

> サンプルの3つのボックスを標準モードで同じ表示にするための　基本設定(ハックみたいなもの)はあるのでしょうか？

表の幅をwidth + padding + border-widthの大きさ（今回の場合540px）にするのが面倒が無いと思われる。

.B_500px {
 width:500px;
 padding:10px;
}
table.B_500px {
 width:540px;
}

2 名前： 台風には注意しましょう ： 2007/10/10（水） 16:43 ID:Kqo3aMIj sub-bK: Firefox2.0 で確認してみました、互換モード・標準モード供に上記コードはTABLE要素の幅が他のBOXの幅と異なっていました、結果としてkey-child さんの回答の通りではないかと思われます。
ということは、互換モードでTABLEを利用する場合に　IE6(これしか検証してません)については、他のBOXと幅を揃えるには　注意が必要だということになりますね、IEかあ…　(-_-;)

3 名前： 台風15号(消滅) ： 2007/10/10（水） 16:43 ID:EYEXBF3N sub-Cl: >>1 key-child
>>2 台風には注意しましょう

この部分だけ　セルで自由レイアウト利用できるようにと、テーブルを使用していましたが、セル数を増やしたり　減したりしている間に　上下でボックス幅が異なってきたので　質問させていただきました。
よくわかりました、WIDTHで調整しながら　利用するようにします。

みなさん　お世話になりました。