(Legacy) HTML: Tables:
Alignment Within a Table
Last Modified on 12/05/2022 9:27 am CST
This article is based on legacy software.
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
University of Wisconsin-Eau Claire
Copyright © 2016 UW-Eau Claire and the Board of Regents of the University of Wisconsin System
<TABLE BORDER=1>
<TR> <TH>......Monday......
</TH>
<TH>.....Wednesday....
</TH> <TH>......Friday......
</TH> </TR>
<TR>
<TD>Align<BR> Left
(default)</TD>
......Monday...........Wednesday..........Friday......
Align
Align
Left (default)
Center
Entire Row
Is Aligned
<TD
ALIGN=CENTER>Align<BR>
Align Center</TD>
Right <TD
ALIGN=RIGHT>Align<BR>
Center
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
University of Wisconsin-Eau Claire
Copyright © 2016 UW-Eau Claire and the Board of Regents of the University of Wisconsin System
<TABLE BORDER=1>
<TR VALIGN=TOP>
<TH>*<BR>Monday<BR>*</TH>
<TD>Entire Row is</TD>
<TD>Aligned Top</TD>
</TR>
*
Monday
Entire Row is
*
*
Wednesday
*
*
Top
<TH>*<BR>Wednesday<BR>*
</TH>
Align Middle Align
(default)
<TD>Align Middle (default)</TD>
Bottom <TD VALIGN=BOTTOM>Align
Bottom</TD>
*
Friday
Aligned <TR>
Align Top
Align
</TR>
Bottom <TR>
<TH>*<BR>Friday<BR>*</TH>
<TD VALIGN=TOP>Align Top</TD>
<TD VALIGN=BOTTOM>Align
Bottom</TD>
</TR>
</TABLE>
University of Wisconsin-Eau Claire
Copyright © 2016 UW-Eau Claire and the Board of Regents of the University of Wisconsin System