why is align and text-align different with tables?

Question

Hello I am trying to find a way around using the "nasty" align=center trick..

Well, while I was looking at some code, I noticed that two very similar pieces do not render the same. I can not find a way to make them behave the same way. This includes replacing the toplevel table with a div. Note: the bottom level table must stay a table because it is very complex in our actual code.

<table style="width: 500px;" align=center>
<tr>
<td>
<table><tr><td>
Hello there... .this is some text and such
</table></tr></td>
</td>
</tr>
</table>

removing the first line to be

 <table style="width: 500px;text-align: center">

makes it render left aligned. How can I make it render centered without too much hacking?

(note this is just a simplified example, our actual site is much more complex)

Answer 1

Add text-align:center to the style of the parent container of your table, and margin:0 auto to the table itself and it should align the way you expect. (tested in FF)

Edit: removed the invalid css "help"... my mistake.

Answer 2

This could be a useful resource. It says to do a horizontal align you can add the styles:

margin-left:auto;
margin-right:auto;

There is still a problem in IE (it needs text-align:center) that the link describes and tells how to accomodate for.