・・・ テーブルの基本知識・・・
テーブルを利用すれば、複数の画像をあたかも一つの画像かのように、シームレスに縫いあわせることができる。基本は:
<table cellpadding=0 cellspacing=0 border=0 width=140 height=200><tr>
<td width=80 height=200
><img src="..." width=80 height=200 align="top"></td>
<td width=60 height=200
><img src="..." width=60 height=200 align="top"></td>
</tr></table>
ここでのポイントは:
- <td>と<img>の両方で「width」と「height」を同じに指定することと
- <img>で「align="top"」と指定すること
- <table>内で「cellpadding=0 cellspacing=0 border=0」をしっかり入れておくこと
テーブルの幅と高さは指定しなくてもよさそうだが、念のため入れておく。また、「><」としてあるのは、画像の前にスペースが入らないようにするため。ここまでする必要がないブラウザがほとんどだが、ここまでやれば確実である。<tr>や<td>の間はスペースが入っても変化はないが、<a>と<img>の間などは、改行をしてしまうとスペースが挿入されることがあるのでこだわる人は注意が必要。
一度画像を縫いあわせると、もうそれを一つの画像と扱って良い。従って、縫った画像をさらに他の画像と縫いあわせることもできる。できれば一つのテーブルでがんばってすべての画像をぬいたいが、難しい場合はいくつかのテーブルに分けて、それらのテーブルを縫い合わせてもいい。
テーブルの利点は、データセルの内容を縦横に揃えることができることと、データセルの幅と高さを指定できることにある。これを利用すれば、画像を縫ったり、間隔を空けずに行を中央揃えにしたり右揃えにしたり、ページを縦横自由に区切ることができる。また、テーブルは初期のブラウザにも対応しているので、ブラウジング環境によって変化することがないので、信頼できるタグでもある。
|