HTML：：テーブルのセルスペーシング、セルパディングについて

質問

テーブルについてお聞きします。どうか助けてください。
以下のようなソースがあります。

<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#DED6BF">
<tr>
<td><table width="600" border="0" cellpadding="3" cellspacing="1" bgcolor="#DED6BF">
<tr>
<td width="150" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話開始時間</strong></font><img src="image/spacer.gif" width="136" height="1"></td>
<td width="150" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話終了時間</strong></font><img src="image/spacer.gif" width="136" height="1"></td>
<td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話先</strong></font><img src="image/spacer.gif" width="86" height="1"></td>
<td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話時間</strong></font><img src="image/spacer.gif" width="86" height="1"></td>
<td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>料金</strong></font><img src="image/spacer.gif" width="86" height="1"></td>
</tr>
</table></td>
</tr>
</table>

一番左のセル（通話開始時間）の幅は150で、そのセルに透明gifをいれて、テーブルがくずれないようにしています。その透明gifの長さは"136"です。
なぜ透明gifの長さは136なのでしょうか？14を引く理由がわかりません。
テーブルのcellpadding="3"とcellspacing="1"なので透明gifの長さは"143"なのではないでしょうか？

回答No.4

noname#107580

こんにちは！

＞以下のようなソースがあります。

この『ありました』でなくて『あります』というところで予想が難しくなっていますね。

このソースはどのようなところからのどういったサンプルなんでしょう？

１．例えば、どこかのサイトを見ていてソースを開いてみたら、こうなっていた・・なぜ？？？

というものか、

２．あるソフトを使っていてspacer.gifを挿入するとこのサイズになってしまう・・なぜ？？？
（これは無いと思いますが・・）

ということなのか。

それとも・・
＞そのセルに透明gifをいれて、テーブルがくずれないようにしています。

と断定しているという事はご自分で作られたものでしょうか？
（これもありえないですよね・・自分でサイズ指定したことになりますし・・）
何かの雑誌とかのサンプルですか？

という事で、これは本当にテーブルを崩れないように入れているのでしょうか？

『１』だとしたら、ただの間違いだと思うんですが・・。

それからこれは本当に透明GIF なのですか？
色付のもので下線にしている・・という事はありませんか？

回答No.3

mat-21

回答にはなっていないですが、StyleSheetを使用すれば、もっと簡単で、テーブルも崩れないですよ。
ちなみにspacerの画像の長さはこのソースを見る限り厳密にはできないですね。つまり入れ子のテーブルにcellspacing="1"が入っていますよね。セル(TD)が5セルですから、単純にcellspacingの幅だけで6取られます。もし、厳密にするとどこかで1px分ずれますから、どこかで1px分を調整しなければね。
ちなみにスタイルシートで指定すると、

<style type="text/css">
<!--
table { background-color:#DED6BF; width:600px; }
td { font-size:small; font-weight:bold; background-color:#F7F7F7; padding:3px; vertical-align:top; }
td.style01 { width:150px; border:1px solid #DED6BF; }
td.style02 { width:150px; border-width:1px 1px 1px 0px; border-style:solid; border-color:#DED6BF; }
td.style03 { width:100px; border-width:1px 1px 1px 0px; border-style:solid; border-color:#DED6BF; }
//-->
</style>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="style01">通話開始時間</td>
<td class="style02">通話終了時間</td>
<td class="style03">通話先</td>
<td class="style03">通話時間</td>
<td class="style03">料金</td>
</tr>
</table>

こんな感じです。ブラウザチェックしていないのでちょっとミスがあるかもしれません。

回答No.2

yosa

まず・・・

１．何かソフトを使用しているのですか？。
ソフトの仕様、または設定がそうさせているかもしれませんが、あなたが持っているソフトが何かは、誰も知りませんので答えるのが難しいでしょう。

２．文字を入力しなくて、透明gifだけを150ピクセル幅のセルにいれても、画像幅が136ピクセルになってしまうということでしょうか？。

もし、そうだとしたらサンプルプログラムがおかしいので
回答者は混乱するでしょう。（セルに文字が入っているので）

３．何に困っているのですか？。ただの疑問レベルの話なのか、この問題が解決しないと先に進めないのか？

などなど、つっこみどころ満載なので、誰も回答しない（突っ込みが面倒）のだと思います。

ただ単に、私が理解不足の可能性も大ですがσ(^_^;)?

ちなみに、手打ちでやれば問題なく事は進むと思います。

回答No.1

yosa

<td width="150" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話開始時間</strong></font><img src="image/spacer.gif" width="136" height="1"></td>

150ピクセルの内訳が
「通話開始時間＋透明gif画像」
だからじゃないですか？。

「通話開始時間」の文字数を考慮していますか？

補足

回答ありがとうございます。

文字数は考慮してます。
このセルだけではなく、全てのセルの透明gifに関して、セル幅から14引いてるサイズがなぜ「14」引いてるのか分かりません。
下手は説明がすみません。宜しくお願いします。