table alggment

So i have a code like

  <table class=atable border=0px cellspacing=1 cellpadding=5>
      <tr>
      <td class=std>Country</td>
      <td class=std><font color=blue>Stock 1</font></td>
      <td class=std><font color=red>Stock 2</font></td>
      <td class=std><font color=green>Stock 3</font></td>
      </tr>

      </table>
      <table class=atable border=0px cellspacing=1 cellpadding=5>
      <tr>
      <td class=std>Country</td>
      <td class=std><font color=blue>Stock 1</font></td>
      <td class=std><font color=red>Stock 2</font></td>
      <td class=std><font color=green>Stock 3</font></td>

      </tr>
      </table>
      <table class=atable border=0px cellspacing=1 cellpadding=5>
      <tr>
      <td class=std>Country</td>
      <td class=std><font color=blue>Stock 1</font></td>
      <td class=std><font color=red>Stock 2</font></td>

      <td class=std><font color=green>Stock 3</font></td>
      </tr>
      </table>
      <table class=atable border=0px cellspacing=1 cellpadding=5>
      <tr>
      <td class=std>Country</td>
      <td class=std><font color=blue>Stock 1</font></td>

      <td class=std><font color=red>Stock 2</font></td>
      <td class=std><font color=green>Stock 3</font></td>
      </tr>
      </table>

Code (markup):

My problem is that this tables are loading like

TABLE1
TABLE2
TABLE3

I WANT THEM TO LOAD LIKE TABLE1 TABLE2 TABLE3, (ON THE SAME LINE)


I've tried with some CSS like display:inline , or in float:left

but both of them are fxxx the design

 

Insert the tables in other table like this

    <table>
    <tr>
    <td>
      <table class=atable border=0px cellspacing=1 cellpadding=5>
      <tr>
      <td class=std>Country</td>
      <td class=std><font color=blue>Stock 1</font></td>
      <td class=std><font color=red>Stock 2</font></td>
      <td class=std><font color=green>Stock 3</font></td>
      </tr>
      </table>
    </td>
    <td>
      <table class=atable border=0px cellspacing=1 cellpadding=5>
      <tr>
      <td class=std>Country</td>
      <td class=std><font color=blue>Stock 1</font></td>
      <td class=std><font color=red>Stock 2</font></td>
      <td class=std><font color=green>Stock 3</font></td>
      </tr>
      </table>
    </td>
    <td>
      <table class=atable border=0px cellspacing=1 cellpadding=5>
      <tr>
      <td class=std>Country</td>
      <td class=std><font color=blue>Stock 1</font></td>
      <td class=std><font color=red>Stock 2</font></td>
      <td class=std><font color=green>Stock 3</font></td>
      </tr>
      </table>
    </td>
    <td>
      <table class=atable border=0px cellspacing=1 cellpadding=5>
      <tr>
      <td class=std>Country</td>
      <td class=std><font color=blue>Stock 1</font></td>
      <td class=std><font color=red>Stock 2</font></td>
      <td class=std><font color=green>Stock 3</font></td>
      </tr>
      </table>
    </td>
    </tr>
    </table>

Code (markup):

 

try float:left and set width to table 1: 30%, table 2 30% and table 3 30%

 

As s_ruben said, putting them inside another table will work. Also, you can put them inside a div.

Also, why not set a classes like:
stdh
std1
std2
std3
etc.

and for std1 set text color to blue inside the .css? It'd cut down on a bit of code. =)

 

Hello,

Please visit http://w3schools.com/html/html_tables.asp to find a cool guide and description of how to build tables.

Hope this helps!!!
CoffeeCup.com

 

There are two main ways you can align text in a cell, horizontally & vertically. there are three ways of aligning it for both of these. Horizontally, you can align it left, right & center. Vertically you can align it top, bottom & middle.