Lesson 3: Nesting Tables

Overview

Developers commonly nest tables within tables when they build the structure of page. It is not unusual to see as many as three or more levels of tables imbedded in one page - a table within a table within yet another table, etc. In this exercise you will be required to use some of the cell alignment techniques you used in Module 1 as well as the technique to nest tables. The overall purpose being to develop greater control of layout through the use of tables.

Challenge

Using the Homesite editor view (and checking your work in the browser view), construct a parent table (the big table containing numbers in all but one of the cells) and a nested child table the little guy containing letters in all the cells) that looks exactly like the model.

Make an exact replica of this model!

Good Advice

1. Create the parent table of three rows and three columns.
2. Use the following attributes and values for the parent table tag <table>:
• Set the border to 1 pixel.
• Make the border color black.
• Make the border background pink.
3. Use the following attributes and values for cell tags <td> of the parent table:
• Set the width and height to 100 pixels.
• On the model, carefully note the position of the number in each cell and set the alignment and vertical alignment accordingly.
4. Insert your cursor between the last cell tags of the last row and create a new (nested) table of three rows and three columns.
5. Use the following attributes and values for the nested table within the table tag:
• Set the border to 1 pixel.
• Make the border color black.
• Make the width and height equal 95 pixels.

Wrap up

Show the perfect replica to your instructor.

Now Try This

There are times when you want to make the content in your cells to smack together without any seams. Especially with graphics and other images that divided up into multiple cells of a table, you don't want any gaps. Recall what you did with the puzzle in the previous lesson. You set the cell padding and cell spacing attributes to zero. With these attributes at zero and with the border set at zero the table's structure becomes invisible.

Change the alignment of two cells in your parent table so that two numbers occupying different cells are as close as you can make them. Then modify the parent table tag by setting cell padding, cell spacing, and border equal to zero. Did they kiss?

Wrap up

Show the kissing numbers to your instructor.