Table contents appear far left in IE8, centered in IE7

This table's contents appears centered in IE7, but appears all the way to the left side of the table in IE8.
Can you help me resolve this issue so it looks centered in IE8? Thanks.

<table id="tab991">
<tr>
 <td width="100px"><font size="3" color="#000000" face="Arial">&nbsp;&nbsp;&nbsp;<u>Amount</u></font></td>
 <td width="100px"><u><font size="3" color="#000000" face="Arial">Cost</font></u></td>
<td width="100px"><u><font size="3" color="#000000" face="Arial">Purchase</font></u></td>
</tr>
<tr>
 <td>[blk1.name;block=tr]</td>
 <td>
 0.10
</td>
<td>
<form action="pay/paypal1.php" method="post">
<input type="hidden" value="[var.user_id]" name="uid">
<input type="hidden" value="[blk1.cred_amt]" name="cre">
<input type="hidden" value="Item" name="item">
 <input type="hidden" value="[blk1.value]" name="valu">
<input type="image" value="[blk1.value]" name="valu" src="https://www.paypal.com/Checkout.gif" align="bottom"/>
</form>
</td>
 </tr>
</td>
</tr>
</table>

Code (markup):

CSS:

#tab991 {
      width:360px;
      margin:0px 0px 0px 0px;
      text-align:center;
      font-size: 12px;
      padding:10px 0px 30px 0px;
      border:1px solid #;
      }
      #tab991 td {
      text-align:center;
      margin:0 auto;
      border: 1px solid #CACACA;
      padding:8px 0px 0px 0px;
      }

Code (markup):

 

<table class="productTable">
	<thead>
		<tr>
			<th class="amount">Amount</th>
			<th>Cost</th>
			<th>Purchase</th>
		</tr>
	</thead><tbody>
		<tr>
			<td>[blk1.name;block=tr]</td>
			<td>0.10</td>
			<td>
				<form action="pay/paypal1.php" method="post">
					<div>
						<input type="hidden" value="[var.user_id]" name="uid">
						<input type="hidden" value="[blk1.cred_amt]" name="cre">
						<input type="hidden" value="Item" name="item">
						<input type="hidden" value="[blk1.value]" name="valu">
						<input type="image" value="[blk1.value]" name="valu" src="https://www.paypal.com/Checkout.gif" />
					</div>
				</form>
			</td>
		</tr>
	</tbody>
</table>

Code (markup):

With this for the CSS:

.productTable {
	table-layout:auto;
	border-collapse:collapse;
	width:360px;
	margin:0 auto;
	font:normal 12px/14px arial,helvetica,sans-serif;
	padding:10px 0px 30px 0px;
	border:1px solid #000;
}

.productTable th,
.productTable td {
	width:33%;
	text-align:center;
	padding:8px 0 0;
  border: 1px solid #CACACA;
}

.productTable th {
	font:normal 16px/18px arial,helvetica,sans-serif;
	text-decoration:underline;
}

.productTable th.amount {
	padding-left:1.2em;
}

Code (markup):

Or at least something along those lines.

... and if you have a heading tag (or worse <div class="heading">) preceeding the table, that should probably be a CAPTION inside the table. See, there are tags OTHER than TR and TD that go into tables.

... and if you are going to use CSS, you have no business using FONT, U, CENTER, ALIGN, VALIGN, BGCOLOR, etc, etc, etc.