Center table within a table

[anjanesh]

Hi
Moving to CSS as XHTML 1.1 has dropped many of the tag attributes.
I need a table within a table centered. Before I did align="center".
text-align:center is working only for text and not for subtables.

<table>
<tr>
<td style="text-align:center">
Test1
<table>
<tr><td>Test2</td></tr>
</table>
</td>
</tr>
</table>

Test1 is centered but the Test2 is not. Infact the whole inner-table is aligned left instead of center.
Any idea how to correct this ?
Thanks

[nevetS]

good question. I played with it a little bit and couldn't get it to work myself.

Frequently, I've found that finding a good CSS solution isn't worth the time and effort it takes to find it.

The best way to do things is with a combination of CSS and table's IMO. Tables still have inherent properties that are much more convenient than CSS for now. I think this might be one of those cases. Although it seems that it would be a common enough question that someone else here might answer you and it'll be a lot easier than I thought :D

[anjanesh]

Found this somewhere else. This seems to work. Also for having table in body centered (not the text within the body)

<table>
<tr>
<td style="text-align:center">
Test1
<table style="margin-left:auto;margin-right:auto">
<tr><td>Test2</td></tr>
</table>
</td>
</tr>
</table>

[J.D.]

Found this somewhere else. This seems to work. Also for having table in body centered (not the text within the body)
style="margin-left:auto;margin-right:auto"text-align does not apply to block-level elements; this is why your initial HTML didn't work. This code above will work because you set left and right margins to auto - this is the proper way to align block-level elements. One thing to keep in mind that this solution only works in IE if the document has proper DOCTYPE (see 7061 for more info).

J.D.

[anjanesh]

One thing to keep in mind that this solution only works in IE if the document has proper DOCTYPE.
I viewing this in Mozilla FireFox 1.0.1 - all my development is done in FF. I later check to see what difference is there in IE and make some changes using Javascript.

[J.D.]

I viewing this in Mozilla FireFox 1.0.1 - all my development is done in FF. I later check to see what difference is there in IE and make some changes using Javascript.It will work fine in IE as long as you have DOCTYPE defined.

BTW, JS is disabled more often than you'd think. It's always a good idea to make your website usable in this case.

J.D.

[rickbkis]

Great tip (#4). I think you've saved my sanity - for the moment, at least.

rickb