Tables - alignment    
basics
expanding
sizing
colors
borders
< alignment >
nesting
navbar
quick recap
tags
epilogue
 		      The position of cell contents can be controlled with several alignment attributes. In the table cells below you see the alignment defaults to left, like a normal (web) page. Vertically the table behaves differently, it defaults to the middle of the cell. If one cell content is higher than another, the lower will shift downwards.

<TABLE BORDER="1" WIDTH="400">
<TR>
<TD>cell contents</TD>
<TD>cell<BR>con-<BR>tents</TD>
</TR>
</TABLE>

cell contentscell
con-
tents

    The horizontal alignment is set with the ALIGN attribute of the TD tag. Left alignment is not really necessary, since it is the default. This attribute is used for centering the navigation bar on this page.

<TABLE BORDER="1" WIDTH="400">
<TR>
<TD ALIGN="LEFT">cell</TD>
<TD ALIGN="CENTER">cell</TD>
<TD ALIGN="RIGHT">cell</TD>
</TR>
</TABLE>

cell cell cell

    The vertical position of the cell contents is set quite similar, with the VALIGN attribute, short for Vertical ALIGNment. Middle is not really necessary, since it is the default. It may be wise to always set the vertical alignment to top. Just to prevent surprises when your cell content changes.

<TABLE BORDER="1" WIDTH="400">
<TR>
<TD>c<BR>e<BR>l<BR>l</TD>
<TD VALIGN="TOP">cell</TD>
<TD VALIGN="MIDDLE">cell</TD>
<TD VALIGN="BOTTOM">cell</TD>
</TR>
</TABLE>

c
e
l
l		 cell cell cell

    The menu in the navigation bar at the left of this page is pushed to the top of the page with the VALIGN attribute. On some pages the menu may be larger than the text on the page. To prevent problems, I always set the vertical alignment of the text cell set to top too.
    The alignment attributes can also be used in TR tags and TABLE tags. Then they will set the alignment for the row or the entire table. Cell settings will override row settings, row settings will override table settings.