7. Beginning to Use Tables in Your HTML Pages

So, you ask, what is a table? You eat off of one, but that can't be it. Well, you guessed it, it's not. A table is just a group of rectangular cells in a large rectangles where HTML code can be placed. It helps enormously in formatting your pages.

Basic HTML Format of a Table

As above, the syntax involves a <TABLE> tag. It also requires a </TABLE> at the end, so the browser knows when to stop making a table.

In between you have to indicate the ROWS and COLUMNS of the table, and that is done with <TR> (Table Row) and <TD> (Table Column) tags. Don't ask why it is not<T>. It stands for "Table Data.". Each of these requires an end tag </TR> and </TD>, respectively.

It is important to recognize that these have to be in a certain order. Clearly the <TABLE> is at the beginning and the </TABLE> is at the end.

In between, <TD> and </TD> go between <TR> and </TR>. For example. A simple table with three rows and two columns and a caption, would have tags as follows

Then to fill in the table with text, links, graphics, etc., you would put the HTML code you need between each of the <TD> and </TD> tags.

The <CAPTION > . . . </CAPTION> tag always come right under the <TABLE>
tag. The text you put in for the caption will appear at the top of the table, centered. You may format the text in the caption, and by putting ALIGN=BOTTOM inside the tag, you can move it to the bottom of the table. If you are not interested in having a caption, you may omit the <CAPTION > . . . </CAPTION> tags.

"Attributes" of the <TABLE> tag

The simplest attribute to use is probably the BORDER="X"attribute. This says, "Put a border around the table of width "X" pixels." Here is the syntax for "BORDER=5" attribute in the <TABLE> tag.

Notice that the BORDER is around the outside of the table and that the inside borders are not as wide. If you leave the BORDER attribute out, then the table will display what is in the cells with no border anywhere.

This should give you a hint as to how valuable tables are in formatting web pages.

Another attribute of the <TABLE> tab is WIDTH. This gives a "fixed" WIDTH to the table. Below is the same table as above with a fixed width of 450.

If you narrow your browser window to about 2 inches wide and then look at this table, you will see that it has not changed size. That is, you must scroll right to look at the whole table. If this were a table with no fixed width, but with enough text in the cells to make it 450 pixels wide, shrinking the window would cause the table to "wrap" its text and shrink the table boundaries to fit the window. Using the WIDTH attribute in the <TABLE> tag gives you more control over how the viewer sees the table, no matter the size of the browser window.

Now look at the table below. It has 3 columns, 3 rows and a border of 1 pixel. There is nothing but a number in each cell.

The numbers are very scrunched up in the "cells." That brings us to the next "attribute," CELLPADDING. For formatting and design purposes, you sometimes like to have some space around what is in a cell. Since HTML is a "formatting" language, you would expect it to provide an attribute here that will let you "format" the "cells" that way. With the following <TABLE> tag, the table will look as it does below.

When you looked at the table above with the wide border, I mentioned that the borders of the cells are still narrow. (Scroll up and look again if you like.) If you want the borders of the cells to be different, there is an "attribute," CELLSPACING, you can use. We will leave the cell padding in the tag and add cell spacing (again in pixels) to the table tag above. The <TABLE> tag will be:

And then the table looks like this:

Note that even though the BORDER=1 attribute is in the tag, all the divisions and the border appear to be the same width, 10 pixels. Don't think, however, that you can omit the BORDER attribute. Without it there are no borders showing, but the extra spacing from the CELLSPACING attribute would be there.

There are a number of other "attributes" you can put in the <TABLE > tag such as BGCOLOR (background color), BORDERCOLOR, BGIMAGE (background image), etc., but you can look in "Rob Schulter's Tag List" or the "HTML Reference Source" linked under RESOURCES in the Table of Contents menu at the left. For now, we will stay with the simple attributes in the <TABLE > tag.

"Attributes" of the <TR> tag

ALIGN has to do with how the text appears horizontally in the cells of the row. The possible choices are LEFT, RIGHT, CENTER, and JUSTIFY. Look at this example. It should explain the syntax to you and show you how it works. Of course I put it in a "table."

Another <TR> attribute is the VALIGN attribute. What it does is determine how the text in a cell is to be positioned vertically. The values are TOP, BOTTOM, and MIDDLE. If you look in the table above, you will see that MIDDLE seems to be the default, since I put no VALIGN attributes in the <TR> tags.

Here is a table with the three possible values of VALIGN put in. There is a CELLPADDING of 5 to make it look better. That is why the text isn't flush against the borders.

"Some Attributes" of the <TD> tag

ALIGN and VALIGN are attributes of the <TD> tag as well as the <TR> tag. Here they determine respectively, the horizontal and vertical alignment of text in the single cell bracketed by the <TD> and </TD> tags. If you use them in the <TR> tag (which sets them for the entire "row.") and then in a <TD> tag, the <TD> tag's attributes will override the <TR> tag's attributes. Remember that ALIGN=LEFT and VALIGN=MIDDLE are the defaults.

Here is the basic outline of the code for a table showing these "attributes." Below it is the actual table.

You may also use the WIDTH attribute in a <TD> tag. This can be either in pixels or in percent. The percent only works if the WIDTH attribute has been set in the <TABLE> tag. Then, the percent means, percent of the WIDTH attribute in the <TABLE> tag, not the page. If the WIDTH of a <TD> tag is set so that it will not fit into the width of the TABLE, then strange unpredictable things happen. You never want to set the WIDTH attributes in the <TD> tags to add up to more than 100%. It is best to leave the last <TD> tag with no WIDTH attribute, and just let it take up whatever space is left.

There are some other minor attributes of the <TD> tag, such as ABSWIDTH and ABSHEIGHT, BGCOLOR, BACKGROUND, etc. If you wish to fool with these, look them up in the RESOURCES in the left side menu. These and others don't work with all browsers.

Two further "attributes" of the <TD> tag

What they do is let text or graphics you put in one cell spill over to the right into other cells (COLSPAN) or down into other rows (ROWSPAN) Their values are integers and tell the table how many rows or columns they may expand into. What you MUST do extra is:

First let's look at COLSPAN. Here is an example.

Here is the basic code for that table:

Now lets look at ROWSPAN. For this we will use the graphic of the University Chapel taking up two rows in the first column, and leave two cells in column two for other things.

	This is the Memorial Chapel of the University of Redlands
	It was donated anonymously in the 1920s and is currently undergoing earthquake refitting.

The basic code for this table is:

Well, that is enough for this lesson. We will take up more topics in the next. You can put several of these attributes in the various tags, and when you do, sometimes strange things happen, so when doing troubleshooting in those cases, add "attributes" one at a time to find out where the problems occur.

Exercises 7

1. Open a new HTML page and create a "multiplication" table on it. That is, use a table that has a * in the first cell and then the numbers from 1-9 in the first row. Then put the numbers 1-9 below the * in the first column. Fill in the table with the appropriate products. Give the table a border of one pixel, and center the entire table on the page.

2. Take the "Chapel" graphic off the table right above, and save it in your "Images" directory (if you already have it there, it is called Chapel.GIF.) Create a table with a border of 2 pixels. Put the chapel graphic in spanning the first two columns. Make the chapel 200 pixels wide, and aligned at the top of its cell. Put text describing the chapel in column 3 of row one and let it be long enough to span two rows to the right of the chapel. Make that text start at the top of the column. Put in two links under the chapel graphic to two different pages on the campus web site at newton.uor.edu. Center the table on the page.