Menu
I have a very simple problem: I need to center a table inside a TD element. If I were using HTML 4 I'd do it like this:
<table style="border:solid;width: 100%"> <tr> <td align="center"> <table style="border:solid; width:50%"> <tr> <td >I must be in the center</td> </tr> </table> </td> </tr> </table> But I'm trying not to use deprecated attributes and do it the CSS way. I already tried this:
<td style="text-align:center"> And this:
<td style="margin: 0 auto"> And the tables keeps in the left-side of the cell. Any suggestions?
405
To center this table, you would need to add ;margin-left:auto;margin-right:auto; to the end of the style attribute in the <table> tag. The table tag would look like the following. Changing the style attribute in the <table> tag, as shown above, results in the table being centered on the web page, as shown below.
Set the border for the <table> and <td> elements. Add the height and width properties for the <td> tag. Set the text-align property to "center", and the vertical-align to "middle" for the <td> tag.
To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row.
To center align text in table cells, use the CSS property text-align. The <table> tag align attribute was used before, but HTML5 deprecated the attribute. Do not use it. So, use CSS to align text in table cells.
You had the right idea with margin:auto 0; just take off the 0.
Working example: http://jsfiddle.net/cxnR8/
<table style="border:solid;width: 100%"> <tr> <td> <table style="margin:auto;border:solid; width:50%"> <tr> <td >I must be in the center</td> </tr> </table> </td> </tr> </table> But, more importantly, do you really need to use tables and in-line styling?
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
