Tables do not have to be  nested  in order to line them up;

just use align="left" in the first table tag,
and align="right" in the second table tag.


Table
(left)
Table
(right)



You will need to use <<>br clear="all"> after closing the second table, in order for things to appear underneath the two tables.

The <<>br clear="all"> tag also can be used when aligning images left, right or in combinations.



If you do not use <<>br clear="all">, then "things" will slip in-between the two tables as demonstrated below:


Table
(left)
Table
(right)
I did not use the <<>br clear="all"> code after the second table code, so this message will appear between the two tables.





And adding another table (with align="center" inside the table tag), after the codes for the other two tables:

Table
(left)
Table
(right)
Table
(center)


NOTE: If you are using Webtv upgrade version 2.2.7.1,
align="center" does not work for centering tables,
but align="center" does work for the 2.5 and 2.6 versions.

<table border="1" align="left"> <tr> <td align="center">stuff here</td> </tr> </table> <table border="1" align="right"> <tr> <td align="center">stuff here</td> </tr> </table> <table border="1" align="center"> <tr> <td align="center">stuff here</td> </tr> </table>



The <<>br clear="all"> also "clears out" text (and line tags, other images, etc) when used after singlely aligned tables or images, not just when tables and images are aligned in combinations.

Using:

<<>table border="1" width="200" align="right">
<<>tr><<>td>
Contents<<>br>Contents <<>br>Contents
<<>/td><<>/tr><<>/table>
This text will appear to the left of the table.


Demo of the code above:

Contents
Contents
Contents
This text will appear to the left of the table.




But if you use the <<>br clear="all"> tag, then the text will appear below the table, such as:

<<>table border="1" width="200" align="right">
<<>tr><<>td>
Contents<<>br>Contents<<>br>Contents
<<>/td><<>/tr><<>/table>
<<>br clear="all">
This text will appear below the table.

Using just a <<>br> or <<>p> tag will not produce the same results.



Demo of the code above:

Contents
Contents
Contents

This text will appear below the table. This text will appear below the table.





Nesting tables is another way to align tables, side by side:

<<>div align="center">
<<>table border="0" cellspacing="20">
<<>tr>

<<>td>
<<>table border="1"><<>tr><<>td>1st table contents here<<>/td><<>/tr><<>/table>
<<>/td>

<<>td>
<<>table border="1"><<>tr><<>td>2nd table contents<<>/td><<>/tr><<>/table>
<<>/td>

<<>/tr>
<<>/table>
<<>/div>

1st table
contents,
text,
and images
2nd table
contents,
text,
and images

1st table
contents,
text,
and images
2nd table
contents,
text,
and images
3rd table
contents,
text,
and images

1st table
contents,
text,
and images
2nd table
contents,
text,
and images
3rd table
contents,
text,
and images
4th table
contents,
text,
and images

audioscope example
using nested tables


Top of page


more codes