How do I center a table?

[NatuScape]

Hello!

Pardon my newbie question... but I'm trying to figure out how to center a table accross a page (ideally I'd like it to be 80% width), and in searching this forum and many links provided, I can't find anything that points me in the right direction.

I know I can make it work by adding a DIV element to center the table, but I have to go in and add the DIV to each and every page, rather than putting some magical syntax on the CSS file that will center the table for me. Is there such a thing?

Thanks so much in advance!

Me :)


This is what I have so far (I made the table 100%, otherwise it just aligns to the left):

table.siteinfo { border-width: 2px; border-color: #5D737D; border-spacing: 2px; border-collapse: collapse;
border-style: solid; width: 100%; background-color: #D7EBF9; }
td.siteinfoleft { border-width: 1px; border-color: #5D737D; border-spacing: 1px; padding: 3pt; margin: 6px;
border-style: solid; background-color: #D7EBF9; }
td.siteinforight { border-width: 1px; border-color: #5D737D; border-spacing: 1px; padding: 3pt; margin: 6px;
border-style: solid; background-color: #51B6E6; }
td.siteinfo { border-width: 1px; border-color: #5D737D; border-spacing: 1px; padding: 3pt; margin: 6px;
border-style: solid; background-color: #FFFFFF; vertical-align: top; }
td.siteinfoshade { border-width: 1px; border-color: #5D737D; border-spacing: 1px; padding: 3pt; margin: 6px;
border-style: solid; background-color: #F4F1ED; vertical-align: top; }

[ray326]

width:80%;margin:0 auto;

[NatuScape]

Hmm... it doesn't work! I just added that code and the table stays flush to the left... Anything else I might be doing to break this? Here's my body tag:

body { background-color: #FFFFFF; background-image: url('bg-blue.gif'); margin-left: 1px; margin-top: 0px;
margin-right: 2px; font-family: Arial; }

[NatuScape]

I meant to say... it doesn't work on IE 6, but it does work on Firefox... What's the work-around for IE???

[Kravvitz]

If it's not working in IE6 then that means that IE6 is in quirks mode, which is a bad thing. You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict. A doctype is not a magic fix. It is the first step in the process of fixing your page. The doctype tells the browser how to render the page.
Activating the Right Layout Mode Using the Doctype Declaration (http://hsivonen.iki.fi/doctype/)
Fix Your Site With the Right DOCTYPE! (http://www.alistapart.com/articles/doctype/)
Choosing a DOCTYPE (http://www.juicystudio.com/choosing-doctype/)
Doctype switching (http://www.webdevout.net/doctype_switching.php)
Rendering Mode and Doctype Switching (http://www.communitymx.com/content/article.cfm?cid=85FEE)
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Check out Four ways to Center Elements with CSS (in IE5+/Win and other browsers) (http://www.dynamicsitesolutions.com/css/center-element/).