Comments

• 

  gnunn

  Posts: 423 May 2010

  You need to enclose each table in its own tag and use the "display:inline-block" attribute to get the divs to line up side by side. The basic code looks like this:
  
  
  
  
  table{width:300px;border:1px solid black}.
  {background:#ddd}. | cell 1 | cell 2 | cell 3 |
  {background:#fff}. | cell 4 | cell 5 | cell 6 |
  {background:#ddd}. | cell 7 | cell 8 | cell 9 |
  
  
  
  
  table{width:300px;border:1px solid black}.
  {background:#ddd}. | cell 1 | cell 2 | cell 3 |
  {background:#fff}. | cell 4 | cell 5 | cell 6 |
  {background:#ddd}. | cell 7 | cell 8 | cell 9 |
  
  
  
  A couple things to note: You want to make sure your total table widths + margins is less than the width of the OP page (720 px?) otherwise they will stack vertically. You also want to make sure not to have any line breaks between the closing tag for the first div and the opening tab for the second. Otherwise, they will stack vertically.
  
  The basic principle works with more than just tables. You can put anything you like, text, images, whatever inside the two divs and they should appear side by side.
  
  Hope this helps!
• 

  Joettle

  Posts: 21 May 2010

  Thanks, gnunn! I was hoping you would respond to this. You seem to be the table wiz!
  
  It worked, but is there away to set the left margin to 0px. I want it to align with some text above. Also, my left table has 2 rows and my right table has 3. When I use the code they line up at the bottom. How do I get them to line up at the top?
  
  Thanks again
• 

  gnunn

  Posts: 423 May 2010 edited May 2010

  To align your tables along their top edges, you will need to add the following attribute to the opening div tag.
  
  "vertical-align:top"
  
  Margins are also fairly easy. You can place either 1, 2 or 4 different dimensions in the margin attribute. In the example I previously provided I just have 1. This means all the margins are evenly spaced (at 10px in this case). If you plug in two dimensions, the first represents the top and bottom margins and the second is the left and right. If you enter 4 dimensions, they start with the top margin and proceed clockwise around the table (top, right, bottom, left) See examples below.
  
  1 dimension "margin:10px;" (all margins 10px)
  2 dimensions "margin:10px 20px;" (top and bottom 10px, left and right 20px)
  4 dimensions "margin:10px 15px 20px 0px;" (top 10px, right 15px, bottom 20px, left 0px)
  
  So, the revised code you will need for your first div is:
  
  
  
  and for the second:

  Post edited by gnunn on May 2010
• 

  Joettle

  Posts: 21 May 2010

  Thanks again. Learning this coding is really cool. Once you break it down, it makes a lot of sense.