How do you center several tables side by side on a single row?

Discussion in 'HTML' started by vanbc, Aug 1, 2006.

  1. vanbc

    vanbc Guest

    Hi,
    I have 4 tables that need to be on a single row and centered on the
    page. The easiest way I've done it is to nest the 4 tables in a table.

    Would anyone know how do this without nesting as some validators
    won't pass it.

    using "float: left;" will push all the tables to the left, but i want
    it centered. Anyone have any suggestions?

    Some sample code - the width: 200px helps a bit...still nothing as
    nice nesting tables:

    <div style="text-align: center; ">
    <div style="margin: 0 auto; width: 200px; text-align: left; ">
    <table style="background: #99FF33; float: left;">
    <tr>
    <td>one AAA
    </td>
    <td>two
    </td>
    </tr>
    <tr>
    <td>three
    </td>
    <td>four
    </td>
    </tr>
    </table>
    <table style="background: yellow; float: left;">
    <tr>
    <td>one
    </td>
    <td>two
    </td>
    </tr>
    <tr>
    <td>three
    </td>
    <td>four
    </td>
    </tr>
    </table>
    </div>
    </div>
    vanbc, Aug 1, 2006
    #1
    1. Advertising

  2. vanbc wrote:

    > I have 4 tables that need to be on a single row and centered on the
    > page. The easiest way I've done it is to nest the 4 tables in a
    > table.


    Four tables side-by-side? Hey, I have never seen any kind of tabular
    data that needed four of them in one horizontal row.

    Methinks your design needs a Rethink. If you could give a URL with some
    real-world content, perhaps someone would have a Better Ideaâ„¢.

    --
    -bts
    -Warning: I brake for lawn deer
    Beauregard T. Shagnasty, Aug 1, 2006
    #2
    1. Advertising

  3. vanbc

    Paul Watt Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:VkJzg.202965$...
    > vanbc wrote:
    >
    >> I have 4 tables that need to be on a single row and centered on the
    >> page. The easiest way I've done it is to nest the 4 tables in a
    >> table.

    >
    > Four tables side-by-side? Hey, I have never seen any kind of tabular
    > data that needed four of them in one horizontal row.
    >
    > Methinks your design needs a Rethink. If you could give a URL with some
    > real-world content, perhaps someone would have a Better IdeaT.
    >


    Just as an untested idea, could you have a horizonatal list with the tables
    as list items?

    --
    Cheers

    Paul
    le singe est dans l'arbre
    http://www.paulwatt.info
    Paul Watt, Aug 1, 2006
    #3
  4. vanbc

    dorayme Guest

    In article <Q5Jzg.297991$Mn5.19008@pd7tw3no>, vanbc <>
    wrote:

    > Hi,
    > I have 4 tables that need to be on a single row and centered on the
    > page. The easiest way I've done it is to nest the 4 tables in a table.
    >
    > Would anyone know how do this without nesting as some validators
    > won't pass it.
    >
    > using "float: left;" will push all the tables to the left, but i want
    > it centered. Anyone have any suggestions?


    Yes, right, nesting tables has this advantage: It is a nice
    object of the phrase, "you might as well be hung for a sheep as
    for a lamb"

    Why would not floats work? Have you tried a wrapper div for the
    4, the wrapper to be centred?

    --
    dorayme
    dorayme, Aug 1, 2006
    #4
  5. vanbc

    vanbc Guest

    Yeah, it's pretty rare to have tables side by side. The one I'm
    working on is a calendar function that returns a table. 7 columns
    representing each day and a row for each week.

    I'm trying to figure out how to align a couple months in a single row
    eg. April, May, June. It seems that you need specify the width or
    float: left goes all the way to the left edge. As I mentioned before
    nesting tables works perfectly.

    Here's some code for a horizontal list with tables inside (as
    suggested by a previous poster) that somewhat works...but not in IE.

    thx again:)

    <div align="center" style="background:yellow;">
    <ul style="background: pink; padding: 0; margin: 0;">
    <li style="display: inline;list-style-type: none; background: green;">
    <table style="background: purple;display: table-row;">
    <tr>
    <td>one
    </td>
    <td>two
    </td>
    </tr>
    <tr>
    <td>three
    </td>
    <td>four
    </td>
    </tr>
    </table>
    </li>
    <li style="display: inline;list-style-type: none; background: blue;">
    <table style="background: orange;display: table-row;">
    <tr>
    <td>one
    </td>
    <td>two
    </td>
    </tr>
    <tr>
    <td>three
    </td>
    <td>four
    </td>
    </tr>
    </table>
    </li>
    </ul>
    </div>
    vanbc, Aug 1, 2006
    #5
  6. vanbc wrote:
    > Hi,
    > I have 4 tables that need to be on a single row and centered on the
    > page. The easiest way I've done it is to nest the 4 tables in a table.
    >
    > Would anyone know how do this without nesting as some validators won't
    > pass it.


    Validators have nothing against table nesting because nothing in HTML
    syntax prohibits it. If the validators weren't passing your code, it's
    because there were mistakes in it.

    >
    > using "float: left;" will push all the tables to the left, but i want it
    > centered. Anyone have any suggestions?
    >
    > Some sample code - the width: 200px helps a bit...still nothing as nice
    > nesting tables:


    [snip]

    Without seeing the page that your code generates, I can't see what might
    need to be fixed so it's hard to help you fix it.
    Harlan Messinger, Aug 2, 2006
    #6
  7. vanbc

    Spartanicus Guest

    vanbc <> wrote:

    >I have 4 tables that need to be on a single row and centered on the
    >page. The easiest way I've done it is to nest the 4 tables in a table.
    >
    >Would anyone know how do this without nesting as some validators
    >won't pass it.
    >
    >using "float: left;" will push all the tables to the left, but i want
    >it centered. Anyone have any suggestions?


    The correct way to do this is by setting "display:inline-table" and then
    "text-align:center" on the containing block element. Alas the CSS2
    "inline-table" value is not supported by Mozilla or IE.

    You can feed IE an "inline" value instead, IE being the badly broken
    thing it is will effectively treat "inline" as "inline-table".

    You can also feed Mozilla a "inline" value instead, on occasion this may
    appear to result in the desired behaviour, but the snags are:

    1) Mozilla will no longer accept a specified width on the table
    2) A border around the table itself will collapse to the applicable
    line-height (regardless of the table's content)
    3) Attempting to set vertical alignment triggers a long standing Mozilla
    bug that causes the tables to be displayed on top of the preceding block
    level content, and the vertical alignment doesn't work in Mozilla.

    http://homepage.ntlworld.ie/spartanicus/inline_tables.htm

    --
    Spartanicus
    Spartanicus, Aug 2, 2006
    #7
  8. vanbc

    Andy Dingley Guest

    vanbc wrote:

    > using "float: left;" will push all the tables to the left, but i want
    > it centered. Anyone have any suggestions?


    Wrap each <table> in a <div>, float the <div>s sideways and then align
    the <table> within each <div>?

    If you want tables to stay in a rectilinear grid, despite what happens
    to resizing of the overall container window, then that's itself a
    table. In your case it's a table of tables, and it's a legitimate use
    of nested <table>s.
    Andy Dingley, Aug 2, 2006
    #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. Randall Parker
    Replies:
    1
    Views:
    591
    S. Justin Gengo
    Dec 12, 2005
  2. Anon
    Replies:
    2
    Views:
    918
    Jukka K. Korpela
    Mar 18, 2005
  3. SWu
    Replies:
    0
    Views:
    120
  4. D
    Replies:
    0
    Views:
    199
  5. Victor \Zverok\ Shepelev

    RDOC: several related modules in several C files

    Victor \Zverok\ Shepelev, Mar 6, 2007, in forum: Ruby
    Replies:
    3
    Views:
    175
    Max Lapshin
    Mar 16, 2007
Loading...

Share This Page