OK, now you have your colors picked out. And I hope you remembered the basic tags we need to use. If not, then I suggest writing them out on a piece of paper, so you can glance at them when you need to. Here we go.
This is your basic gradtable..
<table>
<tr><td bgcolor="000000"gradcolor="33ddff"
gradangle="0"height="10"width="100">
</td></tr></table>
Which will give you this..
Pretty simple, huh. You can change the colors or gradangle to whatever you like. Plus the height and width as well..Now normally when you are "tabling" as I like to call it..You will almost always use 2 <td>'s in a <tr>.. To get the desired effect you are looking for.. Let me point something out... If you do not have a good imagination, then I suggest you backspace your way out of here and try knitting or something else ..Because thats the major drive behind gradtables.. You are creating something out of nothing.. So you are constantly trying to think up differet things to either make or design using gradtables..Ok sorry to get off track here.. Now lets try putting 2 <td>'s together and come up with some sort of object..
The code will look like this..
<table>
<tr><td bgcolor="000000"gradcolor="33ddff"
gradangle="90"height="10"width="100"></td>
<td bgcolor="000000"gradcolor="33ddff"
gradangle="-90"height="10"width="100">
</td></tr></table>
And the outcome from the above code is below..
As you can see once I put a negative number the effect is naturally the opposite of positive..Now let me introduce you something to take care of that little space between the 2 <td>'s.
<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="33ddff"
gradangle="90"height="10"width="100"></td>
<td bgcolor="000000"gradcolor="33ddff"
gradangle="-90"height="10"width="100">
</td></tr></table>
The result below is......
Once I added the additonal tags the little space vanished. You must always leave the cellspacing 0 and border 0, or the little space will return. But you can change the cellpadding number to any that suit your needs.. Now lets try some more examples of different effects by playing with the numbers and colors..
The most widely used gradangles are 0, 45, and 90..You already seen the 90° angle in action... Now let me show you the 0° and give you an example of one time when there is only one <td> in a <tr>.. This will create the tube, as I call it...
The code is below..
<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="33ddff"
gradangle="0"height="20"width="100">
</td></tr>
<tr><td bgcolor="33ddff"gradcolor="000000"
gradangle="0"height="20"width="100">
</td></tr></table>
Which the results are below..
Pretty isn't it.. Now you may noticed that I did something different.. I changed places with the bgcolor and gradcolor on our second row..If I didn't, it would look like this...
Unless that is the effect you were looking for.. Because there really isn't a wrong way of making them..You just need to play around with the numbers..Now let me give an example of the 45° gradangle in action..
The code...
<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="33ddff"
gradangle="45"height="50"width="50"></td>
<td bgcolor="33ddff"gradcolor="000000"
gradangle="-45"height="50"width="50">
</td></tr></table>
The outcome....
Noticed I changed the height and width..That will also give you a different look to your gradtables...Just by changing the height and width..Let me on this next example, keep with the 45° gradangle, but switch the bgcolor and gradcolor on the 2 <td>'s, like I did on the tube gradtable..Plus switch the first <td> to negative 45 and make the second <td> positive..
<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="33ddff"gradcolor="000000"
gradangle="-45"height="50"width="50"></td>
<td bgcolor="000000"gradcolor="33ddff"
gradangle="45"height="50"width="50">
</td></tr></table>
Scroll down and see what has happend...
As you can see, just by switching the bgcolor and gradcolor, you can get a totally dofferent effect. And changing your positive and negative numbers as well.. Remember when I said black is the most used color... Well let me show you an example when black is not used in the gradtable, but black is used as your background color for your page..By doing this you can get some pretty interesting outcomes from your gradtables.. Lets try using a blue and gray to show this effect...
The code used is..
<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000055"gradcolor="707070"
gradangle="90"height="100"width="20"></td>
<td bgcolor="000055"gradcolor="707070"
gradangle="-90"height="100"width="20">
</td></tr></table>
And your result is....
Different effect, isn't it..You can really use any colors you like to get the desired effect your looking for.. Now let me explain a little bit about mixing colors.. Usually you want to use a light and dark color in your gradtable.. Putting 2 light colors will not always look so hot.. You can get away with using 2 dark colors, but 2 light just doesn't always look good.. Example is show below..
<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="white"gradcolor="33ddff"
gradangle="90"height="100"width="20"></td>
<td bgcolor="white"gradcolor="33ddff"
gradangle="-90"height="100"width="20">
</td></tr></table>
Which looks like this...
Not to good, huh. Sort of blurry..But lets use it with a dark color and see what it looks like..
<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="ffeeff"
gradangle="90"height="100"width="20"></td>
<td bgcolor="000000"gradcolor="ffeeff"
gradangle="-90"height="100"width="20">
</td></tr></table>
By using that color code you get this...
Ah, you can actually see something there..Thats just one example, like I said before, black is the universal color when it comes to gradtables..Let's move on to the next page..