Tabele

[Simple Table Commands][What Is Happening][Fancy Table Stuff][Links In Cells] [Images in Cells][Framing Images]

You want a table? OK, here's a table of the Brady family. Feel free to sing.

The Bradys
Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobbie

Hey! - That's not what I wanted!

Yes it is. You asked for a table. The thing above was made using the <TABLE></TABLE> commands. That's a table because...Oh wait - I'll bet this is the thing you were looking for:

The Bradys
Marcia Carol Greg

Jan Alice Peter

Cindy Mike Bobbie

Am I right? You wanted those fancy frame lines in the process so it looks like a graph or,
dare I say, A TABLE?

The Simple Table Commands

First things first. Let me explain the first table I showed you. The one you didn't want. It will make explaining the framed table a whole lot easier. Here's the little program I wrote to give me the Brady family table:

Now, don't be put off by this little ditty. It looks rough, but look again. There are really only four commands being used again and again. Here are the commands:

<TABLE> and </TABLE> start and end the entire thing. I think that makes perfect sense. This is a table after all.
<CAPTION> and </CAPTION> places a caption over your table. Yeah, its a pretty dull caption. Use it if you'd like or feel free to forget it right here. I just thought I'd show it to you. Heck, you're here aren't you?
<TD> denotes Table Data. You put this in front of every piece of information you want in a cell. Note: you need just the one </TD> at the end.
TR is used when you want a new Table Row to begin. Again, only one </TR> is required here.

What Is Happening Here?

What table commands do is create a series of cells. Each cell's data is denoted by the <TD> command. Please note that even though the program above has each cell (or TD) command on a new line, the cells keep going to the right until you tell the computer that a new row of cells will start by using the <TR> or Table Row command. Think of it as constructing a Tic Tac Toe board. You'll need nine cells for the board right? Three across in three rows. Use the <TD> command to make three cells across, use <TR> to jump to the next row, and so on until you have nine cells in three rows of three. Nothing to it. Remember that what ever follows the <TD> command will appear in the cell. And the cells will be equal size by column using the largest cell as the model for the others. Biggest wins in other words...In life as in HTML.

Really Fancy Table Stuff

Now on to making the fancy lines between cells. Here, again is that table above:

The Bradys
Agnes	Wilma	George
Gwen	Skippy	Alvin
Dork	Weenie	Joe

Ok, so I changed the names, but you get the idea. Below is the program I used to post this deal. Please note that the commands are the same! All I did was add a few things inside of them

If it looks like all the work is done in the <TABLE> command - it is. You are using three commands to do the work for you:

BORDER tells the table how large the border should be. This is all relative. Three is larger than two and two is larger than one, etc. Try different numbers. I happen to like the look of BORDER=3. BORDER=0 gets rind of the lines all together.
CELLSPACING (all one word) tells how much space you'd like in cells. I'd keep this kind of small. Large spacing tends to defeat the purpose.
CELLPADDING (all one word) tells how much padding is required in the cell. Note the cell walls tend to fill out. A higher number fills out more. Try a few different numbers. Sometimes bigger is better.

How about that new "ALIGN" deal in the <TD> command. See it? I have told the <TD> command I want the data that follows centered within the cell walls outlined in the TABLE command above. Can you do other ALIGN types? Sure. Try ALIGN=left and ALIGN=right. Use them in combination. Save them - trade them!

Activating Cells For Links

Wouldn't it be great if you could make a table with words and the words in the table were active so you could click on them? You can. See Below:

CBS Home Page	NBC Home Page
My Home Page	Ford's Home Page

The commands are the same for this table except you place a link command after the <TD> command. Here's what the command for the upper left hand cell looks like:

<TD align = "center"><A HREF="http://www.cbs.com">CBS Home Page</A>

By the way, the BORDER, CELLSPACING, AND CELLPADDING commands are all set at 20 in the above table to give you an example of some larger numbers.

Images in Cells

Can I put images in each of the cells? You bet. Here ya go:

	<--See?
See?-->

All you have done is followed the TD command with an image command. Again, the command that creates the upper left hand cell is this:

<TD ALIGN = "center"><IMG SRC="sally.gif">

Framing Images

I am asked at least once a week how to frame an image. What you have done above is basically framed two images. A frame around one image is nothing more than a one-celled table. Here's a framed image:

If this is all you want to do, the commands are much simpler than the ones above. You see, there's only the one cell to deal with so there's no need to tell the table any type of CELLPADDING or CELLSPACING. You can if you'd like, but there's really no need. There's also only one TD so there's no need to tell the table to jump to the next line through the TR command. Here are the commands that placed the above image in a frame:

Centering The Image

Here's one more quick hint. See how the images in the cells above are pushed into the upper left hand corner? Well, here's a quick trick to fix that.

Add a <TR> command before the <TD> that holds the image. Then, close both commands with </TR> and the </TD>. But! Here's the trick. Make sure the </TR> and the </TD> are on the same line as the <TD> and <TR> Like so:

And here's the code...

<TABLE BORDER="10">

<TR><TD ALIGN="center"><IMG SRC="htmlgdds.gif"> </TR></TD>

</TABLE>

Again, notice that the end commands are on the same line as the start commands. If you jump the end commands to the next line, the effect is lost.

Finally..

Just about anything will go inside of a table. The table commands just surround the items with a frame. Try putting a few of your page's items within a frame or a table. It looks professional. Just don't go overboard with it. Then it starts to take on the not-so-nice look of too many lawn ornaments.