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:

    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.

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

  1. J. King says:

    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:

    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:

    Welcome to the joy of CSS ;)

    Unfortunately, that technique does not work in Windows IE 5 – and you need to do a workaround… – 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 – if you want to get more into CSS.

  4. Pierre Igot says:

    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.