How to center a table?

[Bob Altman]

Hi all,

This has got to be a dumb question, but... What is the CSS property that I
would use to center a table on the web page?

If I set the table's Align property in the VS 2008 property window it
inserts align="center" into the <table> tag, and I get a validation warning
that attribute 'align' is considered outdated. Ok, so I probably need to
use a CSS style to do the same thing. But I've dug through all of the
categories in the Modify Style dialog and I can't find anything that sets
alignment or position to "center".

TIA - Bob

 

[Bob Altman]

style="margin-left:auto;margin-right:auto;"

Thanks Mark. That's seriously non-intuitive!

Bob

 

[Scott M.]

CSS works on a "box" model, where each element in your page represents a
"box" of space. Every box has a width, interior padding, and exterior
margins.

By setting the margin-left and margin-right CSS properties to "auto", you
are essentially telling the browser to automatically set the margin for you,
but because you did that on both the left and the right, the individual
margins split the difference and you get a left margin and a right margin
that use up whatever space is not being used by your table "box".

-Scott

 

[Steven Cheng [MSFT]]

Hi Bob,

You can use the text-align css propety at the parent container element to
perform horizontal alignment setting:

http://www.webmasterworld.com/forum83/4748.htm

http://www.ehow.com/how_2284643_left-right-center-align-css.html

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.



--------------------

 

[Scott M.]

Doesn't that property setting inherit into the cells of the table causing
cell data to also be centered (which may not be desired)?

-Scott

 

[Scott M.]

Yes, as I suspected, this does not work. It will center the contents of the
table, but not the table itself.

The correct way is as I've described using margin-left:auto and
margin-right:auto.

-Scott

 

[Scott M.]

Oops, I mean to say that it will center the table AND the contents of the
table, which may not be desired.

 

[Steven Cheng [MSFT]]

Thanks for your followup Scott,

Yes, I think your suggestion is reasonable. Using Margin will be preferred.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

--------------------