Advanced Tables

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
         Color tables
         Background images
         Nested tables
         Formatting with tables
         You try it
      Frames
      Style Sheets
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

One trick that is useful when making a table is to make the table stand out by being a different color than the background. Here's how to do that.

As you remember, the table consists of the <table> tags, the <tr> tags and the <td> tags. The mosst useful of these tags are the table and table data tags. These can also be modified to have a background color. Let's show you.

One	Two
Three	Four

First, start with a 2x2 table, like this one. Just to make it vivid, let's set the border at "3."

Now, let's put a background color on the whole table. To do this, we modify the <table> tag.

One	Two
Three	Four

This table now looks like this ====>

You'll notice that the entire table has become yellow, including the borders between the cells. This is a good way to make your table to stand out.

If you only want to change the color of one cell, this can be done in the <td> tag. It's done the same way.

One	Two
Three	Four

That would render a table like this ====>

One	Two
Three	Four

Notice that the spacing around the cell is not colored. If the entire table has the table data colored, you see this ====>

Can these tags be combined? Let's make a blue table with yellow squares. This time, I'll show you all of the code together:

Code
<table border="3" bgcolor="000099"> <tr> <td bgcolor="yellow">One</td> <td bgcolor="yellow">Two</td> </tr> <tr> <td bgcolor="yellow">One</td> <td bgcolor="yellow">Two</td> </tr> </table>

What you see

One	Two
Three	Four

This can be used in conjunction with cellpadding, cellspacing and border to modify the appearance of the table. Of course, you can change <td> tags to have different colors. Remember that you can also change the table border with the bordercolor command. The flag I made on the last page is mostly just table data background colors.

<table border=5 bordercolor="aqua" bgcolor="993399" cellpadding=5 cellspacing=5>
<tr><td bgcolor="ffff99">One</td><td bgcolor="99ff99">Two</td></tr>
<tr><td bgcolor="99ccff">Three</td><td bgcolor="ff9999">Four</td></tr></table>

One	Two
Three	Four