テーブルで２つの画像を横並びに配置してみます。
[ソース]
 |
 |
２つの画像同士を隙間なく並べるにはtableタグに cellspacing="0" cellpadding="0" border="0"を指定します。
border="0"は指定しなくてもいいのですが念のため指定しておきます。
＞cellspacing="0" cellpadding="0"について
[ソース]
|
|
画像の間隔を15ピクセルにする場合には間に幅15ピクセルのセルを配置します。
[ソース]
|
|
このとき<td>〜</td>を空にしてしまうとずれてしまうことがあるので、ずれないように『なにか』を置きます。
例えば『半角スペース』の を置いてみましょうか。
[ソース]
|
|
そうすると確かに隙間はできますが、幅が3ピクセルだとどうでしょう。
[ソース]
|
|
 |
 |
|
今度は『半角スペース』の幅が3ピクセルより大きいので、幅は3ピクセルにはなりません。
（隙間の下に3ピクセル幅の赤い画像を置いてみましたので比べてください。）
特に上下の幅の調整の時にはかなり変わってしまいます。
そこでよく使われる手法は『透明gif』です。
背景に影響しないように透明のGIF画像を置くのです。
1×1の透明gifをimgタグのwidthとheightを使ってセルの大きさを調整します。
このとき幅を調整したいときにはセルの高さが、例えば70ピクセルであったとしてもheight="1"にします。
高さはすでに他のセルによって調整されるので、変更する必要はないからです。
後になって全体の高さを変更したいときにも画像の高さを調整しなおす必要もなくなります。
じゃあheightは指定しなくてもいいんじゃないの？って思う人もいるかもしれませんが、widthと等比でheightが大きくなることも考えられますので、 必ずheight="1"は指定します。
透明gifが作れない方のために下のファイルでダウンロードできます。
透明gif [spacer.zip]
今回は画像の間隔ということで説明しましたが、この透明gifを使う手法はテーブルレイアウトの基本です。
多くのテーブルレイアウトのサイトのソースを見てください。
spacer.gifとかsp.gifとかtoumei.gifとかの画像が使ってありますよね。
（あ、このサイトはテーブルレイアウトではありません）
[ソース]
|
|
|
分かりやすく赤いgif画像にしてみた例です。
[ソース]
|
|
|
画像と画像の間に線が見えない人は『老眼』かもしれません。クワガタとネコを結ぶ『運命の赤い糸』ですよっお父さん！！
赤いgif画像が見えにくい人のために間隔を15ピクセルにしてみました。
|
|
|
注意
透明gifを使うときはtdタグとimgタグの間には改行や空白を入れてはいけません。
余計なものが表示されてレイアウトが望んだ間隔にならないことがあります。
下がその例です。
ソースを見やすくする『字下げ』をしてしまったら……
分かりやすくtdに背景色を、中に赤いgif画像を配置してみました。
[ソース]
|
|
△上に戻る
<table>
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
△上に戻る
隙間なく並べる
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
△上に戻る
隙間に15ピクセルの空tdを置いてみた
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="15"></td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="15"></td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
△上に戻る
隙間に半角スペースを置いてみた
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="15"> </td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="15"> </td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
△上に戻る
半角スーペースで幅を3ピクセルにしてみた
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="3"> </td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="3"> </td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
△上に戻る
spacer.gifを使った場合
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="3"><img src="img/spacer.gif" width="3" height="1" /></td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="3"><img src="img/spacer.gif" width="3" height="1" /></td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
△上に戻る
赤い画像でテスト
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="3"><img src="img/px_red.gif" width="3" height="1" /></td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
<tr>
<td width="80"><img src="img/test_table01.jpg" width="80" height="70" /></td>
<td width="3"><img src="img/px_red.gif" width="3" height="1" /></td>
<td width="80"><img src="img/test_table02.jpg" width="80" height="70" /></td>
</tr>
</table>
△上に戻る
tdとimgを字下げした
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="50" bgcolor="#999999">
<img src="img/px_red.gif" width="50" height="15" />
</td>
</tr>
</table>
<tr>
<td width="50" bgcolor="#999999">
<img src="img/px_red.gif" width="50" height="15" />
</td>
</tr>
</table>
