Centering Tables

Table of contents

Related documents

I: Introduction

This document attempts to illustrate various methods for centering tables, either by using CSS, or by using html methods in the context of a transitional doctype declaration. For examples of centering other block-level elements such as paragraphs, see the “Centering blocks” page.

The behavior of the following browsers was noted: Microsoft Internet Explorer v. 7.0 (MSIE7), Opera v. 9.0 (Op9), Safari v.3.0, Firefox v. 2.0 (Ff2) on a WinXP PC; Microsoft Internet Explorer v. 5.5 (MSIE5), Microsoft Internet Explorer v. 6.0 (MSIE6), Opera v. 6.01 (Op6), Opera v. 7.1 (Op7), Mozilla v. 1.4 , Netscape Navigator v. 6.1 (NS6.1), or Netscape Navigator 4.0 (NS4) on a Win98 PC; and Microsoft Internet Explorer for the Macintosh v. 5.0 (MacIE5), Netscape Communicator 4.7 (NS4: given the same abbreviation as Netscape 4.0 on Win98 because in these examples they behaved similarly), Safari v. 1.1 (both the Windows version and Macintosh version had the same behavior in these tests), or Opera v. 5 (Op5) on a Macintosh.

N.B.: Some newer browsers, such as Microsoft Internet Explorer v. 6–7, Microsoft Internet Explorer for the Macintosh v. 5.0, the “Gecko” family (Firefox, Mozilla, Netscape Navigator v. 6.1 and up), and Opera, v. 7 and up, change the way in which they render markup depending on which doctype declaration is used. In some cases, documents are rendered according to current W3C standards (“Standard Mode”), at least more or less, whereas in other cases, documents are rendered in a manner that emulates bugs in older browsers (“Quirk Mode”). Whereas a discussion of the details of this “Doctype switching” is beyond the scope of this document, interested readers can refer to articles on this subject written by Matthias Gutfeld or Henri Sivonen.

This document uses a doctype declaration which is expected to trigger “Standard Mode” in those browsers. A companion document which uses a doctype declaration which triggers “Quirk Mode” is also presented for convenience.


II: CSS methods

First, to make a long story short, I'll mention the “correct” way to center a table using CSS. Conforming browsers ought to center tables if the left and right margins are equal. The simplest way to accomplish this is to set the left and right margins to “auto.” Thus, one might write in a style sheet:


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

… and any table in that document should be centered. However, some older browsers with poor CSS compliance are unable to center a table with this method. Moreover, some of them will incorrectly center tables if they are contained within a block (such as a <div>) that is styled with “text-align: center.” Unfortunately, this behavior has led to some misinformation about CSS table-centering methods.

The following examples are to test browser behavior in response to using styles to suggest centering either by using “text-align: center” or with “margin-left:auto; margin-right:auto.” Additionally, examples will be given which allow centering in both compliant and non-compliant browsers while still maintaining markup that is valid.

The examples contain the general structure:


<div>
<table>
</table>
</div>

… in which the styles are applied to the <div>, the <table>, or both.

The relevant portion of the style sheet (“tables.css”) is as follows:


.center1
{ 
margin-left: auto;
margin-right: auto;
}
 
.center2
{ 
text-align: center;
}



Example IIa.

The <table> is styled with margins.

foobar Some dummy text here.

As mentioned, this is the correct way to center tables (the surrounding <div> here is superfluous). This table was centered by MSIE7, MSIE6, MacIE5, Opera (ver. 5–7, 9), Safari, Firefox, Mozilla, or NS6.1, but not by MSIE5 or by NS4.


Example IIb.

The <table> is styled with text-align.

foobar Some dummy text here.

This table was not centered by any of the browsers tested. The table cell contents are centered by MSIE7, MSIE6, MSIE5, Opera (ver. 5–7, 9), Safari, Firefox, Mozilla or NS6.1


Example IIc.

The <div> is styled with margins.

foobar Some dummy text here.

This table was not centered by any of the browsers tested, nor was there was any expectation that it ought to be centered. This method would actually center the containing <div>; however, in this case, its width is 100%.


Example IId.

The <div> is styled with text-align.

foobar Some dummy text here.

This example is frequently given (incorrectly) as the way to center a table in CSS. This table was centered by MSIE7, MSIE6, MSIE5, and NS4, but not by MacIE5, Opera (ver. 5–7, 9), Safari, Firefox, Mozilla or NS6.1. The table cell contents are centered by MSIE7, MSIE6, Op7, Op9, Firefox, Mozilla, and NS6.1


Example IIe.

The <div> is styled with text-align and the <table> is styled with margins.

foobar Some dummy text here.

This table was centered by all the browsers tested. The table cell contents are centered by MSIE7, MSIE6, Op9, Op7, Firefox, Mozilla, and NS6.1


Example IIf.

Now we are beginning to see how we might combine methods to allow many different popular browsers to center tables. An example style sheet might look like this:


.center
{ 
text-align: center;
}

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

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:

foobar Some dummy text here.

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


Example IIg.

Another elegant cross-browser solution that incorporates these observations was suggested by Rijk van Geijtenbeek:

This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and even Netscape 4.x without setting any explicit widths:

div.centered 
{
text-align: center;
}
div.centered table 
{
margin: 0 auto; 
text-align: left;
}


<div class="centered"><table>
…
</table>
</div>

The tabled style as indicated is shown below:

foobar Some dummy text here.

This table was centered by MSIE7, MSIE6, MSIE5, NS4, Firefox, Mozilla, NS6.1, Opera (v. 5–7, 9), and Safari. However, MacIE5 appears not to understand the “short-hand” syntax for setting the margins to “auto” and thus the table was left-aligned in that browser.


Summary: CSS methods.

According to the CSS specifications, the proper way to suggest centering tables is to set the left and right margins of the table to “auto.” Newer browsers that have good CSS compliance, such as Microsoft Internet Explorer versions 6 and 7 for Windows, Microsoft Internet Explorer 5 for the Macintosh, Opera, Safari, or the “Gecko” family (Firefox, Mozilla, Netscape Navigator v. 6.1 and up), will indeed display tables as centered using this method. However, some older browsers, including Microsoft Internet Explorer 5.0 for Windows or Netscape 4, will not. In these cases, surrounding the table with a <div> which is styled with “text-align:center” will center the table (and will also center the table for MSIE6 as well). However, MSIE6–7, Firefox, Mozilla, Netscape 6.1, or Opera (ver. 7, 9), will also center the contents of the table cells if the outer <div> is styled with “text-align:center.” Accordingly, authors who want to suggest centering of tables with CSS by combining these two methods, as in Example IIe, may wish to also style the table cells with the appropriate “text-align” value, as in example IIf, if this effect is not wanted.

A summary <ahem> table is also presented for convenience.

Inheritance of “text-align.”

Table cell contents will be displayed as centered by MSIE6–7, Opera (ver. 7, 9), Firefox, Mozilla, or Netscape 6.1 if either the outer <div> or the table is styled with “text-align:center.” MS Internet Explorer 5.0 for Windows, Safari, or Opera (ver. 5–6) will center the table contents only if the table is styled with “text-align:center.” Surprisingly, MS Internet Explorer 5 for the Macintosh will not center the table contents in any of the above examples (neither will Netscape 4, but most authors will not be surprised by the behavior of this browser with respect to CSS).

Conclusion:

Authors who wish to center tables in CSS-compliant browsers without regard to behavior of older browsers or the effect of doctype switching may simply use method IIa, in which the left and right margins of the table are set to “auto.” If greater compatibility with older browsers is needed, then one of the “combination” methods such as methods IIf or IIg should be used. If one is accommodating certain peculiarities of MacIE5, then method IIf should be used when standard mode is activated, and method IIg should be used if quirk mode is activated (cf. the companion document which uses a doctype declaration which triggers “Quirk Mode.”).


III: HTML methods.

These examples are included to demonstrate html methods for centering tables. All of these methods use deprecated tags or attributes and thus cannot be used with a strict doctype declaration.


Example IIIa.

Centered with <div align="center">.

foobar Some dummy text here.

All browsers tested centered the table in this example. MSIE7, MSIE6, Op9, and Op7 also centered the table cell contents.


Example IIIb.

Centered with <table align="center">.

foobar Some dummy text here.

All browsers tested centered the table in this example.


Example IIIc.

Centered with <center>.

foobar Some dummy text here.

All browsers tested centered the table in this example. MSIE7, MSIE6, Op9, and Op7 also centered the table cell contents.


Summary: HTML methods.

Any of these methods centered the table with all of the browsers listed above (However, I have recently tested Netscape Navigator v. 3.0 on a Macintosh and found that it was unable to center the table when <table align="center"> was used, as in example IIIb.). According a usenet article by Jan Roland Eriksson, CSS-capable browsers are meant to treat the align="center" attribute when applied to block-level elements, as in Example IIIa, (or the <center> element, as in example IIIc) as equivalent to a stylesheet declaration of “text-align:center”; this is also implied by the HTML specifications. Indeed, MSIE6 and Opera 7 also centered the table cell contents using <div align="center"> or with its equivalent, <center>. This emulation of a style sheet declaration of text-align:center by MSIE6 and Opera 7 even extends to its behavior when quirk mode is activated, as demonstrated in the companion document.

The align attribute as applied to tables

Is <table align="center"> (as in Example IIIb) equivalent to specifying align="center" to the surrounding <div>? The HTML specifications seem to imply that the former is meant to center the table as a whole, suggesting that they are not equivalent. Moreover, some browsers, both very old ones (e.g., Netscape 3) and newer ones (e.g., Opera 9) do not treat them as equivalent. This ambiguity is another strong argument for abandoning deprecated presentational HTML elements and attributes for formatting text.


Acknowledgements.

I would like to thank Rijk van Geijtenbeek, “CodeBitch”, and Jukka Korpela for helpful e-mail discussions. Discussions in the usenet group comp.infosystems.www.authoring.stylesheets were also useful. More information can be found on the page “Center with CSS” on the All My Faqs wiki website.


Other useful links