テーブルのセル間に余白が空いてしまいます
2行×2列と3行×2列のテーブルを1つずつ作成し、どちらのテーブルも1列目のセルは結合して画像を挿入し、2列目のセルに文字を入力するというスタイルを取りたいです。
しかし、画像と文字の間（1列目と2列目の間）に余分な空白ができてしまいます。
margin、padding、cellspaceなどが必要ではないかと推測していますが、どこに埋め込むのか、自分なりに試しましたがわかりません。
htmlのコードとcssのコードを記しますので、どなたかお詳しい方お力を貸していただけませんでしょうか？
また、もう1点困っていることが、テーブルとテーブルの間にスペース開けたいのですが、<br>はできるだけ使いたくありません。
divにmarginを指定して、テーブルタグの上に<div style="margin-top:10px"></div>とすればスペースは空きましたが、他に方法があれば合わせて教えていただけると嬉しいです。
<!-- htmlのコード -->
<body>
<table width="700" border="0" >
<tr>
<td><center>
<img src="img/top_image.png" />
</center></td>
</tr>
<table class="table001">
<tr>
<td rowspan="2"><img src="img/aaa.bmp" /></td>
<td><h2>このサイトのごあんない</h2></td>
</tr>
<tr>
<td><p>このサイトは～～～～～～</p></td>
</tr>
</table>
<div style="margin-top:10px"></div>
<table class="table001">
<tr>
<td rowspan="3"><img src="img/bbb.bmp" /></td>
<td><h2>このサイトのごあんない２</h2></td>
</tr>
<tr>
<td>
<p>このサイトは～～～～～～</p>
<p>また、このサイトの～～～～～～。</p>
</td>
</tr>
<tr>
<td>
<p>問い合わせ</p>
<p>電話番号 000-000-0000</p>
</td>
</tr>
</table>
</body>
/* CSSのコード */
body {
background-color:#6C6;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
font-size: 0.8em;
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic",sans-serif ;
}
#pageBody {
width: 760px ;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
table.table001{
background-color: #E8FECF;
width: 700px;
margin-left: auto;
margin-right: auto;
white-space:normal;
}
h2{
padding-left: 10px;
background-color: #009900;
width: 180px;
color:#FFF;
font-size: 1.1em;
height: 25px;
line-height:25px;
}
お礼
回答頂きありがとうございました。