HTML Cookbook: Vertical Gradcolors

It's time to start having fun & build some shapes with gradcolors. We'll use the same bgcolor for the table & for the cells. Then we'll put 2 cells next to each other in the same row, using gradangle="90" in the first cell & gradangle="270" in the second cell. Finally, we'll vary the height & width to get different shapes.

Basic code:
<div align="center">
<table cellpadding="0" cellspacing="0" border="0" bgcolor="?">
<tr>

<td height="?" width="?"
bgcolor="?" gradcolor="?" gradangle="90"
height="?" width="?">
</td>

<td height="?" width="?"
bgcolor="?" gradcolor="?" gradangle="270"
</td>
</tr>
</div>

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

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

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"

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

"Bar"
height="6"
width="250" each half
total width="500"

"Bar" on white

Red & Green Bars on White

Combining Shapes
Let's build a "spool" by combining some shapes. We'll put a "disc" above & below a "cylinder". This presents a small challenge because the discs will be wider than the cylinder, but the rows have to be the same width. We'll solve this by using 4 data cells in each row. The top & bottom rows will use colspan="2" to make 2 "wider cell halves". The first & last cells in the second row will be empty & they will match the difference in width between the disc & the cylinder for each half, while the middle 2 cells will form the "body" of our spool.

Here's the layout plan:

Top, left half, colspan="2"		Top, right half, colspan="2"
Open space	Middle, left half	Middle, right half	Open space
Bottom, left half, colspan="2"		Bottom, right half, colspan="2"

Here's what our spool looks like:

Code

Nested Tables
Another way to do the same thing is to use "nested tables". Each shaped section is a table. Put each shape table in a row of a larger table. The easy way to look at this is to recall that we already have tables for a disc & a cylinder. Use the codes for those, one after the other: disc, cylinder, disc. Then build your table from the inside out. Each shape table goes inside a <tr><td> </td></tr>. Then just add <table> at the top & </table> at the bottom. Your spool will look the same.

<div align="center">
<table>
<tr><td align="center">
Table code for disc goes here
</td></tr>
<tr><td align="center">
Table code for middle cylinder goes here
</td></tr>
<tr><td align="center">
Table code for bottom disc goes here
</td></tr>
</table
</div>

Now we'll use some nested tables to build a little temple. First we'll have 3 "disc" tables of different widths at the top, each in a table row. Then 3 "column" tables & spaces in between them, all in one row. Then 3 more "disc" tables, each in a row, kind of like steps.

Here's the plan:

Disc

c
o
l
u
m
n

s
p
a
c
e

c
o
l
u
m
n

s
p
a
c
e

c
o
l
u
m
n

Disc

And here is our temple:

Code for temple

WebTV Viewer
Gradcolor Intro
Horizontal Gradcolors
More About Gradangles

Back To Index
More Mallrats Tutorials