Tables can be as simple or as complicated as you want. They give you a great deal of flexibility when getting your site together.

Below you'll find the link "Examples", please click to see the illustrations.

Look at the first two flags.

Here's the HTML for the first flag.

[TABLE]
[TR] [TH]A Horizontal Flag[/TH][/TR]
[TR] [TD BGCOLOR="red" WIDTH="200" HEIGHT="50"][/TD][/TR]
[TR] [TD BGCOLOR="white" WIDTH="200" HEIGHT="50"][/TD][/TR]
[TR] [TD BGCOLOR="blue" WIDTH="200" HEIGHT="50"][/TD][/TR]
[/TABLE]

Let's look at the tags one for one starting with [TABLE] - [/TABLE]. These two always enclose your table. It's that simple. There are, of course, attributes but not now.

The [TR] - [/TR] tags indicate an individual row within the table and the [TH] - [/TH] and [TD] - [/TD] define the individual cells within that row. Let's look a bit closer.

[TH] - [/TH] are the cells in which you can put the headings. These headings will be centred as bold text automatically.

[TD] - [/TD] are the cells which contain the information you want to display. (These two tags can also have images.)

The [TH] - [/TH] and [TD] - [/TD] tags share the same attributes so let's look at the ones we've used here. First BGCOLOR - "background colour" which is really self explanatory. It's one that is used by several other tags as we'll see later. Colour can be defined as above but it may also be represented by the R/B/G hexadecimal equivalent e.g. you can replace "red" with "#FF0000", " blue" with "#0000FF" and "green" with "#009900". Notice the hash - # - character, don't forget it!

We've used the WIDTH and HEIGHT attributes before so they should be self-explanatory. The value can be a percentage of the table or pixels as I've used here.

Why did I have to define the size? Let's see what the flag looks like without these attributes.

Look at the skinny flag. Its skinny because actually the cells are empty so the minimum is displayed and we have to adjust the size to achieve the image we want.

[TABLE]
[TR] [TH]A Horizontal Flag[/TH][/TR]
[TR] [TD BGCOLOR="red"][/TD][/TR]
[TR] [TD BGCOLOR="white"][/TD][/TR]
[TR] [TD BGCOLOR="blue"][/TD][/TR]
[/TABLE]

Right, that was a table with three information rows plus a header

Now the look at the second flag and the coding.

[TABLE]
[TR][TH]A Vertical Flag[/TH][/TR]
[TR]
[TD BGCOLOR="red" WIDTH="50" HEIGHT="150"][/TD]
[TD BGCOLOR="white" WIDTH="50" HEIGHT="150"][/TD]
[TD BGCOLOR="blue" WIDTH="50" HEIGHT="150"][/TD]
[/TR]
[/TABLE]

The main difference here is that instead of three information rows we only have one but that one contains three cells. Again, to give our 'flag' body we've defined the sizes of the cells. Let's look at the influence of the WIDTH and HEIGHT attributes on what we see. Look at this coding.

[TABLE]
[TR][TH]A Vertical Flag[/TH][/TR]
[TR]
[TD BGCOLOR="red" WIDTH="50"] [/TD]
[TD BGCOLOR="white" HEIGHT="150"][/TD]
[TD BGCOLOR="blue"] [/TD]
[/TR]
[/TABLE]

We've given "red" WIDTH, "gray" HEIGHT and "blue" neither. And what happens?

Look at the third flag.

We see that "red" is broader than the other two, as you would expect, but all three have taken the length of the longest. So you could say then you don't really have to define HEIGHT for all cells. Right you don't but I think you should, just to keep the symmetry and logic of your table clear.

So, you are now aware of the flexibility of the table. Have a look at these two. First a vertical 3D table then a horizontal.

And there's so much more you can do, look at the last example. A combination of a table and the colors of your choice.

There are 7 other articles on HTML from the same author.

Examples [http://www.the-html-book.com/tables/]. (Opens in a new page.)

For much more information visit The HTML Book [http://www.the-html-book.com]. (Opens in a new page.)