Lesson 9

Image on image

In Lesson 8, we made a table using a scenery image as a background. We learned how to use height and width in our <td> tag to control the appearance of the background image. Now we will "populate" our scene by placing an item in it.

I'm starting with a larger version of my "fall lane", 360x265.

We don't have anything in our cell yet. We could just put an item in the cell and use align & valign to position it. Or, if we want to put more than one item in the scene (which we will do in Lesson 11), we could use a nested table, then position our items in the inner table. I'll nest a table to put a teddy bear in my scene.

I want Teddy near the bottom and a bit right of the center. When we discussed align and valign, I mentioned that you can "fine" tune with breaks and spacers.

First I used valign="bottom" to get Teddy on the bottom, then I added 3 breaks to move him up a bit.

Then I decided the easiest way to get Teddy over to the right would be simply to put a cell to his left and put a spacer in it.

Happy tabling!
Gnubee

Homework Assignment

• Make a copy of your table from Lesson 8 (or make another if you like)
  
• Use height and width as necessary to size your scene
• Nest another table in the <td> tag
• Use your "inner" table to place an "item" in your scene
  
• Use align and valign to move your item around in your scene
• Post your table
• Show your code