Tips & Tricks

There are hundreds of ways to use a table(s) when designing a web page. Some are more obvious than others, like creating a calender. I mentioned earlier that every page in the tutorial has at least one table on it. I use the table to create the red sidebar down the right side of your screen. It's simply a two cell table with no borders, the left cell contains all of the text and the right cell is set to a width of 100 with a bgcolor of #FF0000 or red.

One thing about table cells that needs mentioning. If there is nothing in a cell, it will not be displayed. Even if you have width and height attributes set, the cell still has to have something in it. If you were to view the source of this page, you would see that I have a graphic called "blank.gif" in the second cell. This is simply a transparent gif that you can't see, but because the cell contains something, you can see the red background. If I were to remove the transparent gif, the red bar would dissappear. You can use the same method, or just put a space ( ) or period (.) in the cell.

One attribute that I didn't mention before is the BACKGROUND=. This will point to a file that will be tiled in the background, just like in the body tag. It can be used in the <TABLE> tag or a <TD> tag. It wasn't mentioned earlier because not all browsers support it.

Examples

I have included a few examples of how tables can be used in your web pages. The examples also show the HTML used to create them. Take a moment to look through the code until you understand how they were done.

Just a quick note: I mentioned that just about every page in this tutorial is contained within table, the navigation buttons below, and on all the other pages, are in their own table.

Table of Contents