Lesson 2: Spanning From Scratch

Overview The wizard is a helpful tool for constructing tables, but there are times when developers need to hand code. In this lesson you will hand code a spanning puzzle similar to the one you saw in the last lesson. Challenge You can use HomeSite (Do not use the Design view nor the table wizard.) or Notepad. Use Column and Row spanning in a table to piece together separate shapes so that they are arranged exactly like the finished Spanning Puzzle.

Spanning Puzzle

Follow this advice:

1. Sketch on paper how many rows and columns are necessary. Also, determine where spanning is necessary. You may want to pencil in the table code beside the sketch of the puzzle.
2. Use the same images as you used in the last lesson.
3. Modify the table tag so that cellspacing, cellpadding, and the border are all set at zero.
4. Give the table tag a width value of 350.
5. Give each cell/column tag the appropriate width tag.
6. Save the file and refresh the browser each time a change is made.

All done?

When you are satisfied with your results, show the finished product to your instructor. Be able to answer the following questions when your instructor checks for understanding:

1. How many cell or column tags are in rows one, two, and three?
2. When you look at the code for a given row of the table and it contains two column tags that have a combined width of less than the table's width of 350 pixels, how do you account for this difference?