www.webdeveloper.com
Results 1 to 2 of 2

Thread: having tables side by side

  1. #1
    Join Date
    Dec 2004
    Posts
    23

    having tables side by side

    i am having some nested table where by i have many tables in one big table this way:

    Code:
    <table name="bigtable"><tr><td>
    <table name="table1"><tr><td>&nbsp;</td></tr></table>
    <table name="table2"><tr><td>&nbsp;</td></tr></table>
    </td></tr>
    </table>
    i want the table1 and table2 to be arranged side by side. but from the code i am having above, the table1 is shown with a line break. which means, table1 is on top of table2. i don't want it this way as i needed it to be side by side. how could i do that?

    Thanks.

  2. #2
    Join Date
    Oct 2006
    Location
    Lancashire, UK
    Posts
    281
    If you just want two columns (which is what that code would make) then you only really need one table. If you are wanting to style the big table, then use a div instead. Dont add extra 'junk' tags where they arent needed. Strictly speaking, you shouldnt need to use tables at all to do a layout, you can use <div> 's to define the sections, then use CSS to place those wherever you like.

    That makes it a lot easier to update too, since your HTML will only have content in, and the design will all be in the CSS. So yuo can change one, without having to ever see the other.

    EDIT to add: here is how you could do the columns thing:

    HTML Code:
    <body>
    <div id="content">
    
    <div class="leftColumn">
    <p>Left column content here</p>
    </div>
    
    <div class="rightColumn">
    <p>Right column content here</p>
    </div>
    
    </div>
    </body>
    then either link in some CSS, or put it in the head...

    Code:
    <style type="text/css">
    <!--
    *{
    margin:0;
    padding:0; 
    //sets all padding and margins to 0 to help you position your elements
    }
    
    #content{
    font-family: verdana;
    //style everything in your content - this would be the equivalent of your 'bigtable'
    }
    
    .leftColumn{
    float: left;
    width: 40%;
    //position so the divs are next to each other
    //add styling for yout left column
    }
    
    .rightColumn{
    //then add styling for the right column
    }
    -->
    </style>
    Last edited by abz; 10-22-2006 at 07:20 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles