ansaurus

Question

Answer 1

A:

style="text-align:center;"

(i think)

or you could just ignore it, it still works

Steven A. Lowe 2008-11-19 06:22:08

Answer 2

+2 A:

Try this:

<table width="200" style="margin-left:auto;margin-right:auto">

jalbert 2008-11-19 06:27:05

Answer 3

+8 A:

Steven is right, in theory:

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;
}

But the article mentioned in the beginning of this answer gives you all the other way to center a table.

An elegant css cross-browser solution: 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>

VonC 2008-11-19 06:28:04

And thanks for the article link!

Alexander Prokofyev 2008-11-19 06:39:38

You can get the table to center with margin: 0 auto; in IE6 and up if you ensure your page has a valid doctype declaration.

Ola Tuvesson 2008-11-20 10:49:40

@Marco: I have not right now this information, but that may be a good base for a question on StackOverflow.

VonC 2010-05-18 13:28:10

@VonC: you are perfectly right. TABLE do not need to specify a width to get horizontally centered. I tested it. Whilest DIV do need a width to be specifed to get horizontal centering.

Marco Demajo 2010-05-18 15:20:36

@Marco: interesting feedback, thank you.

VonC 2010-05-18 15:27:51

Answer 4

A:

This should work:

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

bigmattyh 2008-11-19 06:30:21

Answer 5

A:

<center>
  <table width="200">
</center>

Ramesh Soni 2008-11-19 06:46:13

<center> is also outdated!

amartynov 2010-07-20 08:30:21

Answer 6

A:

Simple. IE6 and above will happily center your table with "margin: 0 auto;" if only the page renders in "standards" mode. To make this happen you need a valid doctype declaration, such as

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

True, IE5.5 and below will still refuse to center the table but perhaps you can live with that, especially if the page is still functional with the table left aligned. I think by now users of IE5.5 and below are fairly used to some odd looking websites - but you still need to ensure that those visual glitches don't render your site unusable.

Happy coding!

EDIT: Sorry, I should perhaps point out that you do not have to have a "strict" doctype to get IE6 and up into "standards" rendering mode. I realised it might seem that way from the doctype examples I posted above. For example, this doctype declaration will of course work equally:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ola Tuvesson 2008-11-19 21:05:22

Answer 7

A:

I'm just learning this and what finally worked for me was to first make a table with three rows. Set the margin for the left and right rows to 50%. Then put a single row, fixed width table inside of the "table data" of the center "table row".

2009-10-02 02:36:49

ansaurus

tags:

views:

answers:

CSS way to horizontally align table

related questions