Lesson 18

Gradcolor pairs in the same row

We've already worked with individual gradcolor cells. Now we'll place 2 gradcells together in the same row to make some shapes. Shapes like these can be combined to make intricate designs or gradcolor table art.

In these examples, we'll use the same bgcolor for the table and for the cells. Then choose another color for the gradcolor in both cells.

Next, use gradangle="90" in the first cell & gradangle="270" in the second cell. The gradcolor will be most intense where the 2 cells meet.

Finally, we'll vary the height & width to get different shapes.

Basic code:






Shortcuts and cautions

  • Since the height is the same in both cells and they are in the same row, you may omit the height in either cell of the pair.
  • 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

Here are some shapes that you can make with gradcell pairs in the same row by just changing the height and width.


"Column"
height="150"
width="20" each half
total width="40"



"Cylinder"
height="90"
width="40" each half
total width="80"



"Disc"
height="20"
width="75" each half
total width="150"



"Bar"
height="6"
width="180" each half
total width="360"





















Illusion of Illumination
Now here's an interesting effect. Where the 2 "halves" 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 widths of the 2 halves the brightness will be offset from the center & it will appear that the light comes from a different direction.

Light from the left
Left width="20"
Right width="60"		   Light from the right
Left width="60"
Right width="20"
 



Combining shapes

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

I have a "spool" below. It uses "discs" on the top and bottom and a "cylinder" in the middle.

You could make this using colspan to make up for the difference in width 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 column
  • Make a cylinder
  • Make a disc
  • Make a bar
  • Make a spool using nested tables
  • Post your tables
  • Post the code for your spool




Lesson 19 will be on Reading Tables with Rowspan



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