And align="right" gives this (even without removing the <<>center> tag we have in our code):

But that is the same way we manipulate images on a web page or in an e-mail signature.

Step 12 Table Width
Let's make the table wider, so we will have more space in the cells, since they will expand to take up whatever space is assigned to the table:
Action: Add width="90%" to the <<>table> tag

We could have used a definite pixel width="400", but a percentage (%) figure is better because people may be viewing your table on a screen with a resolution of 800 or 600 pixels and the table will still take up 90% of the screen.

Width of the <<>td> cell can be specified as a % of the table width or as a pixel length. Just be sure you don't exceed the table width if you do specify <<>td> widths.

Step 13
To demonstrate the next attribute, we will have to remove cellpadding from the <<>table> tag:
Action: Erase cellpadding="25" from the <<>table> tag

Now we see that the default setting of the "Align" attribute for the <<>tr> and <<>td> tags is "left"

Step 14
To make the next effect even more apparent, let's put the cell number under the row number in each cell:
Action: Place <<>br> between the row # and the word Cell in each of the four cells

This is the code for the table above:
<<>center>
<<>table border="1" cellspacing="10" bgcolor="springgreen" width="90%">
<<>tr bgcolor="pink">
<<>td>Row 1<<>br>Cell 1<<>/td>
<<>td>Row 1<<>br>Cell 2<<>/td>
<<>td bgcolor="yellow">Row 2<<>br>Cell 1<<>/td>
<<>td bgcolor="orange">Row 2<<>br>Cell 2<<>/td>
<<>/tr><<>/table><<>/center>

Notice how the cells expanded their height to accomodate the text we put in them?

Step 15 Align
This step will demonstrate use of the "Align" attribute in the <<>tr> and <<>td> tags:
Action: Place align="right" in the <<>tr> tag for the first row; place align="center" in the <<>td> tag for Row 2 Cell 1 and place align="right" in the <<>td> tag for Row 2 Cell 2

Well, that worked nicely, didn't it?

Step 16
Now, make all cells aligned in the center:
Action: Place align="center" in both <<>tr> tags

That completes demonstrations of the "Align" attribute.

Next, the "Valign" (vertical alignment) attribute applies only to the <<>tr> and <<>td> tags.

Step 17
But to show this we have to either put the cellpadding attribute back in or make more vertical space in the cells some other way. There is another way: by using the "height" attribute:
Action: Place height="100" in all of the <<>td> tags

The "height" works for only the <<>td> and <<>table> tags.

Step 18
"VAlign" can be either "top", "middle" or "bottom". Notice that all the text is in the middle now, so the default setting for VAlign is "middle". Make the top left cell align to the top and the top right cell align to the bottom and the entire bottom row align to the bottom of each cell:
Action: Enter valign="top" in the <<>td> tag for Row 1 Cell 1, valign="bottom" in the <<>td> tag for Row 1 Cell 2 and valign="bottom" in the <<>tr> tag for Row 2

We'd better break the page or we will be getting the message "this page is too large to be shown completely". Please click here to continue.