Centering a table

Discussion in 'HTML' started by Joshua Beall, Apr 23, 2004.

  1. Joshua Beall

    Joshua Beall Guest

    Hi,

    I have a table (yes, for tabular data all you CSS folks out there), and I
    want to center it. This is what I am trying:

    <div style="margin: 0px auto; text-align: center;">
    <table border="1">
    <tr>
    <td>Fname</td>
    <td>Lname</td>
    </tr>
    <tr>
    <td>John</td>
    <td>Doe</td>
    </tr>
    </table>
    </div>

    No go. Making the outer <div> "<div align='center'>" does the trick. But
    is there a way to do it with CSS? the "margin: 0px auto;" centering method
    is what I am used to, but it's not working here.

    How should I do this? I would rather not put the centering data in the
    <table> tag, because I want to generate the table on the fly w/ PHP, and
    then stick it various places on my site. I would rather be able to decide
    where I want it aligned by placing it in a <div> block that says where it
    should go, than having to have my PHP script do that.
     
    Joshua Beall, Apr 23, 2004
    #1
    1. Advertising

  2. Joshua Beall

    Steve Pugh Guest

    "Joshua Beall" <> wrote:

    >I have a table (yes, for tabular data all you CSS folks out there), and I
    >want to center it. This is what I am trying:
    >
    ><div style="margin: 0px auto; text-align: center;">
    > <table border="1">
    > <tr>
    > <td>Fname</td>
    > <td>Lname</td>
    > </tr>
    > <tr>
    > <td>John</td>
    > <td>Doe</td>
    > </tr>
    > </table>
    ></div>
    >
    >No go.


    Is a table text? No. Then why should text-align align it?
    (Okay, that's overly simplistic, text-align applies to any inline
    content - images, form controls, etc. not just text, but it certainly
    does not apply to block level elements like tables - except in buggy
    browsers such as IE <6.)

    > Making the outer <div> "<div align='center'>" does the trick.


    Yes. As does <table align="center">, which if the code above is
    accurate would allow you to get rid of the div altogether.

    >But
    >is there a way to do it with CSS? the "margin: 0px auto;" centering method
    >is what I am used to, but it's not working here.


    If used as above it will center the div. But the div has its default
    width, unless one is specified elsewhere, so the full width div is
    centered within its full width parent - no different to standard
    alignment.

    >How should I do this? I would rather not put the centering data in the
    ><table> tag, because I want to generate the table on the fly w/ PHP, and
    >then stick it various places on my site. I would rather be able to decide
    >where I want it aligned by placing it in a <div> block that says where it
    >should go, than having to have my PHP script do that.


    Well you're stuffed if you want to rely on inline styles. Switch to
    external styles and its easy:

    ..foo table {margin: 0 auto;}

    <div class="foo"><table>

    Adding whatever hacks you need for IE <6.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Apr 23, 2004
    #2
    1. Advertising

  3. Joshua Beall

    Joshua Beall Guest

    "Steve Pugh" <> wrote in message
    news:...
    > Well you're stuffed if you want to rely on inline styles. Switch to
    > external styles and its easy:
    >
    > .foo table {margin: 0 auto;}
    >
    > <div class="foo"><table>


    Hmm, why does it matter if I use inline or CSS classes?

    I do typically uses classes, but for newsgroup postings I usually show
    everything inline. It makes things more compact, and I thought it all
    boiled down to the same thing. Not so? How come?
     
    Joshua Beall, Apr 23, 2004
    #3
  4. Joshua Beall

    Steve Pugh Guest

    "Joshua Beall" <> wrote:
    >"Steve Pugh" <> wrote in message
    >news:...
    >> Well you're stuffed if you want to rely on inline styles. Switch to
    >> external styles and its easy:
    >>
    >> .foo table {margin: 0 auto;}
    >>
    >> <div class="foo"><table>

    >
    >Hmm, why does it matter if I use inline or CSS classes?


    It's the difference between being able to solve the problem you posted
    and not being able to solve it.

    >I do typically uses classes, but for newsgroup postings I usually show
    >everything inline.


    If you post code to a newsgroup, and a URL is preferable nine times
    out of ten, make sure that the code reflects your actual code,
    otherwise any advice you get may not be applicable.

    >It makes things more compact,


    Only if each style is only applied to a single element.

    >and I thought it all boiled down to the same thing. Not so? How come?


    How can you do what I did above with inline styles?

    That was your problem. You wanted to apply the style to the div that
    woudl affect the table inside the div. With external styles it's
    trivial, as demonstrated above. With inline styles it's impossible as
    you need to put the style attribute on the table not the div.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Apr 23, 2004
    #4
  5. Joshua Beall

    Richard Guest

    Once again, we see a person asking for help getting his butt chewed out
    merely because he mentions "tables" in this group.
    Even when he clearly states that the table is used for tabular data.
    But No, wait! Tabular data can't have TEXT!

    Duhhh excuse me, but what then can a table of tabular data have sir?

    Then he turns around and says how to do it properly.

    Instead of being an asshole, why can't you just simply answer a question and
    be done with it?

    The group name is alt.html. That includes every aspect of html whether you
    happen to agree on a particular item or not as to how it is used.

    Oh and guess what mr. pugh? CSS "*IS*" a part of html.

    Grow up.
     
    Richard, Apr 23, 2004
    #5
  6. Joshua Beall

    Richard Guest

    Joshua Beall wrote:

    > "Steve Pugh" <> wrote in message
    > news:...
    >> Well you're stuffed if you want to rely on inline styles. Switch to
    >> external styles and its easy:
    >>
    >> .foo table {margin: 0 auto;}
    >>
    >> <div class="foo"><table>


    > Hmm, why does it matter if I use inline or CSS classes?


    > I do typically uses classes, but for newsgroup postings I usually show
    > everything inline. It makes things more compact, and I thought it all
    > boiled down to the same thing. Not so? How come?


    A few browsers don't like inline coding for some reason.
    That's mainly due to the fault of the person writing the browser who didn't
    pay enough attention to smaller details.

    You have to forgive steve, he and a few others feel that merely mentioning
    some certain things is like uttering the "seven censored words" thing. Like
    you can't use that "N" word.
    He feels he is the absolute expert and you will do it his way or you become
    something less than human.
    Screw him and his high white horse, as the saying goes.
     
    Richard, Apr 23, 2004
    #6
  7. Joshua Beall

    Karl Groves Guest

    "Richard" <Ano..nymous@127.001> wrote in message
    news:...
    > Once again, we see a person asking for help getting his butt chewed out


    stop morphing, ya shithead.

    -Karl
     
    Karl Groves, Apr 23, 2004
    #7
  8. Richard wrote:

    > Once again, we see a person asking for help getting his butt chewed out
    > merely because he mentions "tables" in this group.
    > Even when he clearly states that the table is used for tabular data.
    > But No, wait! Tabular data can't have TEXT!


    > Duhhh excuse me, but what then can a table of tabular data have sir?


    I think you are misunderstanding[1] Mr. Pugh's comment, my interpretation of
    which is that "A table is not text, although it can contain text."

    You seem overeager to shout at anybody who advocates the separation of
    content from presentation.

    > Then he turns around and says how to do it properly.


    > Instead of being an asshole, why can't you just simply answer a question
    > and be done with it?


    Well... that's an interesting interpretation of a clear explanation that
    explains why a technique doesn't work that somebody could learn from.
    "Being an asshole", I'll have to remember that.

    > The group name is alt.html. That includes every aspect of html whether you
    > happen to agree on a particular item or not as to how it is used.


    > Oh and guess what mr. pugh? CSS "*IS*" a part of html.


    No it isn't. CSS is a complement to HTML, not a part of it. CSS is only
    mentioned in the HTML specification because it is the standard style sheet
    language and thus the logical choice for examples of HTML techniques to
    include style sheets.

    You don't even need an HTML document to use CSS, it can also be applied to
    arbitrary XML.

    > Grow up.


    That is a tad hypocritical coming from someone who fails to properly quote
    the message they are responding to, misrepresents the previous posters
    comments, and changes his From line for no reason that I can see other then
    to avoid people's kill files.

    [1] I wouldn't put it past you to be doing so intentionally, but I have no
    evidence to support that.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
     
    David Dorward, Apr 23, 2004
    #8
  9. Joshua Beall

    Joshua Beall Guest

    "Steve Pugh" <> wrote in message
    news:...
    > How can you do what I did above with inline styles?


    That is what I was asking. If I knew I would not have asked.

    > That was your problem. You wanted to apply the style to the div that
    > woudl affect the table inside the div. With external styles it's
    > trivial, as demonstrated above. With inline styles it's impossible as
    > you need to put the style attribute on the table not the div.


    I thought styles, external or inline, were inherited by child elements. You
    are saying this is not the case? Only styles defined in classes are
    inherited by child elements?
     
    Joshua Beall, Apr 23, 2004
    #9
  10. Joshua Beall

    Steve Pugh Guest

    "Richard" <Ano..nymous@127.001> wrote:

    >Once again, we see a person asking for help getting his butt chewed out
    >merely because he mentions "tables" in this group.


    Where? Which message? Not one that I've seen in this thread.

    >Even when he clearly states that the table is used for tabular data.
    >But No, wait! Tabular data can't have TEXT!


    Are you responding to my comment that went: "Is a table text? No. Then
    why should text-align align it?" ?

    I think you misunderstood. Nothing new there.

    Basic comprehension seems to be your latest failing. Saying that
    "tables are not text" is not the same as saying "tables can not
    contain text".

    >Duhhh excuse me, but what then can a table of tabular data have sir?


    Whatever the data is composed of.

    >Then he turns around and says how to do it properly.


    Well, my solution worked. Maybe because I have a reasonably good grasp
    of HTML and CSS.

    >Instead of being an asshole, why can't you just simply answer a question and
    >be done with it?


    Whether I'm an arsehole or not, I did answer the question. I also gave
    the OP some hints as to why the problem was occuring in the first
    place. You seem to have had some difficulty in understanding what I
    said. Are then any words in particular that were too difficult for
    you?

    >The group name is alt.html. That includes every aspect of html whether you
    >happen to agree on a particular item or not as to how it is used.


    The only thing I expressed disapproval was using an inline style as
    opposed to a stylesheet. And in this case what the OP wanted simply
    could not be done at all with an inline style, so I think it was fair
    enough.

    >Oh and guess what mr. pugh? CSS "*IS*" a part of html.


    No it isn't. Until you grasp such fundamental facts you won't stop
    sticking your foot in your mouth.

    >Grow up.


    Now what fun would that be?


    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Apr 23, 2004
    #10
  11. Joshua Beall wrote:

    > I thought styles, external or inline, were inherited by child elements.
    > You are saying this is not the case? Only styles defined in classes are
    > inherited by child elements?


    Child elements inherit the values of properties from their parent element
    where the child has "property: inherit". The default values for some
    properties is 'inherit' on some elements (but not all properties with a
    default value of 'inherit' will have that default value for all elements).

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
     
    David Dorward, Apr 23, 2004
    #11
  12. Joshua Beall

    Steve Pugh Guest

    "Joshua Beall" <> wrote:
    >"Steve Pugh" <> wrote in message
    >news:...
    >>
    >> How can you do what I did above with inline styles?

    >
    >That is what I was asking. If I knew I would not have asked.


    It can't be done.

    >> That was your problem. You wanted to apply the style to the div that
    >> woudl affect the table inside the div. With external styles it's
    >> trivial, as demonstrated above. With inline styles it's impossible as
    >> you need to put the style attribute on the table not the div.

    >
    >I thought styles, external or inline, were inherited by child elements. You
    >are saying this is not the case? Only styles defined in classes are
    >inherited by child elements?


    Some properties are inherited, some aren't. Check the specs as to
    which. Where they are specified makes no difference.

    You specified text-align: center; which is inherited and so all the
    text inside your table should be centered inside its cells. You also
    specified margin: 0 auto; but margins are not inherited.

    You wanted to set margin: 0 auto; on the table. To do this via inline
    styles you needed to set <table style="margin: 0 auto;"> which you
    don't want to do. Hence you can not use inline styles.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Apr 23, 2004
    #12
  13. Joshua Beall

    Joshua Beall Guest

    "David Dorward" <> wrote in message
    news:c6bsj3$ljn$1$...
    > Joshua Beall wrote:
    >
    > > I thought styles, external or inline, were inherited by child elements.
    > > You are saying this is not the case? Only styles defined in classes are
    > > inherited by child elements?

    >
    > Child elements inherit the values of properties from their parent element
    > where the child has "property: inherit". The default values for some
    > properties is 'inherit' on some elements (but not all properties with a
    > default value of 'inherit' will have that default value for all elements).


    But where does inline vs external style declarations fit in?
     
    Joshua Beall, Apr 23, 2004
    #13
  14. Joshua Beall

    spaghetti Guest

    On Fri, 23 Apr 2004 14:55:39 GMT, Joshua Beall
    <> wrote:

    > No go. Making the outer <div> "<div align='center'>" does the trick.
    > But
    > is there a way to do it with CSS? the "margin: 0px auto;" centering
    > method
    > is what I am used to, but it's not working here.


    Everyone seems to have gotten lost in a CSS/tables rant, but anyway...

    In IE margin: 0 auto for centering doesn't work, but text-align: center
    centers block level elements. So if you want to center something in IE the
    best way is to use text-align: center on a parent box along with margin: 0
    auto (for non-IE browsers), and just text-align: left on the child block
    (or table) to make sure the text is not centered in that.

    Steve Pugh mentioned adding "whatever hacks you need for IE 6." Well, you
    already had them in there. :) You should not want to use inline styles
    though.

    --
    Using M2, Opera's revolutionary e-mail client: http://www.opera.com/m2/
     
    spaghetti, Apr 24, 2004
    #14
  15. Joshua Beall

    spaghetti Guest

    On Fri, 23 Apr 2004 20:10:08 GMT, Joshua Beall
    <> wrote:

    > But where does inline vs external style declarations fit in?


    *cough* they're *cough cough* crazy *cough*

    --
    Using M2, Opera's revolutionary e-mail client: http://www.opera.com/m2/
     
    spaghetti, Apr 24, 2004
    #15
  16. Joshua Beall

    Steve Pugh Guest

    spaghetti <> wrote:
    >On Fri, 23 Apr 2004 14:55:39 GMT, Joshua Beall
    ><> wrote:
    >
    >> No go. Making the outer <div> "<div align='center'>" does the trick.
    >> But
    >> is there a way to do it with CSS? the "margin: 0px auto;" centering
    >> method
    >> is what I am used to, but it's not working here.

    >
    >Everyone seems to have gotten lost in a CSS/tables rant, but anyway...


    Mainly beacuse the original question was answered in the first reply,
    but then the resident moron joined in.

    >In IE margin: 0 auto for centering doesn't work,


    It does in IE6, unless you trigger quirks mode.

    >Steve Pugh mentioned adding "whatever hacks you need for IE 6."


    No I said "IE <6". IE6 gets things right unless you deliberately tell
    it act like it's stupid older relatives.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Apr 24, 2004
    #16
  17. Joshua Beall

    spaghetti Guest

    On Sat, 24 Apr 2004 09:59:56 +0100, Steve Pugh <> wrote:

    > Mainly beacuse the original question was answered in the first reply,


    Oopsie, I didn't see the original answer. My news-server is a bit behind.
    :(

    --
    Using M2, Opera's revolutionary e-mail client: http://www.opera.com/m2/
     
    spaghetti, Apr 24, 2004
    #17
    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. NWx
    Replies:
    1
    Views:
    340
    Ivan Demkovitch
    Feb 11, 2004
  2. Tomas
    Replies:
    3
    Views:
    791
    Tomas
    Oct 31, 2003
  3. Replies:
    1
    Views:
    417
  4. Guy Noir

    Centering Text in Table in IE6

    Guy Noir, Nov 11, 2006, in forum: HTML
    Replies:
    0
    Views:
    338
    Guy Noir
    Nov 11, 2006
  5. Replies:
    3
    Views:
    383
    dorayme
    Nov 16, 2007
Loading...

Share This Page