style center alignment of a table inside a nested table in both IE and FF

<style>
.center {text-align:center}
</style>

<table>
<tr>
<td width='200' class='center' bgcolor='red'>

<table>
<tr>
<td width='100' bgcolor='blue'>text</td>
</tr>
</table>

</td>
</tr>
</table>

The blue table cell is centered inside the red table cell in IE.
But
The blue table cell is not centered inside the red table cell in FireFox.

How can I make it centered in both IE and FireFox in Style?

Haven't tried it but try giving a class or ID to that blue table and then give it a margin, ie.

<table id="bluetable">
<tr>
<td width='100' bgcolor='blue'>text</td>
</tr>
</table>

#bluetable {
margin: 0px 50px; /* Make the left and right margin's 50px */
}

You could also give the table a width and use 'margin: 0 auto'.

#bluetable {
width: 100px;
margin: 0 auto;
}