Gradtables Made Easy

Well let me explain a little about the height and width in a gradtable..There are some things that you can do and things that you can't do...Let's say for an example you want to put 2 <td>'s in a gradtable..One with one height and another with a different height...That just doesn't work..Let's go to the drawing board and show the examples..

<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="ffeeff"
gradangle="90"height="150"width="20"></td>
<td bgcolor="000000"gradcolor="ffeeff"
gradangle="-90"height="100"width="20">
</td></tr></table>

As you can see they are both the same..You just can't have 2 different heights in the same <td>... Now lets see about the widths.. Roll film please..

<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="ffeeff"
gradangle="90"height="50"width="50"></td>
<td bgcolor="000000"gradcolor="ffeeff"
gradangle="-90"height="50"width="20">
</td></tr></table>

Well it seems you can have 2 different widths in the <td>.. There's a way to get the above effect of 2 different heights in the same row, but I would be getting ahead of myself.. Let's go into the gradtable more and see if your asking yourself how about putting 2 <tr>'s in a gradtable.. And the do's and don't's into that..Example..

<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="ffeeff"
gradangle="0"height="20"width="50">
</td></tr>
<tr><td bgcolor="ffeeff"gradcolor="000000"
gradangle="0"height="20"width="50">
</td></tr></table>

I went back wih are tube as an example..Now let's see what happens when we put 2 different height's in each <tr>..

<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="ffeeff"
gradangle="0"height="20"width="50">
</td></tr>
<tr><td bgcolor="ffeeff"gradcolor="000000"
gradangle="0"height="50"width="50">
</td></tr></table>

You can have 2 differnt height's in each <tr>.. And lets see about the width's..

<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="ffeeff"
gradangle="0"height="20"width="50">
</td></tr>
<tr><td bgcolor="ffeeff"gradcolor="000000"
gradangle="0"height="20"width="100">
</td></tr></table>

So the things are sorta backward... In the <td>,you can have 2 different width's, but not height's.. And in each <tr>, you can have different height's, but not width's.. Interesting isn't it.. Now I'm going to throw another scenario at you, just in case your wondering.. Let's say you want 2 <td>'s in one row, but only 1 <td> in the other <tr>...

<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="ffeeff"
gradangle="0"height="20"width="50"></td>
<td bgcolor="000000"gradcolor="ffeeff"
gradangle="0"height="20"width="50">
</td></tr>
<tr><td bgcolor="ffeeff"gradcolor="000000"
gradangle="0"height="20"width="50">
</td></tr></table>

What has happend is that in second row, the <td> has stopped with the first <td> in the above <tr>.. Want to know how to solve this minor problem.. Let me introduce a new tag into our gradtable.. Colspan, this tag will tell us how many colums or <td>'s it will span.. Let's put this tag into our gradtable...

<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="ffeeff"
gradangle="0"height="20"width="50"></td>
<td bgcolor="000000"gradcolor="ffeeff"
gradangle="0"height="20"width="50">
</td></tr>
<tr><td colspan="2"bgcolor="ffeeff"gradcolor="000000"
gradangle="0"height="20"width="50">
</td></tr></table>

Its has if I had put 2 <td>'s in the bottom row.. Kinda of neat trick isn't it.. Let me show you an example of when the tag colspan can come in handy..

Here's the code for this experiment..

<table cellpadding="2"cellspacing="0"border="0">
<tr><td bgcolor="000000"gradcolor="ffeeff"
gradangle="90"height="10"width="30"></td>
<td bgcolor="000000"gradcolor="ffeeff"
gradangle="-90"height="10"width="30">
</td><td bgcolor="000000"gradcolor="ffeeff"
gradangle="90"height="10"width="30"></td>
<td bgcolor="000000"gradcolor="ffeeff"
gradangle="-90"height="10"width="30">
</td></tr>
<tr><td colspan="4"bgcolor="ffeeff"gradcolor="000000"
gradangle="0"height="20"width="100">
</td></tr></table>

And the outcome of the code is....

The result is quite obvious... I have 4 seperate <td>'s in the top row... And only one <td> in the bottom row.. So what I did by using the colspan tag, was telling it to move or span 4 <td>'s along the bottom row.. Like I said, it can come in handy when times call for it.. I know your saying to yourself, "geesh isn't this tute over wih yet.. And the answer is no... I know I may be longwinded with this tute, but I'm trying to be as simple and cover every possible square inch I can... So let's move on, and get into gradtables a little more indepth..

Remember I said before about there is a way to put 2 <td>"s in the same row with different heights. Well I'm about to show you how.. In order to do this what you have to do is put 2 gradtables in another table.. Now I hope I don't lose nobody with this one.. So I'll be as simple as I can be.. Let's show he code first..

Ok, now let me explain exactly how I did this.. What you are looking at is 3 gradtables and one invisible table.. I placed the 3 gradtables inside the invisible table.. To show you better I will add a border around the invisble table..

Do you see it now.. Or have I lost you completely.. You can place as many gradtables into a table as you want.. You just have to remember to put the proper tags.. When doing this just remember to treat each gradtable as a <td>.. And its that simple.. Let's move on to the next section and I'll show you the use of text and oher things that can put into a gradtable...

Back