How to center a table?

Discussion in 'ASP .Net' started by Bob Altman, Aug 28, 2008.

  1. Bob Altman

    Bob Altman Guest

    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, Aug 28, 2008
    #1
    1. Advertising

  2. Bob Altman

    Bob Altman Guest

    "Mark Rae [MVP]" <> wrote in message
    news:%...
    > "Bob Altman" <> wrote in message
    > news:...
    >
    >> 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?

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


    Thanks Mark. That's seriously non-intuitive!

    Bob
     
    Bob Altman, Aug 28, 2008
    #2
    1. Advertising

  3. Bob Altman

    Scott M. Guest

    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

    "Bob Altman" <> wrote in message
    news:...
    > "Mark Rae [MVP]" <> wrote in message
    > news:%...
    >> "Bob Altman" <> wrote in message
    >> news:...
    >>
    >>> 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?

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

    >
    > Thanks Mark. That's seriously non-intuitive!
    >
    > Bob
    >
     
    Scott M., Aug 29, 2008
    #3
  4. 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:
    .

    ==================================================
    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.



    --------------------
    >From: "Bob Altman" <>
    >Subject: How to center a table?
    >Date: Thu, 28 Aug 2008 09:24:41 -0700


    >
    >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
    >
    >
     
    Steven Cheng [MSFT], Aug 29, 2008
    #4
  5. Bob Altman

    Scott M. Guest

    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

    "Steven Cheng [MSFT]" <> wrote in message
    news:...
    > 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:
    > .
    >
    > ==================================================
    > 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.
    >
    >
    >
    > --------------------
    >>From: "Bob Altman" <>
    >>Subject: How to center a table?
    >>Date: Thu, 28 Aug 2008 09:24:41 -0700

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

    >
     
    Scott M., Aug 29, 2008
    #5
  6. Bob Altman

    Scott M. Guest

    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." <> wrote in message
    news:...
    > 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
    >
    > "Steven Cheng [MSFT]" <> wrote in message
    > news:...
    >> 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:
    >> .
    >>
    >> ==================================================
    >> 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.
    >>
    >>
    >>
    >> --------------------
    >>>From: "Bob Altman" <>
    >>>Subject: How to center a table?
    >>>Date: Thu, 28 Aug 2008 09:24:41 -0700

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

    >>

    >
    >
     
    Scott M., Aug 29, 2008
    #6
  7. Bob Altman

    Scott M. Guest

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


    "Scott M." <> wrote in message
    news:%...
    > 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." <> wrote in message
    > news:...
    >> 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
    >>
    >> "Steven Cheng [MSFT]" <> wrote in message
    >> news:...
    >>> 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:
    >>> .
    >>>
    >>> ==================================================
    >>> 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.
    >>>
    >>>
    >>>
    >>> --------------------
    >>>>From: "Bob Altman" <>
    >>>>Subject: How to center a table?
    >>>>Date: Thu, 28 Aug 2008 09:24:41 -0700
    >>>
    >>>>
    >>>>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
    >>>>
    >>>>
    >>>

    >>
    >>

    >
    >
     
    Scott M., Aug 30, 2008
    #7
  8. 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:
    .

    --------------------
    >From: "Scott M." <>
    >Subject: Re: How to center a table?
    >Date: Fri, 29 Aug 2008 19:30:04 -0400


    >
    >Oops, I mean to say that it will center the table AND the contents of the
    >table, which may not be desired.
    >
    >
    >"Scott M." <> wrote in message
    >news:%...
    >> 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." <> wrote in message
    >> news:...
    >>> 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
    >>>
    >>> "Steven Cheng [MSFT]" <> wrote in message
    >>> news:...
    >>>> 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
    >>>>
    >>>
     
    Steven Cheng [MSFT], Sep 1, 2008
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. ALI-R
    Replies:
    4
    Views:
    19,495
    ALI-R
    Feb 14, 2005
  2. Rabbit
    Replies:
    1
    Views:
    2,756
    Shimon Sim
    Feb 12, 2006
  3. earl

    center table

    earl, Nov 11, 2003, in forum: HTML
    Replies:
    2
    Views:
    437
    David Dorward
    Nov 11, 2003
  4. ChChanges
    Replies:
    2
    Views:
    853
    Mitja
    Jun 16, 2004
  5. Anon
    Replies:
    2
    Views:
    936
    Jukka K. Korpela
    Mar 18, 2005
Loading...

Share This Page