table 関係タグを使って左右に配置
 
|
 |
table 関係のタグを使って写真を右に、表を左に配置し、両者の間に少し隙間を設けると、上に示したような体裁になります。 img 要素の align 属性と hspace 属性を使っても同じようなことはできますが、写真の反対側にも 「ない方が望ましい」 同じ幅のスペースを生じ、嬉しくありません。
上に示した表と写真の配置に関する記述は、具体的には次のようになっています。
スタイルシート
表と写真の配置に関しては、スタイルシートは使っていません。
HTML の記述
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table class="a" cellpadding="6">
<tr>
<td class="a" height="40">箱根中央火口丘</td>
<td class="a">中伊豆歴史散歩</td>
</tr>
<tr>
<td class="a" height="40">函南原生林</td>
<td class="a">白鳳の秘湯</td>
</tr>
<tr>
（中 間 略）
</tr>
</table><br>
<img src="neko.gif"> <img src="nezumi.gif">
</td>
<td width="414" align="right"><img src="katurabs.jpg" width="400" height="300" alt="桂橋"></td>
</tr>
</table>
[備考]
表と写真の間の間隔は、写真を入れるセルの横幅と写真の横幅の差で調整します。
<tr>
<td valign="top">
<table class="a" cellpadding="6">
<tr>
<td class="a" height="40">箱根中央火口丘</td>
<td class="a">中伊豆歴史散歩</td>
</tr>
<tr>
<td class="a" height="40">函南原生林</td>
<td class="a">白鳳の秘湯</td>
</tr>
<tr>
（中 間 略）
</tr>
</table><br>
<img src="neko.gif"> <img src="nezumi.gif">
</td>
<td width="414" align="right"><img src="katurabs.jpg" width="400" height="300" alt="桂橋"></td>
</tr>
</table>
[備考]
表と写真の間の間隔は、写真を入れるセルの横幅と写真の横幅の差で調整します。
