SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Centering two tables


    I have two tables, side by side, and I want to center them horizontally with CSS, how do I do this?

    |---------------------|--------------------------|
    |---------------------|--------------------------|
    |---------------------|--------------------------|
    |-----Table a------|-------Table b---------|
    |---------------------|--------------------------|
    |---------------------|--------------------------|
    |---------------------|--------------------------|
    |---------------------|--------------------------|

    Just to clarify:

    There are the two tables, with no padding between, and I want equal length/margin on the left and right of the two tables.

    Cosmic.

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    something like this to get them centered...

    body{
    text-align:center;
    }
    .center{
    margin-left:auto;
    margin-right:auto;
    }


    <div class="center">
    Tables go here
    </div>

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question :.:


    Alright, here is my CSS :

    body {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    color: #878786;
    margin-left: 20px;
    margin-top: 5px;
    scrollbar-face-color: #C5CAD5;
    scrollbar-shadow-color: #7996B5;
    scrollbar-highlight-color: #7996B5;
    scrollbar-3dlight-color: #C5CAD5;
    scrollbar-darkshadow-color: #C5CAD5;
    scrollbar-track-color: #C5CAD5;
    scrollbar-arrow-color: #7996B5; }

    p {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    color: #878786;
    }

    p.top { font-family: verdana; font-size: 9px; color: #000000 }

    .center {
    margin-left: auto;
    margin-right: auto; }


    And here is my HTML :

    <body>
    <p class="top">Home</p>
    <div class="center">
    <table bgcolor="#F4F8FA" border="0" style="border-collapse: collapse" cellpadding="5" cellspacing="0" bordercolor="#111111" width="290" height="255" align="left" valign="top">
    <tr>
    <td width="100%" height="10" valign="top"> <font face="verdana, arial, helvetica, sans-serif" size="-2" color="#292929">Welcome</font> </td>
    </tr><tr><td width="100%" height="100%" valign="middle">
    <center><img border="0" src="images/intro.jpg" width="272" height="166" /></center>
    </td></tr>
    </table>

    <table bgcolor="#F4F8FA" border="0" style="border-collapse: collapse" cellpadding="9" cellspacing="0" bordercolor="#111111" width="370" height="255" align="left" valign="top">

    <tr>
    <td width="100%" valign="top" height="100%" align="left">

    Blah

    </td>
    </tr>
    </table>
    </div>
    </body>


    Is something wrong with my table alignment or what? Because they do not center.

    Thanks in advance for looking over all of the above code.

    Cosmic - stumped.

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well a sample I did for myself earlier worked fine, but when I had a play with yours it didnt work as well as my sample.......

    anyway, if you want to fix yours this is what to do: however, note: This is just something I did to get it working, there may be much better ways........

    alright:

    1) add this line to body: text-align:center;
    2) remove align="left" from your tables
    3) create something like this:
    .whatever{
    display:inline;
    }

    4) In each table, add this: <table class="whatever"

    5) that should work........it did for me

  5. #5
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One cannot position block-level elements (such as tables) side by side without using a container element or complex CSS styles, neither of which you're doing. I would recommend creating a table with two cells, and then putting a table in each of the cells, thus acheiving the same effect with much less hassle. You will not have the browser issues as this will work with all browsers. To center the tables, just center the container table, that is to say the table that is holding the other two tables in each of its two cells.

    -Colin
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question :.:

    And you center through CSS using margin-left: auto; and margin-right: auto;, correct?

    I'm almost there!

    Cosmic.

  7. #7
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: :.:

    Originally posted by CosmicCatalyst
    And you center through CSS using margin-left: auto; and margin-right: auto;, correct? ...
    Generally that will work. It may differ in a particular browser, in which case a simple align="center" may be needed. Just test in several different browsers to see which option works the best.

    -Colin

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :.:

    Thank you Aes and the rest,

    I'll give it a go.

    Cosmic.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •