Table (left) |
Table (right) |
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) |
Table (left) |
Table (right) |
Table (center) |
stuff here |
stuff here |
stuff here |
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 |
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 |
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>
|
|
|
|
|
|
|
|
|