Lesson 7

Align & Valign

You can position the content of a cell horizontally by using align="left", align="center" & align="right" in a <td> tag. The default is align="left".

You can position the content of a cell vertically by using valign="top", valign="middle" & valign="bottom" in a <td> tag. The default is valign="middle".

The table below shows an image in each of the nine possible positions within a cell. Height & width are used to make the cells larger than the image in this illustration. You can "fine tune" your positioning by adding <br /> tags, &nbsp; (no break space) and spacers.

The 9 positions are:

• top left
• top center
• top right
• middle left
• middle center
• middle right
• bottom left
• bottom middle
• bottom center

3x3 Table showing align & valign
	align= "left"	align= "center"	align= "right"
valign= "top"
valign= "middle"
valign= "bottom"

Homework Assignment

Duplicate the table above
• Make a 3x3 table (exactly)
• Use cellspacing to make the 9 cells show up
• Put something in each cell, using height & width to make sure that the cells are larger than the content
• Use align & valign to show the 9 different positions that you can place your content in