Before starting this lesson, you should be fairly comfortable with the basics of HTML that we
discussed in the first and second lessons. I won't waste your time going over the things that we have
already talked about. If you feel that you need a refresher, please see the first lesson entitled
"Writing Your Own WebPages (HTML)"
or the second lesson entitled
"Moving Along with HTML!."
In this lesson we will create a table with 7 cells as shown in the picture above. The table shown
consists of 3 rows and 4 columns as outlined below. Beneath the picture below are links to the finished page,
a text file of the page, and a larger image of the code. Tables are used to align pictures, information, and/or
other items within a WebPage, which cannot be positioned properly using the regular tags. With tables, you can
place just about anything anywhere you want within your WebPage. The items you put in a table are located
within the table's cells. For this lesson, I have only used 2 pictures, ("cell5.gif" and "cell6.gif"), and
textual information to keep things simple. Keep in mind that there are lot's of other things that can be
placed in tables. When you open the link to the finished page below, the table will probably be a lot taller
than the table shown. I will explain why and show you how to do it differently later on in the lesson.
Click here to see the finished page
Click here for a text file of the page
Click here for a larger image of the code
The image at the top of the page shows the code that we will use. It's a little difficult to read, so I
recommend using the link above that has the larger image of the code. Open your Notepad program and copy the
code exactly as it appears in the picture. Don't forget to save your code as ".html". When you are finished
we will go over the tags and the attributes for the table. (Hint: If you're too lazy to copy the code, you
can open the link to the finished page then "View Source" and copy the source code, but you will learn more
if you take the time to type it in.) You will also need to download and save the two pictures below in the
same folder that you put your html file.
These are the pictures you will need
[ cell5.gif ]
[ cell6.gif ]
Inside of the <TABLE> tag you will notice that the WIDTH attribute is set to 400. This will create
a table 400 pixels wide. The HEIGHT attribute is set to 90% of the height of the page. The height will change
as the page is resized, but the width will always remain the same. Using percentages creates dynamic
tables that always resize when the page is resized. Using pixel values creates static tables that will
always remain the same size. If you like, you can change the WIDTH attribute to 90% now and see what I mean.
The CELLPADDING attribute is the amount of space, (or padding), in pixels, between what is inside of a cell
and the edge of the cell. The CELLSPACING attribute is the amount of space, (or how far apart), in pixels,
the cells will be from each other. The values for both of these attributes can be anything from 0, for none,
to as high as you need to go. The BGCOLOR attribute sets the background color of the table. The BORDER
attribute sets the size of the table's border in pixels. It can be 0, for no border, up to as thick as you
want to make it. The BORDERCOLOR attribute sets the color of the border.
There are some other attributes for the <TABLE> tag that we didn't use. A BACKGROUND attribute can be
used to place an image as the background of your table. You can use an ALIGN attribute to position your table to
the left, right, or center of your WebPage by using the values LEFT, RIGHT, and CENTER.
Click here for the WIDTH=400 table
Click here for the WIDTH="90%" table
Just below the <TABLE> tag you will see a <TR> tag. TR stands for table row. This <TR>
tag is the start of the first table row. The code for this row is shown below. Every row within a table begins
with the opening <TR> tag and ends with the closing </TR> tag. There can be several <TD> or
<TH> tags within the <TR> tag, but only one <TR> tag is used for each row. The code for the
first row has four <TD> tags for its four cells. There are several other attributes that you can use
with the <TR> tag that I chose not to use, simply because they can normally be handled within the
<TD> tag just as well. Some of the <TR> tag attributes include: ALIGN, BGCOLOR, BORDER, BORDERCOLOR,
HEIGHT, VALIGN, and WIDTH. We will go over the attributes for these tags next. Their values are the same for
the <TD> tag.
The <TD> tag contains the attributes used for an individual cell. TD stands for table data.
I have highlighted each individual cell's data in yellow in the picture of the code above.
The COLSPAN attribute is used to define how many columns a cell will span. The ROWSPAN attribute is used
to define how many rows a cell will span. Sometimes the COLSPAN and ROWSPAN attributes may not always
position a cell's data exactly the way you want. Sometimes it helps to use the WIDTH and/or HEIGHT attributes
to more precisely position a cell's data. The values for WIDTH and HEIGHT can either be a percentage or
number value in pixels. The ALIGN attribute aligns what is inside of a cell left, right, or to the center.
The values for the ALIGN attribute are LEFT, RIGHT, and CENTER. The VALIGN attribute is used to position a
cell's data up and down vertically. The values for VALIGN are TOP, MIDDLE, and BOTTOM. If you compare the
code with the table, you can see how we used these attributes to position each cell's data. The BGCOLOR
and BORDERCOLOR attributes work the same as with the <TABLE> tag.
Other attributes for the <TD> tag that we didn't use are: BORDER, HEIGHT, and NOWRAP. The NOWRAP
attribute keeps the information inside of a cell on the same line and prevents it from wrapping to the next
line. Below is a picture of the code for the table's second row. I put the two pictures, (highlighted in
yellow), in the second row.
You may have already noticed something a little different about what's inside of the last <TR> tag
shown above. The difference is that we didn't use any <TD> tags in this row. Instead, we used a <TH>
tag. The <TH> tag is normally used in the first row, because TH stands for table header. I only used it
here to make you aware of it. You can use a <TH> tag to place a title for your table. It formats the
cell's data just a little differently than the <TD> tag does, but the differences in the two are very few.
If you notice, the only difference here was that the <TH> tag made the cell's data a little bolder than
the <TD> tags did. If you don't use any attributes with the <TH> tag, it will also center align
the data, where the <TD> tag will left align the data. These differences can be handled by using attributes.
For this reason, many people seldom use it.
In this table you will notice how we made cell 3 and 6 span two rows. Cell 5 only spans one row,
but spans two columns. Cell 7 spans one row and three columns. Cell 1, 2, and 4 only span one row and
one column. Cells 1, 2, 3, and 4 are all defined within the first <TR> tag in their own individual
<TD> tags. The difference with cell 3 is that it is defined to also span into the second row as well.
Within the second <TR> tag we only had to define cell 5 and 6, since cell 3 was already defined to
exist in that row within the first <TR> tag. Here, cell 6 is defined to span into the third row also.
Within the last <TR> tag we only had to define cell 7, since cell 6 was already defined to exist in
that row within the second <TR> tag. If you study the code and picture above closely, you will see
how this was done.
As always, experiment with the code! Change the attributes around to see what happens! Tables can be
tricky, so the more you mess around with them the better you will be able to understand them. If you want
to mess with the <TABLE> tag's ALIGN attribute, you may want to remove the <CENTER> and
</CENTER> tags. Remember that you can put pictures, words, or just about anything you want within a
table's cells. A table is a great tool to use for organizing your WebPages.
|
