Goose Tree Web Design, crafting the right web site for you.

Article #5

How To Centre A Table - A Hint For Webmasters

By Leta Labuschagne, March 2007.

Have you ever struggled with getting a table centred in a CSS (Cascading Style Sheet) container and just when you get it to work in Internet Explorer, it does not work in Mozilla / Firefox, and vice versa?

Here's a hint to help you - use two nested division containers around the table, each formatted for a different browser, and add the appropriate classes to the Style Sheet, for example:

<div class="center_ie">
<!-- Stupid IE needs this div (with style text-align: center) to centre the table; Mozilla / Firefox ignores this text formatting since a division should contain other objects, not text directly. -->
<div class="center_ff">
<!-- Mozilla / Firefox needs this div (with width and margins set in the style) to centre the table; IE ignores it since it doesn't understand margins too well, poor thing. -->
<table>
...
</table>
</div>
</div>

Even the latest and greatest Internet Explorer 7 still hasn't got it right! That's all for today folks, enjoy!

About the author: Leta Labuschagne studied web design at the University of Otago, New Zealand, and is the Director of Goose Tree Web Design. This article may be freely copied and re-used as long as the author credit and this copyright statement remains intact.