Week 4, Lab 2: Creating a Table Layout

Fixing someone else's horribly twisted layout is only one of the delightful tasks you may face as a Web designer. Here's one that should bring even more joy: your client walks up with a sketch made in magic marker on the back of a pizza box. "I want my Web page to look like that." Before you point out the difference between Mozilla and Mozarella, here's some encouragement: just about anything that can be laid out on a regular grid can be set up in HTML tables, given sufficient effort.

We've spared you the pizza box this time, 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. Behold:

Solution page for Lab 4.2

Now build the project. You'll find the text ingredients in the file called start4.2.htm. This file lives in a directory called lab 4.2, which also 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.