枠線と画像の余白 - どうという事もない日々の記録

昨日のパソコン学習会でＴＡＢＬＥをしたのだがこの中に画像を貼り付け、その枠線を額縁として表示する事を挑戦されておられた。
枠内に画像が入って場合と、枠と画像の間に空間がある場合が出来た。
その違いはは何処から来るのか試してみる。
kako335のブログを参考にしました。

画像は今年の春、平等院へ行った時、一寸気取って釣り鐘を撮ったものです。
この場合のタグは下記のようになっている。
<table border="10"><tr><td>画像ファイル名又はファイルのある場所のＵＲＬ</td></tr></table>
しかし、分かりやすくするために [ENTER] キーを打って改行すると、ブログで表示すると余分な空白ができる場合がある。これは <p> タグが強制的に挿入されるためです。
ＴＡＢＬＥタグを分かりやすくするために、次のような形で、ブログ記入欄にＴＡＢＬＥタグを書いて見た。
<table border="10">
　<tr>
　　<td>
　　画像ファイル名又はファイルのある場所のＵＲＬ
　　</td>
　</tr>
</table>
この場合、画像と枠線の関係は下図のようになる. 　　　　　　　　

画像と枠線に空白を入れないようにするには、幾つか方法がある。

一番簡単な方法：改行せずに下記のように連続で入れる。

<table border="10"><tr><td>画像ファイル名又はファイルのある場所のＵＲＬ</td></tr></table>

TABLE のはじめに > 、終わりに < をつける。

><table border="10">
<tr><td>画像ファイル名又はファイルのある場所のＵＲＬ</td></tr>
</table><

上の方法を使って<div> タグで区切る。

><div>
<table border="10">
<tr><td>画像ファイル名又はファイルのある場所のＵＲＬ</td></tr>
</table>
</div><