This little demonstration is going to walk you through the process of implementing a gradient into the background of your HTML tables. You must have some HTML experience, at least enough to understand how to place images into the background of your HTML table cells. Refresh your memory with our HTML Background tutorial or with our CSS Background.
To accomplish our goal we are going to make two publications - two .gif files to place in the background of our top and bottom table rows. Here's an example of our finished product.
Gradient Sample:
HTML Table Top:
Now, it will probably take a few tries before you get a gradient that you are happy with so keep drawing gradients until you get a look that suits you. Also, take note that the width of your creation is not very important as we will be trimming the width down. The only reason we stated a 200 pixel width is to make the canvas large enough to work with and see how the gradient looks on a semi large scale.
Be creative and flexible and keep at it until you are satisfied with how the gradient looks. Now is also a great time to save your work as a .pdf file and then continue along below.
Since these are going to be graphics for use on the web, we want to reduce the image size as much as possible for an optimal web experience. Large web graphics can become cumbersome and greatly slow down your web sites. If you are familiar at all with the behavior of background images in HTML you might have seen this technique before.
What we are going to do now is shrink the image to 1 pixel in width and 20 pixels high. We can get away with this because when this image is applied to the background of our table, it will be repeated over and over thus filling our HTML table cell no matter how wide we want the cell to be.
1 X 20:
We're finished, save the image File>Save for the Web. Save the file with a .gif file extension and set it to the background of your table row.
Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!
Travelling is my life
ConversionConversion EmoticonEmoticon