TD Inheriting TABLE width - html

Question

The issue I'm facing is that a TD in my table is inheriting the table's width despite having it's own width explicitly set.
The code is as follows:
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center">
<tr>
<td>
<img src="header.gif" alt="New Releases">
</td>
</tr>
<tr style="font-size: 0;">
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
<td width="85px">
<img src="product1.jpg" width="85" height="85" alt="image" >
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 1</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<img src="view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="10px">
</td>
<td width="85px">
<img src="product2.jpg" width="85" height="85" alt="" >
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 2</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<img src="view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="30px"><img width="30px" height="95px" src="rightsep.gif" alt=""></td>
</tr>
<tr>
<td>
<img src="footer.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
Specifically, the TD being affected is the first in the table:
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
Which is inheriting the table width of 640px instead of the 30px it should be.
It seems regardless of what I change, the issue is still there.. I've tested both locally and in JSFiddle.
I'm by no means experienced in HTML so I'm not sure what the problem is.
Updated Code
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center" style="border-spacing: 0;">
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases.gif" alt="New Releases">
</td>
</tr>
<tr>
<td width="30"><img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-left.gif" alt="" ></td>
<td width="85">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/1/_/1.jpg_14603.jpg" width="85" height="85" alt="image" >
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">Clydie King - Direct Me - Inc Never Like This Before</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="85">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/4/_/4.jpg_14418.jpg" width="85" height="85" alt="" >
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">T.M.V.S. - Don't Be Shy</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="30">
<img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-right.gif" alt="">
</td>
</tr>
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-bottom.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
I now have a gap above and below the middle row which I can't get rid of.

Answer 1

Every row in a table must have the same number of cells. If you want to use less cells in a row you must explicitly set the colspan attribute to match:
<tr>
<td colspan="9"> <!-- set this to the maximum number of cells there will be in a row -->
<img src="header.gif" alt="New Releases">
</td>
</tr>
You can mix and match the colspan:
<tr>
<td colspan="5">
<img src="header.gif" alt="New Releases">
</td>
<td colspan="4">
<img src="header.gif" alt="New Releases">
</td>
</tr>
but the total must always match the maximum number of cells used in the table.
This process must be repeated for every row in the table.

Answer 2

I believe it should be:
<td width="200">
or
<td style="width: 200px">

Answer 3

You have a table with 3 rows, but different numbers of cells.
If you want a cell to span the whole table, like the header and footer do, you need to specifiy a rowspan on them like this:
<tr>
<td rowspan="9"><img src="header.gif" alt="New Releases"></td>
</tr>
In this case a 9, because your middle row has 9 cells.
Otherwise the browser will render the table wrong.