Lesson 8: Tables
Making A Table
You may be thinking "I have no use for
tables in my web pages". But hold on, tables can be used as page
layouts to help better control the placement of things on your web
page, so it's worth getting to know how to make one. First is:
<TABLE> </TABLE>
The stuff between these tags will make up your table. After
the beginning TABLE tag comes:
<TR> </TR>
It means "Table Row" The stuff between them will make up one row across
the table. After the beginning <TR> tag comes:
<TD> </TD>
It means "Table Data". The stuff between them will make one box,
called a cell, in the one row of the table. Sound confusing? No it's
not. Here's what I mean:
<TABLE> <TR> <TD> beagle </TD>
<TD> basset hound </TD> </TR> <TR> <TD>
doberman pinscher </TD>
<TD> pointer </TD> </TR>
</TABLE>
Get it? Can you see that this table
will have two rows and that each row will have two cells?
You can have as many rows and cells as you want but make sure that
each cell and row have an end tag. Here's the result:
| beagle | basset hound | | doberman pinscher |
pointer |
Hey! That's not a table, where are the lines? Oops,
I forgot, the beginning <TABLE> tag has a BORDER attribute:
<TABLE BORDER="1">
The higher the number the thicker the lines will be and don't
forget the quotation marks around the number. Result:
| beagle | basset hound |
| doberman pinscher | pointer |
A couple of other attributes that can go into the <TABLE> tag are
CELLSPACING and CELLPADDING. CELLSPACING
defines how far apart the cells are from each other. Example:
<TABLE BORDER="1" CELLSPACING="5">
Result:
| beagle | basset hound | | doberman pinscher | pointer |
CELLPADDING defines how far away from the cells' edges the stuff inside them will be.
Example:
<TABLE BORDER="1" CELLPADDING="5">
Result:
| beagle | basset hound | |
doberman pinscher | pointer |
You can use any combination of
attributes in a <TABLE> tag, just make sure each
attribute is separated by a space (by using the spacebar on your keyboard).
Aligning Data
By default everything in the cell will be to the left. You can center it or move it to the right by using the ALIGN attribute
in the <TD> tag:
<TD ALIGN="right"> beagle
</TD>
Result:
| beagle |
basset hound | | doberman pinscher | pointer |
There is also the VALIGN attribute.It makes stuff in the cell
line up at the top or the bottom but there has to be enough space in the cell for it to work
and since that's not the case in my examples I can't show you.
Wait a minute! Yes I can, by using the HEIGHT
attribute in the <TD> tag:
<TD VALIGN="top" HEIGHT="50">basset hound</TD>
Result:
| beagle |
basset hound | | doberman pinscher | pointer |
See how the other cell in the same row
became the same height as the one which had the
attribute placed in the tag? All cells in the same row will
be affected by the height attribute.
Notice the effect the VALIGN attribute had. It made
"basset hound"go up to the top of the cell.
Putting Color In Cells
You can have your cells be a different color by using the BGCOLOR attribute:
<TD BGCOLOR="#87CEFA">doberman pinscher</TD>
Result:
| beagle | basset hound | | doberman
pinscher | pointer |
Not bad, wouldn't you say?
Now that you know how to make a table, let's try something a little
more difficult, a page with
Do You Really Want Them?
|