<tr> height displaying incorrectly - html

Question

I've been beating my head against a really stupid problem for the last while. Why can't I get the cell separating the two boxes to properly display at 9px?? I've done the math a couple of times and it works out, and yet in the cell w/ the arrow pointing towards it, it's adding extra height:
I actually appears to be doubling the 9 px height set for it (18px approx). Why?? This makes no sense.
<!-- BIG WRAPPER TABLE FOR CENTRAL CONTENT -->
<table width="700px" border="0" cellspacing="0" cellpadding="0" class="homepage">
<tr align="center">
<td>
<table width="681" height="451" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td rowspan="3" bgcolor="#FF66CC">Image will go here</td>
<td rowspan="3" width="9"> </td>
<td height="221" width="221" bgcolor="#3f7583">Text will go here</td>
</tr>
<tr height="9">
<td height="9" width="221" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td height="221" width="221" bgcolor="#CC0000">Image will go here</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END BIG WRAPPER TABLE -->

Answer 1

this is because of your td
<td height="9" width="221" bgcolor="#FFFFFF"> </td>
It is taking the height of your when rendered with normal font size, just remove it and it should work.
Here is the working fiddle

Answer 2

Instead of creating TD's for your spacing, why not just use the CellSpacing to accomplish what you need to do:
<table width="700px" border="0" cellspacing="0" cellpadding="0" class="homepage" style="font-size: 7pt;">
<tr align="center">
<td>
<table width="681" height="451" border="0" cellspacing="9" cellpadding="0" align="center">
<tr>
<td rowspan="2" bgcolor="#FF66CC">Image will go here</td>
<td height="221" width="221" bgcolor="#3f7583">Text will go here</td>
</tr>
<tr>
<td height="221" width="221" bgcolor="#CC0000">Image will go here</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END BIG WRAPPER TABLE -->