home > howto > center table css

Center a Table using CSS

This method works on all the new browsers (IE7, Firefox 2, etc) and most old browsers.

The CSS

.centertbl
{ 
text-align: center;
}

.centertbl table
{ 
margin-left: auto;
margin-right: auto;
text-align: left;
}

Analysis

The first style is applied to the <div> that contains the <table>; this will allow MSIE5 and NS4 to center the table. The next style applies to a <table> that is contained within that <div>; the margin settings will allow centering in CSS-compliant browsers and the text alignment will reset the default alignment for table cells to “left” for browsers in which the text alignment of the <div> is inherited.

An example of a <table> styled this was is as follows:

This table was centered by all the browsers tested, and the cell contents also maintained their default left-alignment.