A Simple Way to Center a Table Using CSS

Get the facts with this tutorial

Man using computer in office
Zero Creatives/Cultura/Getty Images

If you're new to Web design, you might have questions about how to center a table within a Web page. On the other hand, you might be an experienced designer who's confused about how to perform this technique now that the CENTER tag and align="center" attribute are deprecated in the TABLE tag. By using CSS, centering your tables within your Web page isn't at all difficult.

Use CSS to Center Your Table

You can add a single line to your CSS style sheet to center all tables horizontally:

table { margin: auto; }

Or you can add that same line to your table directly:

<table style="margin: auto;">

When you place a table inside a Web page, you are placing it within a block-level element such as BODY, P, BLOCKQUOTE or DIV. You can center the table within that element by using the margin: auto; style. This tells the browser to make the margins on all sides of the table equal. This puts the table in the center.

Some Web Browsers Don't Support This Method

If your site must support an old Web browser, such as Internet Explorer 6, then you will need to continue to use align="center" or the CENTER tag to center your tables. And that is just about the only complication you'll run into when centering your tables within a Web page. Using this technique is generally easy and can be executed in a matter of minutes.