Lesson 1: Controlling Alignment within the Cell Tag
Overview:
Square corners abound on the web. Sometimes it is nice to deviate from the hard cornered web world and make something rounded. In this lesson you construct a simple table and learn a trick for formatting tables with rounded corners. The main purpose, aside from bringing round to a square world, is to learn how to control the alignment of content (in this case images) within the cell tag.
Learner
Outcomes
- control the horizontal alignment within the table cell tag.
- control the vertical alignment within the table cell tag.
Activities
- Save these images to your personal file storage:
 |
 |
 |
 |
| Top Left |
Top Right |
Bottom Left |
Bottom Right |
- In HomeSite open a new page. Set the background for the page to be the same color as the gifs above - #CCCCFF.
- Construct a simple table using the table wizard in HomeSite with the following attributes:
- 3 columns, 3 rows
- each column's width is 100 pixels (same for height)
- white (#FFFFFF) background for the table.
- Within a table cell you can give three values for horizontal alignment (left,
center, right) and three values for vertical alignment (top, middle, bottom).
In other words, there are nine possibilities to position data within a cell
tag.
- In this exercise you will be using four of the possible nine positions. Now edit the cell tags and insert the images.
- Be sure to have your instructor inspect your rounded corner table when you have successfully constructed it.
Resources/Online
documents
All done?
Show your instructor your completed table.
