A Simple Way to Center a Table Using CSS

One line of code is all you need to center a table

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

Cascading Style Sheets (CSS) is a style sheet language most often used to set the visual style of web pages written in HTML and XHTML. You may be new to web design or CSS and have questions about how to center a table on a web page. You also 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.

With CSS, centering tables on a web page isn't at all difficult.

Use CSS to Center a 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 in 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, which positions the table in the center of the web page.

Some Older Web Browsers Don't Support This Method

If your site must support an older web browser, such as Internet Explorer 6, then you need to continue to use align="center" or the CENTER tag to center your tables. That's about the only complication you'll run into when centering your tables on a web page.

Using this technique is easy and can be executed in a matter of minutes.

Was this page helpful?