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

解決済みの質問

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

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

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

<例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>

投稿日時 - 2008-03-06 16:08:29

QNo.3838306

困ってます

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

興味があったので、上記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"のあり・なしで差はありませんでした。

投稿日時 - 2008-03-06 16:53:46

補足

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:10

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

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

回答(2)

ANo.2

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

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

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

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

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

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

投稿日時 - 2008-03-06 23:00:06

補足

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

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

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

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

よろしくお願いします。

投稿日時 - 2008-03-06 23:14:46

あなたにオススメの質問