Scott Granneman

panorama-043.jpg

Center a table with CSS

The old way to center a table was easy: 

  <table align="center">
    ...
  </table>

The "align" attribute has been deprecated, however, in favor of CSS (Cascading Style Sheets), and this is a good thing. However, it's not so obvious how to center a table using CSS.

The obvious way might appear to use the CSS "text-align: center;" somewhere, maybe like one of these: 

  <table style="text-align:center;">

OR 

  <div style="text-align:center;">
    <table>
      ...
    </table>
  </div>

OR, if you get really desperate, 

  <body style="text-align:center;">
    <table>
      ...
    </table>
  </body>

None of these will work. The table itself will be left-aligned, but all the content in the table cells will be centered.

Why? Because "text-align" applies to inline content, not to a block-level element like "table".

Method 1

To center a table, you need to set the margins, like this: 

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

And then do this: 

  <table class="center">
    ...
  </table>

At this point, Mozilla and Opera will center your table. Internet Explorer 5.5 and up, however, needs you to add this to your CSS as well: 

  body {text-align:center;}

Method 2

If you want your table to be a certain percentage width, you can do this: 

  table#table1 {
    width:70%; 
    margin-left:15%; 
    margin-right:15%;
  }

And then in your HTML/XHTML, you would do this: 

  <table id="table1">
    ...
  </table>

Note that I was using an id to describe the table. You can only use an id once on a page. If you had many tables on a page that you wanted to be the same width and centered, you would do this in your CSS: 

  table.center {
    width:70%; 
    margin-left:15%; 
    margin-right:15%;
  }

And this in your HTML: 

  <table class="center">
    ...
  </table>

  <table class="center">
    ...
  </table>

Method 3

If you want your table to be of fixed width, define your CSS like this: 

  div.container {
    width:98%; 
    margin:1%;
  }
  table#table1 {
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
    width:100px;
  }
  tr,td {text-align:left;}

Set "width:100px" to whatever width you need.

"text-align: center" is there for Internet Explorer, which won't work without it. Unfortunately, "text-align: center" will center all the text inside your table cells, but we counter that by setting "tr" and "td" to align left.

In your HTML, you would then do this: 

  <div class="container">
    <table id="table1">
      ...
    </table>
  </div>

Once again, I'm using an id. If you need to center several tables the same way, use a class instead of an id.

WebSanity Top Secret