FCIT - Tables Tutorial

designed by Lara Labastie
A table can be a powerful tag to use in the format of a Web document. It allows you to create perfectly straight columns such as in a magazine layout, or meaningful and appealing matrices of data.

Tables are created using sets of paired tags, just like the other tags you are familiar with in HTML. The following is a list of the essential table tags.

Tag	Description
<TABLE>...</TABLE>	Defines a table
<TR>...</TR>	Defines a table row
<TD>...</TD>	Defines a cell within a row

What you do:

What you see:

<TABLE>
<TR><TD>Cell 1</TD><TD>Cell 2</TD></TR>
<TR><TD>Cell 3</TD><TD>Cell 4</TD></TR>
</TABLE>

Cell 1	Cell 2
Cell 3	Cell 4

What you try:

In the text area below, use the tags you just learned for a trial.
Copy & paste the example from "What you do" or type any text.
Modify the table by adding another ROW and CELLS.
Make sure you put your tags in the appropriate place.

You can also add a caption and row and column headings to your table by using the <CAPTION> and </CAPTION> and the <TH> and </TH> tags.

Tag	Description
<CAPTION>...</CAPTION>	Creates a centered table title
<TH>...</TH>	Creates centered, bold column or row headings

What you do:

What you see:

<TABLE>
<CAPTION>Hours of Business</CAPTION>
<TR><TH></TH><TH>Hours</TH></TR>
<TR><TH>Mon</TH><TD>8 am to 5 pm</TD></TR>
<TR><TH>Tue</TH><TD>8 am to 5 pm</TD></TR>
<TR><TH>Wed</TH><TD>8 am to 5 pm</TD></TR>
<TR><TH>Thr</TH><TD>8 am to 5 pm</TD></TR>
<TR><TH>Fri</TH><TD>8 am to 4 pm</TD></TR>
</TABLE>

Hours of Business
	Hours
Mon	8 am to 5 pm
Tue	8 am to 5 pm
Wed	8 am to 5 pm
Thr	8 am to 5 pm
Fri	8 am to 4 pm

What you try:

Notice that the first <TH></TH> pair has nothing inside. This will cause the first column heading to be blank.
The empty tag pair acts as a place holder. You can use this technique on <TR>...</TR> and <TD>...</TD> tags as well.
In the text area below, use the tags you just learned for a trial.
Copy & paste the example from "What you do" or type any text.
Modify the table by changing the CAPTION and column and row HEADINGS.
Make sure you put your tags in the appropriate place.

Now that you've been introduced to the essentials of a table, here are a few attributes you can use to make your tables more interesting. To use any of these attributes, you must include them inside your first <TABLE> tag.

Option	Description
BORDER=(any number from 0 to 10)	Creates a border
CELLPADDING=(any number in pixels)	Adds white space around the contents of each cell
CELLSPACING=(any number in pixels)	Adds white space between cells
WIDTH=(1% - 100%)	Defines the table width in proportion to the page

What you do:

What you see:

1,1	1,2	1,3
2,1	2,2	2,3
3,1	3,2	3,3

What you try:

In the text area below, use the tags you just learned for a trial.
Copy & paste the example from "What you do" or type any text.
Modify the table by changing the BORDER size to 1 and the WIDTH to 10%.
Make sure you put your tags in the appropriate place.

What you do:

What you see:

1,1	1,2	1,3
2,1	2,2	2,3
3,1	3,2	3,3

What you try:

In the text area below, use the tags you just learned for a trial.
Copy & paste the example from "What you do" or type any text.
Modify the table by changing the CELLPADDING size to 5.
Make sure you put your tags in the appropriate place.

What you do:

What you see:

1,1	1,2	1,3
2,1	2,2	2,3
3,1	3,2	3,3

What you try:

In the text area below, use the tags you just learned for a trial.
Copy & paste the example from "What you do" or type any text.
Modify the table by changing the CELLSPACING size to 20.
Make sure you put your tags in the appropriate place.

The attributes you just learned are applied to the entire table. Now lets learn a few attributes that can control an individual cell or an entire row of cells. To use any of these next tags you must include them inside your <TR>, <TH>, or <TD> tag.

Option	Description
ALIGN=(left, center, or right)	Aligns the cell's text accordingly
ROWSPAN=(any number of valid rows)	Allows a cell to span multiple rows
COLSPAN=(any number of valid columns)	Allows a cell to span multiple columns

What you do:

What you see:

<TABLE BORDER=5 CELLPADDING=10>
<TR><TH></TH><TH>A Long Heading</TH>
<TR ALIGN=LEFT><TH>Left</TH><TD>No</TD></TR>
<TR ALIGN=CENTER><TH>Center</TH><TD>Maybe</TD></TR>
<TR ALIGN=RIGHT><TH>Right</TH><TD>Yes</TD></TR>
</TABLE>

	A Long Heading
Left	No
Center	Maybe
Right	Yes

What you try:

In the text area below, use the tags you just learned for a trial.
Copy & paste the example from "What you do" or type any text.
Modify the table by rearranging the ALIGNMENT.
Make sure you put your tags in the appropriate place.

What you do:

What you see:

<TABLE BORDER=1 CELLPADDING=10>
<CAPTION>Column Spanning</CAPTION>
<TR><TH>Col 1</TH><TH>Col 2</TH><TH>Col 3</TH></TR>
<TR><TD COLSPAN=2>Col 1 & 2</TD><TD>Col 3</TD></TR>
<TR><TD>Col 1</TD><TD COLSPAN=2>Col 2 & 3</TD></TR>
<TR><TD COLSPAN=3>Col 1, 2, & 3</TD></TR>
</TABLE>

Column Spanning
Col 1	Col 2	Col 3
Col 1 & 2		Col 3
Col 1	Col 2 & 3
Col 1, 2, & 3

What you try:

Notice that when you span columns you have to leave empty areas for the columns to span into.
In the text area below, use the tags you just learned for a trial.
Copy & paste the example from "What you do" or type any text.
Modify the table by rearranging the COLSPANS, remember to leave the approprite spacing.
(HINT: Sometimes it's easier to draw and code the table on paper before typing on the computer.)
Make sure you put your tags in the appropriate place.

What you do:

What you see:

<TABLE BORDER=1 CELLPADDING=10>
<CAPTION>Row Spanning</CAPTION>
<TR><TH>Row 1</TH><TD ROWSPAN=2>Row 1 & 2</TD><TD>Row 1</TD></TR>
<TR><TH>Row 2</TH><TD ROWSPAN=2>Row 2 & 3</TD></TR>
<TR><TH>Row 3</TH><TD>Row 3</TD></TR>
</TABLE>

Row Spanning
Row 1	Row 1 & 2	Row 1
Row 2	Row 1 & 2	Row 2 & 3
Row 3	Row 3	Row 2 & 3

What you try:

Notice that when you span rows you have to leave empty areas for the rows to span into.
In the text area below, use the tags you just learned for a trial.
Copy & paste the example from "What you do" or type any text.
Modify the table by rearranging the ROWSPANS, remember to leave the approprite spacing.
(HINT: Sometimes it's easier to draw and code the table on paper before typing on the computer.)
Make sure you put your tags in the appropriate place.

Great job! You now know the basics for creating great tables. There are a few more advanced techniques that you can learn about on your own, but not many more. Remember, you can put anything into a table cell (links, images, text, etc.) Have fun, and good luck creating your Web pages!