Chapter 6: Tables

'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' Quick Quiz Results

'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' Quick Quiz Results'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Each question of the quick quiz will be restated below, along with the correct answer. If the the red light is on, you answered the question incorrectly. If it is green, you answered correctly.'); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Question 1'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' '+form.Q1.value); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '+form.A1.value); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Question 2'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' '+form.Q2.value); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '+form.A2.value); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Question 3'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' '+form.Q3.value); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '+form.A3.value); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Question 4'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' '+form.Q4.value); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '+form.A4.value); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' Question 5'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln(' '+form.Q5.value); results.document.writeln('
'); results.document.writeln(' '); results.document.writeln(' '+form.A5.value); results.document.writeln(' '); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln('
'); results.document.writeln(' Click the close button below to close this results window. Then click Next Chapter to advance to the next chapter.'); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln('

'); results.document.writeln(' '); results.document.writeln(' '); results.document.writeln(''); results.document.close(); } // end hide from crusty browsers --> Tutorial

Goals of this Chapter
After completing this chapter, you should be able to insert a table, with many features and cells, into your document.

Chapter Sections
The sections of Chapter Six are as follows:

Section 6.1: About Tables
Section 6.2: Your First Table
Section 6.3: Table Borders
Section 6.4: More Table Options
Section 6.5: Quick Quiz

Tables can be used to display information in a organized fashion. They are relatively simple and easy to understand. Once you are familiar with them, you will be able to use them in many ways.

In this section you will learn the basics of table creation. A table starts off with the <TABLE> tag set.

<TABLE> </TABLE>

Next, a table row must be defined by using the <TR> tag set.

<TABLE> <TR> </TR> </TABLE>

A specific table cell must now be defined with the <TD> tag set. Even if the row will only have one cell, the <TD> tag must still be used.

<TABLE> <TR> <TD> Text within the first cell... </TD> </TR> </TABLE>

Making a second cell in the first row is very simple. Simply add an additional <TD> tag inside the <TR> tag. Making a second cell is very similar. Add an additional <TR> tag inside the <TABLE> tag. The following is the code of a slightly more complex table showing the score of a Red Sox and Yankees baseball game.

<TABLE> <TR> <TD> Red Sox </TD> <TD> 5 </TD> </TR> <TR> <TD> Yankees </TD> <TD> 2 </TD> </TR> </TABLE>

The outcome of the above code.

Red Sox 5

Yankees 2

Not very exciting, but it will be when more options are applied.

There are three types of table border options, each one being an attribute. They are BORDER, CELLPADDING, and CELLSPACING. First, BORDER adjusts the amount of space in the outermost border of the table. For example, the code...

<TABLE BORDER=5> <TR> <TD> Size 5 border table... </TD> </TR> </TABLE>

...will produce this table.

Size 5 border table...

Next, there is the CELLPADDING attribute. It adjusts the margin inside the table's cells. The BORDER is set to 1 in this example to better illustrate the concept.

Size 5 cell padding table...

Last, there is the CELLSPACING attribute It sets the space inside the table border. Again, the BORDER is set to 1.

Size 5 cell spacing table...

All three attributes can also be used at once. They can also be set to zero.

Size 5 border, cell padding, and cell spacing table...

There are still a few options that can be used in tables. The first one is the <CAPTION> tag. If used like this...

<TABLE BORDER=1 CELLPADDING=5 CELLSPACING=0> <CAPTION> Table caption... </CAPTION> <TR> <TD> Table content... </TD> </TR> </TABLE>

It will produce a caption above the table.

Table caption...
Table content...

Another additional option is aligning text within the cell. Just put the ALIGN or VALIGN attributes in the <TD> tag. ALIGN has three values, LEFT, MIDDLE, or RIGHT. VALIGN also has three values, TOP, MIDDLE, or BOTTOM.
The HEIGHT and WIDTH attributes, which define the height and with of the entire table or a single cell, can go in either the <TABLE> tag or the <TD> tag. Their value should be expressed in either an absolute pixel amount, or a percent.
The last option is the <TH> tag. This tag defines a cell to be a header. Use it in place of the <TD> tag.

Try to answer the following questions without looking back at the chapter.

Question 1: What tag is used to define a table?
The <TABLESET> tag.
The <TABLE> tag.
The <DEFINE> tag.

Question 2: Is a table cell or a table row defined first?
A table row.
A table cell.
Neither one.

Question 3: What two attributes define the height and width of a table?
The HEIGHT and WIDTH attributes.
The SIZE and SHAPE attributes.
The DEPTH and LENGTH attributes.

Question 4: What attribute defines a table's border size?
The SIZE attribute.
The BORDERSIZE attribute.
The BORDER attribute.

Question 5: What tag defines a table caption?
The <CAPTION> tag.
The <TABLE> tag.
The <TEXT> tag.

Now that you have completed the quick quiz, please press the Submit button to see your result. If you would like to restart the quick quiz, press the Clear button. If nothing happens when the Submit button is pressed, your browser does not support JavaScript. In this case, you should click here for the answers.

Please click the Next Chapter button below to advance to the next chapter.