How to Pad A Table of Images without any Space bloggerでスペース無に画像を並べる方法

  Bloggerでブログを書き時に、時々HTMLやCSSを使わないと望ましいレイアウトで投稿できない場合があります。
  大分前から、画像を綺麗に並べたくてできないことに悩まされました。
  具体的に言いますと、普通に画像をテーブルの各セルに入れると、必ず画像の間（上下左右とも）にスペースができてしまいます。それで都合がいい時もありますが、どうしても隙間なくくっつけたい場合はとても苛立ちます。

  まず、4枚の写真を２X2のマトリックスに並べたいとします。普通に書くと、以下の通りになります。tbodyとかは省略します。

<table>
  <tr><td>
    <img src="xxxx"></td><td>
    <img src="xxxx"></td></tr>
  <tr><td>
    <img src="xxxx"></td><td>
    <img src="xxxx"></td></tr>
  </td></tr></table>

  これでは、必ず画像の間に空白ができます。さて、HTMLのテーブルに関して、セル間の間隔とボーダーラインの指定ができます。それで、以下のように書き直すと、とりあえず横の隙間はなくなります。しかし、縦は必ず隙間はできます。それは、セルやテーブル自身の高さを画像サイズとぴったり同じに設定しても、縦の隙間は全く変わりません。

<table border="0" cellpadding="0" cellspacing="0" >
  <tr><td>
    <img src="xxxx"></td><td>
    <img src="xxxx"></td></tr>
  <tr><td>
    <img src="xxxx"></td><td>
    <img src="xxxx"></td></tr>
  </td></tr></table>

  色々調べてみたら、やっと解決策を見付けました。縦の隙間の原因はvertical alignはデフォルトの設定がbaselineになっているからです。それを「bottom」に設定してあげると、隙間はあっさりとなくなります。
  最終コードは以下の通りになります。

<table border="0" cellpadding="0" cellspacing="0" >
  <tr><td>
    <img style="vertical-align: bottom;" src="xxxx"></td><td>
    <img style="vertical-align: bottom;" src="xxxx"></td></tr>
  <tr><td>
    <img style="vertical-align: bottom;" src="xxxx"></td><td>
    <img style="vertical-align: bottom;" src="xxxx"></td></tr>
  </td></tr></table>