Intermediate HTML

Lesson 2: Intermediate Page Design

Getting Fancy: Part II

When you look at my great masterpiece of a web page (humor me), do you notice that it sort of looks like it's in three horizontal sections? The first section, with the large picture of Beebe, seems to be divided roughly in half. Then the next section, with Kaye in the snow, seems to have three parts, and one of the parts has a grey background. In fact, that grey part actually seems to overlap the first section a bit. Then there's a third section, with one side stretching for most of the width, then a small picture tucked into the right hand side.

This cats page is an example of a page that has gotten a little bit away from that grid look that is the natural effect of using tables. You know:

BOR-R-RING!!!

The cats page breaks that look up by employing three aspects of table building:

1. colspan and rowspan

Instead of a grid, you can produce a more interesting layout, kind of the web equivalent of syncopation, by expanding one cell of a table across several rows or columns.

For example, the first cell of the bottom row of the cats page spans four columns of the total of five in the inner table. You don't SEE five columns because each of the rows in the table has at least one cell that spans more than one of the four columns. Here's a diagram that shows what I mean:

By using this technique, you can create more varied, more interesting and more attractive pages.

2. using spacer.gif

Spacer.gif is a 1 pixel x 1 pixel transparent image that's frequently thrown into web pages to jimmy the spacing. I don't know why, but it always seems to be called spacer.gif. See the one I put in on line 57? I used it to squeeze the grey box over to the right and get it to overlap vertically with the picture of Beebe. Kind of like a shim.

You'll see frequent deployment of spacer.gif by tools such as Dreamweaver and ImageReady when you use them to slice an image.

3. cell padding and spacing

You may also have noticed, in the cats page, that none of the squares of text or images touches any of the others too closely. That's because I added some cellspacing when I declared the table in line 41. Cellspacing is the space between the borders of adjoining cells. Cellpadding is the space within the borders of each cell. The little GRID! table above uses cellpadding to make some space around each word. Here's the same table without cellpadding:

GRID!	GRID!	GRID!
GRID!	GRID!	GRID!
GRID!	GRID!	GRID!

By the way, I used the border attribute in the table specification. The finished product is set to border="0", but if you set it to "1" while you're setting up your table, it's much easier to see what's going on with your design. Try it.

Hey! We're almost through the second lesson! Any questions? Comments? Visit the Forum.

  1  2  3  4  5  6