HTML Cookbook: Horizontal Gradcolors

Building shapes with horizontal gradcolors is similar to building shapes with vertical gradcolors, but they are made by putting one cell on top of another using gradangles of 0 & 180 degrees.

Here's the basic code:
<table border="0" cellpadding="0" cellspacing="0" bgcolor="?">

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

<tr> <td height="?" width="?" bgcolor="?"
gradcolor="?" gradangle="180">
</td>
</tr>
</table>

Actually, we could leave the width out of one of the cells since it is defined by the other.

Let's build some horizontal shapes!

Bar, gray & blue

Cylinder

Vertical Disc

Illusion of Illumination
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 height of the 2 halves the brightness will be offset from the center & 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 together
Let's make a "dumbell". To do this, we need a tall shape at each end & a long short shape in the middle.

Now we need to think a little bit.

The space above the middle bar will be in the 1st row, the top half of the middle bar will be in the 2nd row, the bottom half of the middle bar will be in the 3rd row & the space below the middle bar will be in the 4th row.

Each row will need 3 data cells: an end, the middle & the other end.

The height of the top half of each end will be equal to the height of the space above the middle bar and the height of the top of the middle bar. Likewise for the bottom halves.

1st row: We will use rowspan="2" in the 1st & 3rd data cells to make "super-cells" that are 2 rows high for the top half of each end part. The top space will go in the middle cell.
2nd row: Since we used rowspan="2" in the 1st & 3rd cells of the 1st row, we only need one data cell for the top half of the middle bar.
3rd row: We will use rowspan="2" in the 1st & 3rd data cells to make "super-cells" that are 2 rows high for the bottom half of each end part. The bottom half of the middle bar will go in the middle cell.
4th row: Since we used rowspan="2" in the 1st & 3rd cells of the 3rd row, we only need one data cell for the space below the middle bar.

Here's our plan:

top of end

bottom of end

space above middle bar

top of middle bar

bottom of middle bar

space below middle bar

top of end

bottom of end

Dumbell:

Code

Nested tables
We'll add to our "weight set" by making a barbell using nested tables. The barbell will consist of 3 discs with different heights to represent weights on either end of a bar. The table will add a "cap" at each end to make it appear that the bar is going through holes in the weights.

The barbell is a more complex shape than the dumbell because there are 4 different heights involved. But we'll make things simple by just making one table for each shape & put all those tables in one row of another table. Easy!

Make an end cap table. You're an old hand at this by now.
Copy & paste for the other end cap.
In between, copy & paste for the middle bar, then increase the width.
Copy & paste the end cap for the first disc, then increase the height.
Copy & paste the 1st disc to make the last disc next to the right end cap.
Copy & paste the 1st disc to make the 2nd disc, then increase the height.
Copy & paste the 2nd disc to make the 5th disc.
Copy & paste to make the 3rd disc & increase the height.
Copy paste the 3rd disc to make the 4th disc.
Put each of these tables in a data cell.
Put the 9 data cells in one row.
Put the row in a table.
Center your table if you want.

Now, isn't that easy?

Barbell:

Code