banner graphic

Lab 8: Creating a Table Layout

Here's a moment all Web designers treature: the client walks up with a sketch made in magic marker on the back of a pizza box, then says, "I want my Web page to look like that." Before you point out the difference between Mozilla and Mozarella, remember that just about anything you can lay out on a regular grid can be set up in HTML tables, given sufficient effort.

We've spared you the pizza box, and in fact have made this exercise pretty easy by pre-building the desired page--so you know there's a way to do this. Your final version should look like this:

Finished version of Lab 8

Now build the project. You'll find the text ingredients in the file called start8.htm. This file resides in the introShare directory on Crow, within a directory called Lab8. This directory contains an images directory in which you'll find joe.jpg, whose dimensions are 200x230. There's also a graphic there called whiteDot.jpg, whose dimensions are a svelte 1x1.

Some useful advice:

  1. There's at least one table involved here; its width is 600 pixels.

  2. Okay, there are two tables.

  3. You might begin by asking what you can do simply by placing elements in table cells and what needs to be done by some other method--i.e., that second table.

  4. If you do this right, you will use all the pieces. What would we need that spacer graphic for?

  5. Have some more coffee.

  6. Never trust Starbuck's.

This concludes Lab 8.