float プロパティを使って左右に配置
| 箱根中央火口丘 | 中伊豆歴史散歩 |
| 函南原生林 | 白鳳の秘湯 |
| 丹那断層 | しとどの窟 |
| 湯河原梅林と幕山 | 横浜ポートエリア |
| 箱根 ｢深良用水｣ | 雨あがりの尾瀬ヶ原 |
スタイルシートを使って写真を右に、表を左に配置し、両者の間に少し隙間を設けると、上に示したような体裁になります。 img 要素の align 属性と hspace 属性を使った場合は、写真の反対側にも 「ない方が望ましい」 同じ幅のスペースを生じ、嬉しくありません。 （align、 hspace、 vspace は HTML4 では推奨されない属性）
スタイルシートを使用すると、必要な部分にだけスペースを入れることができます。
上に示した表と写真の配置に関する記述は、具体的には次のようになっています。
スタイルシート
p { width: 734px; text-align: left; line-height: 1.5em; }
p.clr { clear: right; }
img.right { float: right; margin-left: 10px; }
[備考]
表と写真の間の間隔は、margin-left プロパティの値で調整します。
p.clr { clear: right; }
img.right { float: right; margin-left: 10px; }
[備考]
表と写真の間の間隔は、margin-left プロパティの値で調整します。
HTML の記述
<p>
<img src="katurabs.jpg" class="right" width="400" height="300" alt="桂橋">
<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">
</p>
<p class="clr">スタイルシートを使って・・・
[備考]
幅を指定した p 要素や div 要素の中に、浮動ボックスとなった要素と他の要素を入れる場合、両者は同一の p 要素や div 要素の中に入れます。即ち、幅を指定した別々の p 要素や div 要素の中に入れてはいけません。 理由：回り込まなくなるため。（IE6 の場合）
<img src="katurabs.jpg" class="right" width="400" height="300" alt="桂橋">
<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">
</p>
<p class="clr">スタイルシートを使って・・・
[備考]
幅を指定した p 要素や div 要素の中に、浮動ボックスとなった要素と他の要素を入れる場合、両者は同一の p 要素や div 要素の中に入れます。即ち、幅を指定した別々の p 要素や div 要素の中に入れてはいけません。 理由：回り込まなくなるため。（IE6 の場合）
