- ベストアンサー
CSSの解釈違い：table要素のcellpaddingありvsなし
- tableのcellpaddingをCSSで指定する場合、HTMLのcellpaddingを0と表記すべきかどうか疑問に思うことがあります。この違いによって、ブラウザーがテーブルの表示方法を異なる解釈することがあります。
- 例1のコードではcellpadding="0"と表記し、例2のコードではcellpaddingを指定しないでスタイルシートでセルのpaddingを指定しています。すると、例2のテーブルの方が幅が広く表示されます。
- HTMLとCSSの相互作用によって、テーブルの表示が異なる要素に影響を与えることがあるため、適切な表記方法を選択することが重要です。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
興味があったので、上記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"のあり・なしで差はありませんでした。
その他の回答 (1)
- edge_wind
- ベストアンサー率55% (44/79)
補足いただいた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 テーブル幅が変わる理由がよくわかりませんね。 お役に立てず申し訳ありません。
補足
edge_windさん ご回答、ありがとうございました。 ブラウザの表示画面の「右」端を記載されていますが、テーブルのcellpadding="0"を削除した場合、「左」端が切れるのです。 もしよろしければ、このページに記載しているコード（補足分も含め）のテーブル（以下「元コードのテーブル」という）を更に大きなテーブル（ただし幅は元コードのテーブルより左右1px大きいだけ）で囲って見てください。外側のテーブルは、幅が変わらないようにスタイルシートで固めてください。 そして、元コードのテーブルの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を指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのです。 よろしくお願いします。