TABLEタグでのpadingについて

質問

セル内コンテンツとセル周囲との間に間隔をあける場合の属性として
cellpaddingというのがありますが、これを使った場合TABLE内のすべてのセルに適用されてしまうと思います。
ひとつのTABLE内の複数のセルにセルごとにその間隔を異なる設定をしたい場合適切な記述方法はあるのでしょうか。
たとえば２つのセルが横に並んでいて、そのうちひとつは文字列だけのため周囲の線に文字が接しないように間隔を少しあける、他のセルは画像を入れるのでセル内いっぱいに表示するといったケースです。
セル内にそれぞれ入れ子でTABLEを入れて、vspace等でTABLEの周囲にスペースをつくればいいかなとも考えていますが、よい方法があったら教えてください。

回答No.1

urdapple · ベストアンサー

そのTD（セル）にだけpaddingを設定すればいいのでは？
<table style="padding:XXpx;">
　<tbody>
　　<tr>
　　　<td>
　　　　あいうえお
　　　</td>
　　　<td>
　　　　かきくけこ
　　　</td>
　　</tr>
　</tbody>
</table>

じゃなくて

<table>
　<tbody>
　　<tr>
　　　<td style="padding:XXpx;">
　　　　あいうえお
　　　</td>
　　　<td style="padding:YYpx;">
　　　　かきくけこ
　　　</td>
　　</tr>
　</tbody>
</table>

で大丈夫だと思うんですが、何か質問の解釈の仕方を間違ってるのかしらん？

またテキスト部分と絵の部分で常にそういった使い分けをしたいなら、CSSで
td.text
{
　padding:XXpx;
}
td.image
{
　padding:YYpx;
}
としたうえで、
<td class="text">あいうえお</td>
とか
<td class="image">『イメージ』</td>
としてあげた方が記述的には綺麗かも・・・

お礼

さっそくありがとうございました。
従来TAGの<TABLE celpading=*>しか意識していなかったのですが
styleだとTDにもpading=*が使えるんですね。
celpading=*がTABLEでのオプションと書かれてあったので、TDにもそのような使い方ができるのか疑問だったのですが、style sheetを考えるべきでした。
style sheetはまだ完全に理解していないため、それぞれのTAGに使える
属性などがいろいろな本やサイトを見ても、かならずしもすべて網羅されていないため、気がつきませんでした。
後段の指定方法もわかりました。
助かりました。

回答No.2

tamaCo

こんにちは。
セルの高さは<td height="hoge">で指定するとして、ダミー画像を使用すればいいのでは？
＃結構、常套手段だと思いますけれども。

インデントのため、全角スペース入ってます。
<table border="1" cellpadding="0">
　<tr height="30">
　　<td align="left"><img src="hoge.gif"></td>
　　<td align="left"><img src="dummy.gif" width="2" height="30">hogehoge<img src="dummy.gif" width="2" height="30"></td>
　</tr>
</table>
ダミー画像を挿入する部分は改行せず１行に書くのがコツです。
改行すると微妙にずれ込みます。
うまくいくといいですね。

お礼

ダミー画像を使う方法は知りませんでした。
さっそく試してみたいと思います。

下記のurdappleさんの方法が簡単そうなのでとりあえずそちらを試してみましたが、あわせて利用してみたいと思います。
ありがとうございました。