テーブルセル余白（例えば左側だけ、上側だけ、など）

質問

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ５ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="ＸＸ"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

回答No.2

naokita · ベストアンサー

１つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

お礼

早速のご回答有難うございました。
個別にセルの指定方向だけに余白を作ることに成功しました！
また、全体指定も今後活用できればと思います。
有難うございました！

回答No.1

Yumikoit

スタイルシートを使えば簡単ですよ。
http://www.tagindex.com/stylesheet/table/padding.html

また、padding-top:5px; padding-left:10px;
などの指定方法も個別にできます。

今はだいぶ利用度が減りましたが、まれに古いブラウザでスタイルシートを表示できないものもあるので、cellpaddingと併用する人もいます。
ですが、いくつかのブラウザで比較表示させてみるとぶれがあったりしますし、その際に原因究明をしようとするなら構造はシンプルにしておいた方が楽ですね。
HTML文の1行目でDOCTYPE宣言をしているのが普通ですから、DOCTYPE宣言に合わせてどちらかに統一した方が良いと思います。

スタイルシートの基本は、私は字引き替わりに
http://www.tohoho-web.com/
http://www.tagindex.com/
の２か所を使っています。

お礼

早速のご回答有難うございました。
早速実行してみたいと思います。
今の私にはまだまだ難しい世界ですがぜひ活用できるよう頑張ってみます。
有難うございました！