Lesson 20

Gradcolor pairs in the same column

Just as we used gradcell pairs in the same row, we can use two cells together in the same column to build shapes.

In these examples, I'll use a slightly lighter bgcolor for the cells than the table bgcolor. This will make my shapes stand out a little more.

Use gradangle="0" in the top cell and gradangle="180" in the bottom cell. The gradcolor will be most intense where the 2 cells meet. Finally, just vary height & width to make different shapes.

Basic code:




Shortcuts and cautions

  • Since the width is the same in both cells and they are in the same column, you may omit the width in either cell of the pair.
  • Since 0° is the default gradangle you may omit gradangle=0 wherever it occurs in a table.
  • The default for cellspacing is 1. If you omit cellspacing in your table tag, you will usually get a "gap" between the 2 cells. Therefore it is advisable to always write a "complete" table tag:
    <table border=0 cellspacing=0 cellpadding=0>

Example shapes

Now let's see some shapes using gradcell pairs in the same column.

"Bar", gray & blue




"Tube"




"Cylinder"



"Disc"




Illusion of Illumination

Where the 2 gradcells meet in the middle, the gradcolor doubles up, making it brighter. This gives us the illusion of having a light source. If we change the height of the 2 halves the brightness will be offset from the middle and it will appear that the light comes from a different direction.

High light source

Top height="30", bottom height="60"




Low light source

Top height="60", bottom height="30"



Combining shapes

It is easy to combine basic shapes together to make objects.

I have a "dumbbell" below. It uses "cylinders" on the two ends and a "bar" in the middle.

You could make this using rowspan to make up for the difference in height between the sections, but it is easier to make a separate table for each section, then combine them in a nested table. Nesting your sections in a table also allows you to use cellspacing in the outer table to separate the sections and give them more definition.


Cellspacing=0



Cellspacing=1

Homework Assignment

  • Make a bar
  • Make a tube
  • Make a cylinder
  • Make a disc
  • Make a dumbbell using nested tables
  • Post your tables
  • Show your work for the dumbbell



In Lesson 21, we'll make a "doodad"

Table Course
Table Gallery Key Concepts and Table Tips
Understanding Gradangles
WebTV Viewer
Table Gallery
HTML Cookbook
Html.Help.Gnubee
Html Help Gnubee Chat