table alignment

[ironman32]

I'm trying to align these tables in this format

 

Session 1          Session 2

 

 

 

Session 3          Session 4

 

Here is the code for the tables

Session 1
<table border="1">
<tr><td>Stretch/Warm up</td></tr>
<tr><td><?php echo $input[$rand_keys[0]] . "\n";?></td></tr>
<tr><td><?php echo $input1[$rand_keys[1]] . "\n";?></td></tr>
<tr><td><?php echo $input2[$rand_keys[1]] . "\n";?></td></tr>
<tr><td><?php echo $input3[$rand_keys[1]] . "\n";?></td></tr>
<tr><td><?php echo $input4[$rand_keys[0]] . "\n";?></td></tr>
</table>
<p>


Session 2
<table border="1" >
<tr><td>Stretch/Warm up</td></tr>
<tr><td><?php echo $input[$rand_keys[0]] . "\n";?></td></tr>
<tr><td><?php echo $input1[$rand_keys[1]] . "\n";?></td></tr>
<tr><td><?php echo $input2[$rand_keys[1]] . "\n";?></td></tr>
<tr><td><?php echo $input3[$rand_keys[1]] . "\n";?></td></tr>
<tr><td><?php echo $input4[$rand_keys[0]] . "\n";?></td></tr>
</table>
</p>

Session 3
<table border="1" >
<tr><td>Stretch/Warm up</td></tr>
<tr><td><?php echo $input9[$rand_keys[0]] . "\n";?></td></tr>
<tr><td><?php echo $input10[$rand_keys[1]] . "\n";?></td></tr>
<tr><td><?php echo $input11[$rand_keys[1]] . "\n";?></td></tr>
<tr><td><?php echo $input12[$rand_keys[1]] . "\n";?></td></tr>
<tr><td><?php echo $input13[$rand_keys[0]] . "\n";?></td></tr>
<tr><td><?php echo $input14[$rand_keys[0]] . "\n";?></td></tr>
</table>

Session 4
<table border="1" >
<tr><td>Stretch/Warm up</td></tr>
<tr><td><?php echo $input15[$rand_keys[0]] . "\n";?></td></tr>
<tr><td><?php echo $input16[$rand_keys[1]] . "\n";?></td></tr>
<tr><td><?php echo $input17[$rand_keys[1]] . "\n";?></td></tr>
<tr><td><?php echo $input18[$rand_keys[1]] . "\n";?></td></tr>
</table>

 

Could anyone give me some guidance on this please?

[jcombs_31]

Will this be in a container?  Why not just set the table width and then float them with css.

 

Example

 

table {
  width: 50%;
  float: left;
}

[meomike2000]

that float works well till you start to have diffrent size monitors, like older ones, and newer wide screen, then setting the table size to 50% seems to change everything relative to sizes.

 

the page may not always look correct on diff monitors....

 

the other fix is to create a master table that would include the four smaller tables as table data.

 

this lets you make a table with four columns wide and then you can specify the size of the middle to and not the outer two.

 

<table border="1" width="100%">
<tr><td></td><td width="size">1</td><td width="size">2></td><td></td></tr>
<tr><td></td><td width="size">3</td><td width="size">4></td><td></td></tr>
</table>

 

this lets the outside columns adjust to compensate for diff monitors and keeps your tables correct.

 

[xtopolis]

the other fix is to create a master table that would include the four smaller tables as table data.

You shouldn't try to solve tables with more tables.  Simply create a wrapper div with 100% width while setting the tables' width to 50%.

[jcombs_31]

that float works well till you start to have diffrent size monitors, like older ones, and newer wide screen, then setting the table size to 50% seems to change everything relative to sizes.

 

the page may not always look correct on diff monitors....

 

the other fix is to create a master table that would include the four smaller tables as table data.

 

this lets you make a table with four columns wide and then you can specify the size of the middle to and not the outer two.

 

<table border="1" width="100%">
<tr><td></td><td width="size">1</td><td width="size">2></td><td></td></tr>
<tr><td></td><td width="size">3</td><td width="size">4></td><td></td></tr>
</table>

 

this lets the outside columns adjust to compensate for diff monitors and keeps your tables correct.

 

 

That argument doesn't make much sense.  First, from what I can see he is trying to use a table for what it was meant for, and that is displaying tabular data, not for layout purposes.  Now of course when creating anything fluid you have to consider different size real estate, that is basically the point of using percents, so things can stretch and collapse. 

 

What I gave was an example of how to achieve an effect and that is by using a float.  He can just as easily used fixed sizes for the tables and could wrap them in a div, but without knowing more about the page and how it was set up, it is simply easiest to provide an example.