How do I get a table embedded in a td tag to be centered with css?

Discussion in 'HTML' started by mark4asp, Feb 18, 2008.

  1. mark4asp

    mark4asp Guest

    The content of a table cell is another table. How do I get the embedded
    table centered with css?

    This works to center the table:

    <td align="center">
    <table>blah blah</table>

    This does not:

    <td style="text-align:center;">
    <table>blah blah</table>
     
    mark4asp, Feb 18, 2008
    #1
    1. Advertisements

  2. mark4asp

    Andy Dingley Guest

    You have two options:

    1. Stop nesting <table>s.

    2. Tell us your Very Good Reason why nesting <table>s is the right
    thing to be doing. Probably by posting a URL to your example site.
    It's not _wrong_ to nest tables, it's just extremely rare for it to be
    a good idea, very common for it to be a bad idea from 10 year old
    code. We'd hate you to mis-code your site in that particular way :cool:


    If you want to understand CSS alignment, then you need to understand
    that it comes in two different flavours (HTML 3.2 only had one). It's
    more complicated because it's more flexible. One is about aligning
    %block; elements (such as <table>) and is done by controlling their
    margins, such as setting margin: 0 auto; (There's a little more to
    learn, to get it to work reliably for poor browsers). The other is for
    aligning %inline; elements such as string of text and is done through
    the text-align property.
     
    Andy Dingley, Feb 18, 2008
    #2
    1. Advertisements

  3. mark4asp

    dorayme Guest

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html;
    charset=utf-8">
    <style type="text/css" media="all">
    table {margin: auto;border: 1px solid;}
    </style>
    </head>
    <body>
    <table><tr><td><table><tr><td>I am a table<br>in a table <br>and
    my text is<br>left aligned in all <br>my Mac
    browsers</td></tr></table></td></tr></table>
    </body>
    </html>
     
    dorayme, Feb 18, 2008
    #3
  4. mark4asp

    C A Upsdell Guest

    There is a difference between centering a block within another block
    (which is what your first example does), and centering inline text
    within a block (which your second example should do to text within the
    inner table, though this is not what you want).

    Read the CSS specs regarding centering a block within a block. (Hint:
    you need to set the margin-left and margin-right properties to special
    values.)
     
    C A Upsdell, Feb 18, 2008
    #4
  5. mark4asp

    Ben C Guest

    Better not to call them %block; and %inline; elements, but "block-level"
    and "inline-level" elements.

    The former terms refer to different groups of HTML elements, the latter
    what CSS properties they have. It's the CSS behaviour that's important
    here.

    The difference between %block; and block-level is quite confusing so
    it helps to be careful to use the right term in the right context.

    <span style="display: block"> is %inline; but block-level
    <div style="display: inline"> is %block; but inline-level.

    in this unusual example, you'd centre the span with auto left and right
    margins (because it's block-level) and the div with text-align: center
    on its container (because it's inline-level).
     
    Ben C, Feb 18, 2008
    #5
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.