The Web Designer can also determine where the data is placed in either the Table Row <TR> or the Table Data Cell <TD> with the use of the ATTRIBUTES of ALIGN= or VALIGN=

The ALIGN= ATTRIBUTE places the Data horizontally in: LEFT, RIGHT or CENTER

The VALIGN= ATTRIBUTE places the Data vertically in: TOP, MIDDLE or BOTTOM

Take a look at the use of the ALIGN=RIGHT attribute in the Table Row <TR> tag.

Example

<TABLE BORDER=2 CELLPADDING=4 CELLSPACING=4 WIDTH=450>
<TR ALIGN=RIGHT>
<TD WIDTH=150>This is the first Row and first Data Cell of this Table</TD>
<TD WIDTH=300>This is the first Row and second Data Cell of this Table</TD>
</TR>
<TR ALIGN=RIGHT>
<TD WIDTH=150>This is the second Row and third Data Cell of this Table</TD>
<TD WIDTH=300>This is the second Row and fourth Data Cell of this Table</TD>
</TR>
</TABLE>

Now let's look at the table using the ALIGN=CENTER attribute in the Table Row <TR> tag.

<TABLE BORDER=2 CELLPADDING=4 CELLSPACING=4 WIDTH=450>
<TR ALIGN=CENTER>
<TD WIDTH=150>This is the first Row and first Data Cell of this Table</TD>
<TD WIDTH=300>This is the first Row and second Data Cell of this Table</TD>
</TR>
<TR ALIGN=CENTER>
<TD WIDTH=150>This is the second Row and third Data Cell of this Table</TD>
<TD WIDTH=300>This is the second Row and fourth Data Cell of this Table</TD>
</TR>
</TABLE>

Now let's take a look at the use of the VALIGN= attribute in the <TR> tag.

Remember VALIGN= can be TOP, MIDDLE or BOTTOM

This example shows the use of the VALIGN=TOP attribute.

Example

<TABLE BORDER=2 CELLPADDING=4 CELLSPACING=4 WIDTH=450>
<TR ALIGN=CENTER VALIGN=TOP>
<TD WIDTH=150>This is the first Row and first Data Cell of this Table</TD>
<TD WIDTH=300>This is the first Row and second Data Cell of this Table</TD>
</TR>
<TR ALIGN=CENTER VALIGN=TOP>
<TD WIDTH=150>This is the second Row and third Data Cell of this Table</TD>
<TD WIDTH=300>This is the second Row and fourth Data Cell of this Table</TD>
</TR>
</TABLE>

The ALIGN= and/or VALIGN= attributes can also be placed in the Table Data Cells <TD>.

The Web Designer would use the attribute of ALIGN= and/or VALIGN= in an individual Table Data Cell <TD> when he/she wishes to have the data in a particular Table Data Cell <TD> display differently throughout the Table Row <TR>.

If you noticed in the two examples above, once the attribute of ALIGN= or VALIGN= was added to the <TR> tag, the entire row took on that attribute.

Here's an example of the use of the ALIGN= and VALIGN= attributes in different Table Data Cells <TD>. Notice how the data in each one of the Table Data Cells <TD> is displayed in a different fashion.

Example

<TABLE BORDER=2 CELLPADDING=4 CELLSPACING=4 WIDTH=450>
<TR>
<TD WIDTH=150 ALIGN=CENTER VALIGN=TOP>This is the first Row and first Data Cell of this Table</TD>
<TD WIDTH=300 ALIGN=RIGHT VALIGN=BOTTOM>This is the first Row and second Data Cell of this Table</TD>
</TR>
<TR>
This is the second Row and third Data Cell of this Table</TD>
<TD WIDTH=300 ALIGN=CENTER VALIGN=MIDDLE>This is the second Row and fourth Data Cell of this Table</TD>
</TR>
</TABLE>