We're about to go on a little venture that I've
been
looking forward to for a while! Tables can be used
to eat off of, they can be used to "frame" images,
and they are a great way to organize your
WebPages. I'm guessing that you already know about
the eating part (unless you're spending WAY too
much
time playing with the WebTV) so, we'll get right
on
to a discussion of the HTML Table commands!
We'll start out with the easiest thing first and
work our way up to multi-celled tables. Let's take
on
the job of "framing" an image!
And here is the "coding" we used to "frame" the
chief. By the way, how 'bout them Indians???
I think it's time we discussed what some of these
commands mean. It's nice to be able to use them in
a way that the author of a tutorial shows you.
It's even more fun when the commands are explained
in such a way that you learn to use them to make
your tables do what YOU want them to do!
First, of course is the
<TABLE>
command. This command simply tells the browser
that a table is about to begin. We've added the
bgcolor
and
border
attributes to give our example a way to standout
on the page. This is not necessary but is kind of
nice when we're "framing" images.
Next comes the
<TR>
command. This simply tells the browser that a
Table Row
is about to begin. All you need to know about this
one for now is that
rows
run across the page from left to right.
This is followed by the
<TD>
command.
TD
stands for
Table Data.
This is the information that is contained within a
cell
of a table. In our example (a one cell table) the
data
is the image of my old friend Chief Wahoo....
We've used the
align="center"
attribute to keep the image centered in the cell.
Here's a concept that we must keep in mind if
we're going to be successful "table builders".
The cell builds itself around the data and the
table builds itself around the cells.
What this means to us is that the larger the size
of the data the larger the cell. We will do well
to think of these cells as individual WebPages! A
LOT of the text and image formatting commands that
we've already learned will work inside the cells!
We can close all of the open commands for our
table by simply using the
</TABLE>
command....
By the way, did you notice how we did the "double
border" thing in the second example? We simply
"nested" the first table inside another with a
different background color! Easy enough?
Now it's time to get on to some of the FUN stuff!
Let's try putting two cells side by side with images
in each....
All we've done here is started another
cell
in the same
row
by using the
<TD>
command!
We can continue to add
cells
this way and the browser will do it's best to keep
them in the same
row.
Here is the "coding" that we used on that one. Do
you see how the second
cell
was added?
Let's add another handful of cells to the same row
to see how the browser reduces the
cells
proportionately to keep them all in same
row...
By now we ought to be able to figure out the
"coding" on that one. If not, go back and do a
little review. It's time to move on to some new
concepts, commands, and attributes!
The next
attribute
we're going to pick up works with the
<TD>
command. The name of the
attribute
is
COLSPAN.
COLSPAN
simply means
column span.
In our last table, each of the
cells
is counted as a
column.
Here is an example of how
COLSPAN
works.
1997 American League
Champions
And here is the "coding" that we used to build that
table. Make note of how we used the
colspan
attribute. When we created the first (top)
cell
we sent an instruction that the
cell
would
span
three
columns.
We did the same thing with the last (bottom)
cell.
Also, make note of how we used the
<TR>
command to create the second and third
rows
of the table...
Now let's move on and add a new attribute to the
<TD>
command. The
ROWSPAN
attribute will make a vertical
cell span
as many
rows
of
cells
as we ask it to. We added the "wings" to the table
below using the
rowspan
attribute...
We've also added the
bgcolor
attribute to the
<TD>
command. Note the black background in the new cells.
The other new attribute in this table is
CELLSPACING.
We've added the
cellspacing
attribute to the
<TABLE>
command to create the
spacing
between the
cells
that make up our table....
In case you're wondering what all those
keystroke are there for.... each of those represents
a single space (strike of the spacebar). That is how
we got a little width into the two
cells
that are on the left and right side of the table. I
would have used
<SPACER>
tags but Microsoft Internet Explorer doesn't support
the
<SPACER>
containers.....
I do want to add another attribute to the
<TABLE>
command and then we'll wrap this one up for awhile.
The new attribute is
CELLPADDING.
Take a look at the change to the
<TABLE>
command and see if you can see the difference in the
cells.
Do you see the
padding
around the
data
contained in the
cells?
