Home Page CSS Tips Centered Tables

CSS: Centered Tables

[Thanks to Ian Hickson for giving me the solution for this one.]
You've put this into your style sheet:

.centered { text-align: center; }

And this HTML:

<div class="centered">
<h3>Test of Centering</h3>
<p>
Table of cities and states
</p>
<table border="1">
    <tr><td>Pekin</td> <td>Illinois</td></tr>
    <tr><td>San Jose</td> <td>California</td></tr>
</table>
</div>

Here's what you get:

“Aha,” you think. “My shiny new browser is broken.” No, it isn't. It's working exactly as CSS level two says it should. Section 16.2 of the specification says that text-align describes how inline content of a block is aligned. If you look at the Document Type Definition (DTD) for HTML, you will discover that tables are not inline elements.

Here's how you fix the problem. Add this to your stylesheet:

.centered-table {
   margin-left: auto;
   margin-right: auto;
}

Setting the margin-width to auto makes the browser calculate the margins according to the formula in section 10.3.3 of the specification. In this case, it makes the left and right margins equal, thus centering the table. Your HTML now changes to this:

<div class="centered">
<h3>Test of Centering</h3>
<p>
Table of cities and states
</p>
<table class="centered-table" border="1">
    <tr><td>Pekin</td> <td>Illinois</td></tr>
    <tr><td>San Jose</td><td>California</td></tr>
</table>
</div>

And you get the desired result: