Using Tables

If you haven't, well, maybe this might actually be easier for you. I find that I'm having to overcome my "missionary" view of tables as I try to use them to create structure on my pages. I'll start off slow and see how far we get before you pass out!

We'll be using the following tags - <table>, <caption>, <tr>, <th> and <td>.

Plain Tables

I told you it'd be slow - let's put three items in cells:

This is about as basic as you can get and it looks like this in HTML code:

<table border="1" width="100%">
  <tr>
    <td width="33%">Stuff in cell 1</td>
    <td width="33%">More stuff in cell 2</td>
    <td width="34%">Final stuff in cell 3</td>
  </tr>
</table>

In this example we've set a lot of the variables and controlled the formatting to our liking. We could have left off the stuff and it would look like this:

Which is the result of the following code:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Stuff in cell 1</td>
    <td>More stuff in cell 2</td>
    <td>Final stuff in cell 3</td>
  </tr>
</table>

You probably noticed that the first table was a little more presentable. Let's play around with a few more of the table attributes and see what happens. We'll start by making the border thicker:

This is produced by:

<table border="6" width="100%">
  <tr>
    <td width="33%">Stuff in cell 1</td>
    <td width="33%">More stuff in cell 2</td>
    <td width="34%">Final stuff in cell 3</td>
  </tr>
</table>

We've let the system use it's default cell attributes up to now - let's go do some wild and crazy things with those:

The code that did this is:

<table border="6" width="100%" cellspacing="5" cellpadding="5">
  <tr>
    <td width="33%">Stuff in cell 1</td>
    <td width="33%">More stuff in cell 2</td>
    <td width="34%">Final stuff in cell 3</td>
  </tr>
</table>

The cellspacing="5" gave us the bigger borders around the individual cells while the cellpadding="5" gave us the extra space between the text in the cell and the edge of the cell.

Now let's play around inside the cells - like changing fonts, backgrounds and colors.

The code behind this horrible concoction is:

<table border="6" width="100%" cellspacing="5" cellpadding="5">
  <tr>
    <td width="33%" bgcolor="#FF0000"><strong><font face="Arial">Stuff in cell 1</font></strong></td>
    <td width="33%" bgcolor="#FFFF00"><font face="Georgia" size="4" color="#008080"><strong>More
    stuff in cell 2</strong></font></td>
    <td width="34%" background="../am/stuff/softbg.gif"><strong><font face="Brush Script MT"
    size="5">Final stuff in cell 3</font></strong></td>
  </tr>
</table>

All right, let's make it a little narrower and add some headings for the cells.

This code looks like:

<table border="6" width="75%" cellspacing="5" cellpadding="5">
  <tr>
    <th width="33%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 1</font></strong></th>
    <th width="33%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 2</font></strong></th>
    <th width="34%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 3</font></strong></th>
  </tr>
  <tr>
    <td width="33%" bgcolor="#FF0000"><strong><font face="Arial">Stuff in cell 1</font></strong></td>
    <td width="33%" bgcolor="#FFFF00"><font face="Georgia" size="4" color="#008080"><strong>More
    stuff in cell 2</strong></font></td>
    <td width="34%" background="../am/stuff/softbg.gif"><strong><font face="Brush Script MT"
    size="5">Final stuff in cell 3</font></strong></td>
  </tr>
</table>

The last thing we'll do to with plain tables is add a caption.

Which I did by adding one line to our definition like:

<table border="6" width="75%" cellspacing="5" cellpadding="5">
  <caption>SAMPLE TABLE</caption>
  <tr>
    <th width="33%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 1</font></strong></th>
    <th width="33%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 2</font></strong></th>
    <th width="34%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 3</font></strong></th>
  </tr>
  <tr>
    <td width="33%" bgcolor="#FF0000"><strong><font face="Arial">Stuff in cell 1</font></strong></td>
    <td width="33%" bgcolor="#FFFF00"><font face="Georgia" size="4" color="#008080"><strong>More
    stuff in cell 2</strong></font></td>
    <td width="34%" background="../am/stuff/softbg.gif"><strong><font face="Brush Script MT"
    size="5">Final stuff in cell 3</font></strong></td>
  </tr>
</table>

Quite a bit of stuff you can do with a "plain" table isn't it? Now let's start doing some of the fancy stuff.

Fancy Table Stuff

In all the previous examples we were just using a simple row-column table with a lot of attributes being set at the cell level. That's good and bad. If I had wanted my font to be the same for all my cells there's no way to do it in the table definition. I'd have to go into each cell and set the attributes.

Another characteristic - if I did not specify any background image or color, the cell is basically transparent.

Let's do some more cell sizing. I'll keep using the same ugly table to enable us to track the minor changes between the new table and the previous one. (Helps a geezer like me keep from being confused!) Let's try some row-spanning like this:

Which comes from doing this code:

<table border="6" width="75%" cellspacing="5" cellpadding="5">
  <caption>SAMPLE TABLE</caption>
  <tr>
    <th width="33%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 1</font></strong></th>
    <th width="33%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 2</font></strong></th>
    <th width="34%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 3</font></strong></th>
  </tr>
  <tr>
    <td width="33%" bgcolor="#FF0000" rowspan="2">A Spanning Cell</td>
    <td width="33%" bgcolor="#FFFF00"><font face="Georgia" size="4" color="#008080"><strong>Row
    1 Cell 2</strong></font></td>
    <td width="34%" background="../am/stuff/softbg.gif"><font face="Brush Script MT" size="4"><strong>Row
    1 Cell 3</strong></font></td>
  </tr>
  <tr>
    <td width="33%" bgcolor="#FFFF00"><font face="Georgia" size="4" color="#008080"><strong>More
    stuff in cell 2</strong></font></td>
    <td width="34%" background="../am/stuff/softbg.gif"><strong><font face="Brush Script MT"
    size="5">Final stuff in cell 3</font></strong></td>
  </tr>
</table>

Or we can do some column spanning like so:

which is done by:

<table border="6" width="75%" cellspacing="5" cellpadding="5">
  <caption>SAMPLE TABLE</caption>
  <tr>
    <th width="33%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 1</font></strong></th>
    <th width="33%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 2</font></strong></th>
    <th width="34%" bgcolor="#000000"><strong><font color="#FFFFFF">Column 3</font></strong></th>
  </tr>
  <tr>
    <td width="100%" bgcolor="#FF0000" colspan="3"><strong><font face="Arial">Spanned all
    three columns</font></strong></td>
  </tr>
  <tr>
    <td width="33%" bgcolor="#FF0000"><strong><font face="Arial">Stuff in cell 1</font></strong></td>
    <td width="33%" bgcolor="#FFFF00"><font face="Georgia" size="4" color="#008080"><strong>More
    stuff in cell 2</strong></font></td>
    <td width="34%" background="../am/stuff/softbg.gif"><strong><font face="Brush Script MT"
    size="5">Final stuff in cell 3</font></strong></td>
  </tr>
</table>

Now the last example I'm going to show you is to spark your imagination, or maybe wake you up. You can nest tables inside tables to create some pretty complex structures on your page. I'm starting to use this method to produce some formatting on my pages. I use it instead of frames because it's more universal and easier for users to navigate. I'll keep some of my frame stuff because I like the way it works for me but tables are very acceptable as formatting devices (just don't tell the purists or they'll be after me with the tar and feathers!)

The Rusk Family . . . "the Legend Continues"