How to center a table with CSS

Posted by Pierre Igot in: Technology
November 30th, 2004 • 2:20 am

This one has been bugging me for a long time, and I have finally discovered how to do it.

In the pre-CSS days, in order to align a table in a web page so that it was centered in the page, all you had to do was to enclose the table with <center> … </center> tags.

Unfortunately, center is now what they call a “deprecated” tag, which means that, while most browsers still support it, it really is not recommended to use it if you want your site to comply with the most current web standards.

But then, how do you center a table on a page using CSS? You cannot use text-align: center; in a div tag or in a style definition, because this applies to text, not to block-level elements such as tables.

I encountered the problem a couple of times over the past few years, and each time I ended up changing my layout so that I wouldn’t need to use a centered table at all.

Today, once again, I was faced with the problem and, again, I was contemplating the prospect of having to change my design so that I wouldn’t have to try and center the table I wanted to use. Before giving up, however, I went to this page, which, as far as I can tell, is the reference for tables in CSS.

Now, this page contains lots of information, and it’s not always easy to find answers to some pretty basic questions. Obviously the table of contents didn’t contain any indication of where I might find information about how to center a table in a page.

Then I decided to do a simple search for “center” in the page. And sure enough, the fourth occurrence of the word was in section 17.4.1 (which is about “Caption position and alignment“), where it is said, among many other things:

The table itself is centered, by setting its left and right margins to ‘auto’.

The sample CSS code given was this: 

TABLE {
    margin-left: auto;
    margin-right: auto
}

Could this be it? I tried it with my layout and, sure enough, it worked! My table was now centered within the block that it was part of!

Phew. It’s only taken me a few years to find this one out.

This entry was posted by Pierre Igot on Tuesday, November 30th, 2004 at 2:20 am and is filed under Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Previous Post:
Next Post:

4 Responses to “How to center a table with CSS”

  1. J. King says:
    November 30th, 2004 at Nov 30, 04 | 2:33 am

    Read the specification: you’ll find out a lot more -real- quickly. That particularbehaviour of the ‘margin’ property was unknown to me many years, too; it needn’t have been.

  2. Pierre Igot says:
    November 30th, 2004 at Nov 30, 04 | 2:36 am

    The trouble is that the spec contains a lot of information that I really do not need. Sometimes it’s like finding a needle in a hay stack.

  3. LoonyPandora says:
    November 30th, 2004 at Nov 30, 04 | 8:19 pm

    Welcome to the joy of CSS ;)

    Unfortunately, that technique does not work in Windows IE 5 – and you need to do a workaround…

    http://www.bluerobot.com – has a workaround for this issue, and a better way (in my opinion) of doing CSS centring.

    I strongly recommend the tutorials and articles over at http://www.alistapart.com – if you want to get more into CSS.

  4. Pierre Igot says:
    November 30th, 2004 at Nov 30, 04 | 11:30 pm

    Thanks for the additional information and links! That workaround for IE5 is pretty simple, so I might just use it :). It’s kind of ironic that it would be based precisely on applying 

    text-align: center;

    to a block-level element :).

    I do check out alistapart from time to time, but I simply don’t have time to explore all those things.

    Thanks again.

Leave a Reply

Comments are closed.