テーブルに横幅50ピクセルのセルを4つ横に並べて作ったとします。
このときの全体の横幅はいくつになるでしょう？
50ピクセル×4つ＝200ピクセル
では実際にテーブルを作ってみましょう。
分かりやすくテーブルに1ピクセルのボーダー（ふち線）を付けるので
結果は1+200+1=202ピクセルになるはずですよね。
[ソース]
| 50px | 50px | 50px | 50px |
 |
||
 |
|
|
|
||
| 202ピクセル | ||
あれ？202ピクセルより明らかにテーブル幅は大きいですね。
なんででしょう？
テーブルで、どこがおかしいか分からなかったら
(1) border="1"を付けてみる
(2) 背景色を付けてみる
(3) 単純化する
(4) 余計なところに全角空白がないかチェック
という解決策のいずれかをとりますが、この場合(2)の方法でやってみます。
[ソース]
| 50px | 50px | 50px | 50px |
|
||
|
|
|
|
||
| 202ピクセル | ||
セルとセルの隙間がありますね。
何も指定をしなかった場合、セルには隙間が開くことがあるのです。
この『セル同士の間隔を指定する』のがcellspacing属性です。
ではこのcellspacing="0"としてみましょう。
セル[cell]のスペース・空間[space]だからcellspacingです。
[ソース]
| 50px | 50px | 50px | 50px |
|
||
|
|
|
|
||
| 202ピクセル | ||
あれれ？まだ幅が違いますね。
今度はセルの中身を『文字』ではなくて『幅50ピクセルの画像』にしてみましょう。
[ソース]
 |
|
|
|
|
||
|
|
|
|
||
| 202ピクセル | ||
おや？背景のある領域がちょこっとありますね。
セルのふちから内容までの間にパディング[padding]もあったんです。
文字などがふちにピッタリくっついてたら文章が読みにくいのでふちまでに隙間を空けるのがpaddingです。
この『セルのふちから内容までの距離を指定する』のがcellpadding属性です。
cellpadding="0"を指定しましょう。
[ソース]
|
|
|
|
|
||
|
|
|
|
||
| 202ピクセル | ||
そうすると計算は合いますよね。
△上に戻る
<table style="border:1px solid #000">
<tr>
<td width="50">50px</td>
<td width="50">50px</td>
<td width="50">50px</td>
<td width="50">50px</td>
</tr>
</table>
<tr>
<td width="50">50px</td>
<td width="50">50px</td>
<td width="50">50px</td>
<td width="50">50px</td>
</tr>
</table>
△上に戻る
背景を付けてみた
<table style="border:1px solid #000">
<tr>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
</tr>
</table>
<tr>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
</tr>
</table>
△上に戻る
cellspacing="0"を付けてみた
<table cellspacing="0" style="border:1px solid #000">
<tr>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
</tr>
</table>
<tr>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
<td width="50" bgcolor="#999999">50px</td>
</tr>
</table>
△上に戻る
幅50pxの画像にしてみた
<table cellspacing="0" style="border:1px solid #000">
<tr>
<td width="50" bgcolor="#999999"> <img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"> <img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"> <img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"> <img src="img/px_black.gif" width="50" height="15" /></td>
</tr>
</table>
<tr>
<td width="50" bgcolor="#999999"> <img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"> <img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"> <img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"> <img src="img/px_black.gif" width="50" height="15" /></td>
</tr>
</table>
△上に戻る
cellspacing="0" cellpadding="0"を付けてみた
<table cellspacing="0" cellpadding="0" style="border:1px solid #000">
<tr>
<td width="50" bgcolor="#999999"><img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"><img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"><img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"><img src="img/px_black.gif" width="50" height="15" /></td>
</tr>
</table>
<tr>
<td width="50" bgcolor="#999999"><img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"><img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"><img src="img/px_black.gif" width="50" height="15" /></td>
<td width="50" bgcolor="#999999"><img src="img/px_black.gif" width="50" height="15" /></td>
</tr>
</table>
