Use these links to jump around or read it all…
[Simple Table Commands]
[What Is Happening?]
[Really Fancy Table Stuff]
[Activating Cells For Links]
[Images in Cells]
[Framing Images]
You want a table? Okay, here’s a table of the Brady family. Feel free to sing.
| Marcia | Carol | Greg |
| Jan | Alice | Peter |
| Cindy | Mike | Bobby |
Hey! That’s not what I wanted!
Yes, it is. You asked for a table. The thing above was made using the <TABLE> and </TABLE> commands. That’s a table because… Oh, wait — I’ll bet this is the thing you were looking for:
| Marcia | Carol | Greg |
| Jan | Alice | Peter |
| Cindy | Mike | Bobby |
Am I right? You wanted those fancy border lines in the process so it looks like a graph or, dare I say, A TABLE?
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 bordered table a whole lot easier. Here’s the little program I wrote to give me the Brady family
table:
|
<TABLE> <TR> <TR> <TR> </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’s what we use:
- <TABLE> starts and ends the entire thing. I think that makes perfect sense. This is a table after all.
- <CAPTION> and </CAPTION> places a caption over your table. The caption will be bolded and centered. Okay, it’s 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?
- <TR> is used when you want a new Table Row to begin.
Notice that you need
to end every table row with an </TR>. See that above? - <TD> denotes Table Data. You put this in front of every piece of information you want in a cell.
You need to end every one that you open with an </TD>. See how I have that above? - </TABLE> ends the whole deal.
It used to be that all of the end TD and end TR commands were not needed. Now they are. With the advent of version 4.0 browsers and HTML 4.0 specs, tables will be rendered incorrectly in Netscape browsers if the end commands are not used. I learned that the hard way when my tables all looked like heck when I upgraded. |
What Is Happening?
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.
Note that a <TR> is needed first to start the first table row. Note the code above again to see it. |
Remember that whatever follows the <TD> command will appear in the cell. And the cells, by column, will be of equal size 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:
| Agnes | Wilma | George |
| Gwen | Skippy | Alvin |
| Harry | Melvin | Joe |
Okay, 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.
|
<TABLE BORDER=”3″ CELLSPACING=”1″ CELLPADDING=”1″> <TR> <TR> </TABLE>
|
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 in terms of pixels. 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 rid of the borders altogether.
- CELLSPACING (all one word) gives the amount of space between cells. I’d keep this kind of small. Large spacing tends to defeat the purpose.
- CELLPADDING (all one word) gives the amount of space (or padding) between the cell border and the cell contents. Note the cell border walls tend to fill out. A higher number fills out more. Try a few different settings. 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 in different cells. Set one table cell to left. Set another table cell to center. 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>
</TD>
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”>
</TD>
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 unless you want space between the image and the border or you want the border larger. You can if you’d like, but there’s really no need.
Follow the full use of <TR> and </TR> command. Another quick hint is to keep it all on one line so that the image centers perfectly in
the border frame.
Here are the commands that placed the above image in a frame:
<TABLE BORDER=”10″ > <TR><TD ALIGN=”center”><IMG SRC=”sally.gif”></TD></TR> </TABLE> |
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.
[Simple Table Commands]
[What Is Happening?]
[Really Fancy Table Stuff]
[Activating Cells For Links]
[Images in Cells]
[Framing Images]
