Intermediate HTML!


HyperText Markup Language

HTML Lesson 3

Working with Tables


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!."

Image

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.

Image

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 ]

Image

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.

Image

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.

Image

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.

Image



Image

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.

Image

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.


~ HTML Links ~

Lisa Explains It

HTML Goodies

HTML Goodies Reference

HTML Code Tutorial

Learning HTML - UT

Dave's HTML Tutorial

W3Schools Tutorials

W3Schools HTML Reference

W3C HTML Home Page



Back to Learn