(Legacy) HTML: Tables: Alignment Within a Table

NOTE: The HTML pages are out-of-date and will not be updated.

It is possible to change the horizontal alignment of items within table cells. Table data defaults to left alignment; table headers to center. In order to change the alignment in one cell, insert the appropriate "ALIGN=" attribute within the code for that cell. In order to change the alignment in all cells in a row, insert the appropriate alignment attribute within the code for that row. The first example below shows several uses of the horizontal alignment attribute.

It is possible to change the vertical alignment of items within table cells. Data will default to the vertical middle of a cell unless additional code is added. To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row. The second example below shows several uses of the vertical alignment attribute.

Table with Cells Aligned Left, Right, and Center

......Monday...........Wednesday..........Friday......Align
Left (default)Align
CenterAlign
RightEntire RowIs AlignedCenter

<TABLE BORDER=1>
<TR> <TH>......Monday......</TH> <TH>.....Wednesday....</TH> <TH>......Friday......</TH> </TR>
<TR>
<TD>Align<BR> Left (default)</TD>
<TD ALIGN=CENTER>Align<BR> Center</TD>
<TD ALIGN=RIGHT>Align<BR> Right</TD>
</TR>
<TR ALIGN=CENTER>
<TD>Entire Row</TD>
<TD>Is Aligned</TD>
<TD>Center</TD>
</TR>
</TABLE>

Table with Cells Vertically Aligned Top, Bottom, and Middle

*
Monday
*Entire Row isAligned Top*
Wednesday
*Align Middle (default)Align Bottom*
Friday
*Align TopAlign Bottom<TABLE BORDER=1>
<TR VALIGN=TOP> 
<TH>*<BR>Monday<BR>*</TH>
<TD>Entire Row is</TD>
<TD>Aligned Top</TD>
</TR>
<TR>
<TH>*<BR>Wednesday<BR>*</TH>
<TD>Align Middle (default)</TD>
<TD VALIGN=BOTTOM>Align Bottom</TD>
</TR>
<TR>
<TH>*<BR>Friday<BR>*</TH>
<TD VALIGN=TOP>Align Top</TD>
<TD VALIGN=BOTTOM>Align Bottom</TD>
</TR>
</TABLE>