table cellpadding「有」又は「無し」でCSSの解釈違う？

解決済

質問者：kitty1000
質問日時：2008/03/06 16:08
回答数：2件

IE6,７
tableのcellpaddingをcellpadding="0"と表記してスタイルシートでセルのpaddingを指定するのと、cellpadding="0"と表記せずにスタイルシートでセルのpaddingを指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのですが、スタイルシートでセルのpaddingを指定する場合、HTMLのcellpaddingをcellpadding="0"と表記するべきですか又は表記しないべきですか？

以下の二つのコードの違いは、<table>タグにcellpadding="0"が「ある」か「ない」かだけですが、例２のコードのテーブルの方が例1のテーブルより全体的な幅が広く表示されます。

<例１：cellpadding="0"あり>
<html>
<head>
<style type="text/css">
.ta {
margin-top:20px;
margin-bottom:20px;
table-layout:fixed;
}
.ta_ti {
padding-top:5px;
padding-bottom:5px;
text-align:center;
font-size:18px;
font-weight:900;
line-height:180%;
}
.ta_he {
font-size:16px;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
text-align:left;
vertical-align:top;
line-height:180%;
font-weight:900;
}
.ta_da {
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
text-align:left;
vertical-align:top;
line-height:180%;
}
</style>
</head>
<body>
<table class="ta" width="550" border="0" cellspacing="1" cellpadding="0">
<colgroup>
<col width="200">
<col width="347">
</colgroup>
<tr>
<td class="ta_ti" colspan="2">
タイトル
</td>
</tr>
<tr>
<td class="ta_he">
見出し
</td>
<td class="ta_da">
データ
</td>
</tr>
</table>
</body>
</html>

<例2：cellpadding="0"無し>
<html>
<head>
<style type="text/css">
.ta {
margin-top:20px;
margin-bottom:20px;
table-layout:fixed;
}
.ta_ti {
padding-top:5px;
padding-bottom:5px;
text-align:center;
font-size:18px;
font-weight:900;
line-height:180%;
}
.ta_he {
font-size:16px;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
text-align:left;
vertical-align:top;
line-height:180%;
font-weight:900;
}
.ta_da {
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
text-align:left;
vertical-align:top;
line-height:180%;
}
</style>
</head>
<body>
<table class="ta" width="550" border="0" cellspacing="1">
<colgroup>
<col width="200">
<col width="347">
</colgroup>
<tr>
<td class="ta_ti" colspan="2">
タイトル
</td>
</tr>
<tr>
<td class="ta_he">
見出し
</td>
<td class="ta_da">
データ
</td>
</tr>
</table>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： edge_wind
回答日時：2008/03/06 16:53

興味があったので、上記2つのHTMLソースをコピー＆ペーストしてブラウザに表示させてみました（border="1"にしました）が、

(例1)と(例2)のテーブルの幅は全く同じでした。

Windows XP Pro SP2 のIE6
Mac OSX 10.5 のSarari 3.0.4
Mac OSX 10.5 のFireFox 2.0.0.12

いずれのブラウザでも、全く同じテーブル幅です。
個人的な環境にもよるのかもしれませんが、cellpadding="0"のあり・なしで差はありませんでした。

この回答への補足

edge_windさん
ご回答、ありがとうございました。

＞（border="1"にしました）
.taのスタイルにbackground-color:#666666;
が抜けていました。

詳細：
border="1"を使用せずに、上記例1及び例2のコードの
.ta {
margin-top:20px;
margin-bottom:20px;
table-layout:fixed;
}
を
.ta {
margin-top:20px;
margin-bottom:20px;
table-layout:fixed;
background-color:#666666;
}
に変更してテストしていただけるでしょうか？
<table>タグにcellspacing="1"が設定してあるので、テーブルのバックグラウンドのbackground-color:#666666;が表示され、ボーダの代わりとなります。

これで、私のブラウザーの場合、tableのcellpaddingをcellpadding="0"と表記してスタイルシートでセルのpaddingを指定するのと、cellpadding="0"と表記せずにスタイルシートでセルのpaddingを指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのです。

よろしくお願いします。

補足日時：2008/03/06 17:57

通報する

- 0
- 件

通報する

No.2

回答者： edge_wind
回答日時：2008/03/06 23:00

補足いただいたHTMLソースで試してみましたが、やはり再現できませんでした。

参考までに画像にしてみましたのでご確認ください。
スタイルシート部分は共通だったので、1つのHTMLファイルに複数テーブルを載せています。

Windows XP Pro IE6
http://blog.goo.ne.jp/edge_wind/e/969915689cdece …

Mac OSX 10.5 FireFox 2.0.0.12
http://blog.goo.ne.jp/edge_wind/e/80ddd4a64b60f3 …

Mac OSX 10.5 Sarafi 3.0.4
http://blog.goo.ne.jp/edge_wind/e/98c6f3c0741cc6 …

テーブル幅が変わる理由がよくわかりませんね。
お役に立てず申し訳ありません。

この回答への補足

edge_windさん
ご回答、ありがとうございました。

ブラウザの表示画面の「右」端を記載されていますが、テーブルのcellpadding="0"を削除した場合、「左」端が切れるのです。

もしよろしければ、このページに記載しているコード（補足分も含め）のテーブル（以下「元コードのテーブル」という）を更に大きなテーブル（ただし幅は元コードのテーブルより左右1px大きいだけ）で囲って見てください。外側のテーブルは、幅が変わらないようにスタイルシートで固めてください。

そして、元コードのテーブルのcellpadding="0"を削除した場合、元コードのテーブルの幅が外側のテーブルからはみ出します。

よろしくお願いします。

補足日時：2008/03/06 23:14

通報する