Invisible Table Tricks

Cool things that you can do with invisible Tables

This tutorial will show you some really cool things that you can do on your web pages using invisible tables. It assumes that you already have a basic working knowledge of the table tags. Let's start out with a very quick review of table basics:

We've added a period between the opening < and the start of each tag. This was done to show you the source rather than the result of the code. When you write your URL, please use <tag> and not <.tag>

<.table><./table>
Creates a table. Begin and end every table with these tags.
<.tr><./tr>
Stands for "Table Row". Sets off each row in a table
<.td><./td>
Stands for "Table Data". Sets off each cell in a row
<.th><./th>
Sets off the table header (a optional cell with bold, centered text for the top row of a table)

Sample Table


<.table border="1">
   <.tr>
     <.td>Cell 1<./td>
     <.td>Cell 2<./td>
   <./tr>
   <.tr>
     <.td>Cell 3<./td>
     <.td>Cell 4<./td>
   <./tr>
<./table>

This would produce a table with two rows and two cells in each row:

Cell 1	Cell 2
Cell 3	Cell 4

If you'd like additional practice with the basic table tags, please visit our Table tutorial. Now let's get on with the fun stuff.

Using an invisible table on a two-toned page

I'm sure you've seen them. Web pages that have a splash of color down the left side of the page. The problem with such pages is that text spilling across from the main part of the page into that color zone looks terrible. Below you'll see some examples. Click the link to view them. Use the "back" link or your browser's back button to return to this tutorial.
Before going on, please click here to see an example of the problem and ways in which it can be fixed. Please don't skip the example. It's necessary in order to understand what is being done.

First you saw text splattered all over the page. Next, you saw two fixes; one with the table border showing and one with it invisible.

Look at the code


<.table border="0">
<.tr>
<.td width="15%">
<.td width="80%">
All of the text for the page goes here.
<./td>
<./table>

First, we open a table using the <.table> tag.
We want this table to be invisible so we set the border to zero. <.table border="0">
Next we open a table row <.tr>
This row will encompass our entire page. You'll notice we don't close it with the closing <./tr> tag until the very end.
Next we open a table data cell using <.td>
We're setting the width of this cell to cover 15% of the page <.td width="15%">
Widths can be expressed in pixels or percentages. It's best to use percentages since we can't predict the screen resolution (how many pixels wide) of our audience. The page border color is about 13% on the lefthand side of the page. So 15% gives us enough room.
Now we close that table data cell <./td> because we can't to keep any text on the page out of there.
Now we're ready to open our other table data cell.
This one has the width set to 80% <.td width="80%"> You may notice that 15+80 is only 95%. This is OK. Text doesn't necessary have to stretch from one side of the page to the other.
Notice that this time we don't issue the closing <./td> tag.
Why? Because we don't want to close this cell until all of the text or graphics or links we want on this page have been placed into the cell. Only when we reach the end of the page do we issue the closing <./td> and closing <./table> tags. (Always remember to close your tables. Netscape browsers can crash if you don't do so).

Here is another example with no other 'clutter' on the page: Two-toned page

Using an invisible table to create right and left margins

But what if you're not using a two-toned background? Can you use tables to set right and left margins? Absolutely. Please click here to see our margins in action. Again, please don't skip the sample page. As you've seen, we first have text stretching across the enter page. Next we use a table with one row and three cells to make margins. There is no text in the first and third cell. They are there to create margins for us. The middle cell contains all of the text for the rest of the page. This is done exactly as we did the two-toned page. We're simply adding a 3rd cell to keep text out of the right margin of our page.

Look at the code


<.table border="0">
<.tr>
<.td width="15%"><./td>
<.td width="60%">
All of the text, links, graphics, etc for the page would go here. 
<./td>
<.td width="15%"><./td>
<./table>

As you can see, we've opened a table making it invisible by setting the border to zero.
Our table has one row that will encompass the entire web page.
Our table has 3 data cells:
First: 15% of the page, Second: 60% of the page, Third 15% of the page.
Everything on the page goes into that second (middle) table cell.
Finally, we close our table.

Using an invisible table to make images line up nicely

Have you ever been extremely frustrated because you just can't get your graphics to line up correctly? One simple solution is to put your graphics into a table. This will give you complete control over placement. Our example page will show graphics in a visible table followed by the same thing in an invisible table. We'll be repeating a single grpahic for simplicity. Needless to say, each table cell and inclde a different graphic. Please Click Here to see our graphics in a table.Don't forget to come back to this page, we don't want to lose you!

Look at the code


<.table border="0" cellspacing="20" cellpadding="20">
    <.tr>
        <.td><.img src="theduck.gif"><./td>
        <.td><.img src="theduck.gif"><./td>
        <.td><.img src="theduck.gif"><./td>
    <./tr>
    <.tr>
        <.td><.img src="theduck.gif"><./td>
        <.td><.img src="theduck.gif"><./td>
        <.td><.img src="theduck.gif"><./td>
   <./tr>
   <.tr>
        <.td><.img src="theduck.gif"><./td>
        <.td><.img src="theduck.gif"><./td>
        <.td><.img src="theduck.gif"><./td>
   <./tr>
<./table>

By now you can guess what this table does. We open a table with no border. We're using cellpadding and cellspacing to create space between the cells (and thus between the images). Again, the larger the number, the more space you get.
Next you can see that we have 3 table rows. Each row has 3 cells. Each cell contains one graphic. We close the table and that's all there is to it!

You may notice one thing that's different about the code this time. The table rows are indented. The table data cells within each row are indented even more. Remember, HTML ignores spaces and carriage returns. When you write your table code, using this style of indenting can help you keep track of where you are and what you're doing.

Thank you for viewing this Table Tricks tutorial. If you have any questions, don't hesitate to ask.