WEB How to create three tables separated by spaces?

Discussion in 'OT Technology' started by SubOptimal, Feb 26, 2010.

  1. SubOptimal

    SubOptimal New Member

    Joined:
    Jun 27, 2002
    Messages:
    4,410
    Likes Received:
    0
    How can I create three tables together separated by spaces? I'd like to have one left aligned, one centered and another right aligned.

    Table1 Table2 Table3

    I tried googling and can make them side by side without any space now, but I really need a gap between them.
     
  2. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Use stylesheets and adjust the margin of the table so there is a px gap between them.

    If you're using tables for layout, I suggest looking into divisions.
     
  3. SmugZombie

    SmugZombie OT Supporter

    Joined:
    Aug 2, 2006
    Messages:
    3,783
    Likes Received:
    0
    Location:
    Purgatory
    If need be, you could make 5 tables and make 2 of them with no borders... or just no data in general if the others have no borders. Such as.

    <table1><table2 borders=0 width="w/e u want"><table3><table4 borders=0 width="w/e u want"><table5>
     
  4. SmugZombie

    SmugZombie OT Supporter

    Joined:
    Aug 2, 2006
    Messages:
    3,783
    Likes Received:
    0
    Location:
    Purgatory
    But yes, Divs are the way to go...
     
  5. SmugZombie

    SmugZombie OT Supporter

    Joined:
    Aug 2, 2006
    Messages:
    3,783
    Likes Received:
    0
    Location:
    Purgatory
    Is this essentially what you want?

    [​IMG]

    *pardon the spacing... just threw it together in 10 seconds..
     
  6. SubOptimal

    SubOptimal New Member

    Joined:
    Jun 27, 2002
    Messages:
    4,410
    Likes Received:
    0
    eggman, yeah that's exactly what I'm trying to do. I'm trying to create a page like that and am surprised that this isn't easier. I'll try messing around with the code you posted, but if you have any other advice I might need it since I'm a n00b at this.
     
  7. SmugZombie

    SmugZombie OT Supporter

    Joined:
    Aug 2, 2006
    Messages:
    3,783
    Likes Received:
    0
    Location:
    Purgatory
    Lol dude, the code i posted was really bad psudo code... gimme a sec and i will see what i can do for ya.
     
  8. SmugZombie

    SmugZombie OT Supporter

    Joined:
    Aug 2, 2006
    Messages:
    3,783
    Likes Received:
    0
    Location:
    Purgatory
    Code:
    <html>
        <head>
            <title>My Table Page Thingy….. Yeaaaaah!</title>
        </head>
        
        <style>
            body
                {
                    
                }
            #t1
                {
                    float: left;
                    width: 30%;
                    height: 600px;
                    background-color: green;
                }
            #t2
                {
                    margin-left: 10px;
                    float: left;
                    width: 30%;    
                    height: 600px;
                    background-color: green;
                }
            #t3
                {
                    margin-left: 10px;
                    float: left;
                    width: 30%;
                    height: 600px;
                    background-color: green;
                }
        </style>
        
        <body>
            <table id="t1"><tr><td></td></tr></table>
            <table id="t2"><tr><td></td></tr></table>
            <table id="t3"><tr><td></td></tr></table>
    
        
        
        </body>
    </html>
     
  9. SmugZombie

    SmugZombie OT Supporter

    Joined:
    Aug 2, 2006
    Messages:
    3,783
    Likes Received:
    0
    Location:
    Purgatory
    post or pm your aim if u need more help...
     
  10. SmugZombie

    SmugZombie OT Supporter

    Joined:
    Aug 2, 2006
    Messages:
    3,783
    Likes Received:
    0
    Location:
    Purgatory
    Revised tables:

    Code:
    <html>
        <head>
            <title>My Table Page Thingy….. Yeaaaaah!</title>
        </head>
        
        <style>
            body
                {
                    
                }
            #t1
                {
                    float: left;
                    width: 15%;
                    height: 600px;
                    background-color: green;
                }
            #t2
                {
                    margin-left: 10px;
                    float: left;
                    width: 45%;    
                    height: 600px;
                    background-color: green;
                }
            #t3
                {
                    margin-left: 10px;
                    float: left;
                    width: 15%;
                    height: 600px;
                    background-color: green;
                }
            #yeah
                {
                    
                }
        </style>
        
        <body>
            <center>
                <div id="yeah">
                    <table id="t1"><tr><td></td></tr></table>
                    <table id="t2"><tr><td></td></tr></table>
                    <table id="t3"><tr><td></td></tr></table>
                </div>
            </center>
        </body>
    </html>
    Divs instead:

    Code:
    <html>
        <head>
            <title>My Table Page Thingy….. Yeaaaaah!</title>
        </head>
        
        <style>
            body
                {
                    
                }
            #t1
                {
                    float: left;
                    width: 15%;
                    height: 600px;
                    background-color: green;
                }
            #t2
                {
                    margin-left: 10px;
                    float: left;
                    width: 45%;    
                    height: 600px;
                    background-color: green;
                }
            #t3
                {
                    margin-left: 10px;
                    float: left;
                    width: 15%;
                    height: 600px;
                    background-color: green;
                }
            #yeah
                {
                        
                }
        </style>
        
        <body>
            <center>
                <div id="yeah">
                    <div id="t1"></div>
                    <div id="t2"></div>
                    <div id="t3"></div>
                </div>
            </center>
        </body>
    </html>
    Have fun getting them centeered though... I didnt look anything up but off the top of my head i couldnt get it to work.
     
  11. SubOptimal

    SubOptimal New Member

    Joined:
    Jun 27, 2002
    Messages:
    4,410
    Likes Received:
    0
    Thanks eggman! It finally works now. Extra credit if you can tell me how to put a <hr> at the bottom of the tables. There are multiple rows of tables and I want to put a <hr> between each row, but the separator is showing up at the top of the tables for some reason even though it's at the bottom of the table in the HTML code. Anyways, thanks for the help!

    Edit: Nevamind, I'll try just putting the <hr> tag at the top. Thanks again for the help!
     
    Last edited: Feb 27, 2010
  12. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    If it were me, I would do one big table for the constraining border (so things don't get wider than what you want).

    Within that, put 5 tables, like eggman said, with 2 invisible tables in positions 2 and 4 to space the other ones out how you want.

    And the first, big table would force everything to the correct size so even if the person has a 15" monitor or a widescreen 30" monitor, it will still appear how YOU want it to.

    I would also do it this way because it would take me 5 minutes, compared with taking 5 days and 10 threads to do it with divs :hs:
     
  13. SmugZombie

    SmugZombie OT Supporter

    Joined:
    Aug 2, 2006
    Messages:
    3,783
    Likes Received:
    0
    Location:
    Purgatory
    K, so here is the 5 tables idea. But instead of going with Falconer's idea of putting the 5 inside another table, i place them inside of a div due to simplicity.

    Code:
    <html>
        <head>
            <title>My Table Page Thingy….. Yeaaaaah!</title>
        </head>
        
        <style>
            body
                {
                    
                }
            #t1
                {
                    float: left;
                    width: 15%;
                    height: 600px;
                    background-color: green;
                }
            #t2
                {
                    /* margin-left: 10px; */
                    float: left;
                    width: 45%;    
                    height: 600px;
                    background-color: green;
                }
            #t3
                {
                    /* margin-left: 10px; */
                    float: left;
                    width: 15%;
                    height: 600px;
                    background-color: green;
                }
            #yeah
                {
                    width: 800px;
                }
            #no
                {
                    float: left;
                    width: 20px;    
                }
        </style>
        
        <body>
            <center>
                <div id="yeah">
                    <table id="t1"><tr><td></td></tr></table>
                    <table id="no"><tr><td></td></tr></table>
                    <table id="t2"><tr><td></td></tr></table>
                    <table id="no"><tr><td></td></tr></table>
                    <table id="t3"><tr><td></td></tr></table>
                </div>
            </center>
        </body>
    </html>
     
  14. dice

    dice New Member

    Joined:
    Jan 22, 2010
    Messages:
    202
    Likes Received:
    0
    Location:
    The Great White North, Canada.
    If it was me I would use div tags. Div tags seem most effective. You could set the float and allocate the appropriate width. Pretty much what is stated above.
     

Share This Page