Making a Table

Task: Add your schedule to your home page

You're going to add your schedule (real or imaginary!) to your home page by using a table. Here's what it will look like:

My Schedule
Time Class Room
9-11 French I Room 101
11-12 Lunch Cafeteria
12-2 French II Room 202
2-3 Tutorial Session Room 303

A table is really nothing more than a series of rows and columns. If you look at the example above, I have used 3 columns (time, class, room) and 5 rows. A table is constructed one row at a time. Each square within a table is called a cell.

How Do You Do That?

Here's the source code for the table above:

<center>
<table border=3 cellspacing=3 cellpadding=3>
<caption>My Schedule</caption>
<tr>
    <th>Time
    <th>Class
    <th>Room
</tr>
<tr>
    <td>9-11
    <td>French I
    <td>Room 101
</tr>
<tr>
    <td>11-12
    <td>Lunch
    <td>Cafeteria
</tr>
<tr>
    <td>12-2
    <td>French II
    <td>Room 202
</tr>
<tr>
    <td>2-3
    <td>Tutorial Session
    <td>Room 303
</tr>
</table>
</center>
Center - I want to center my table on the page, so I first insert the "center" command. Notice that at the end of my table, I turn off the "center" command with </center>.

Table. I have to announce to the world that this is indeed a table coming at you, so I insert the "table" command to begin. Within the table tag, I'm going to add three more codes (see below): border, cellspacing, and cellpadding. When I finish my table, I will turn off the table command with </table>.

Table border=3 refers to the width of the border around the table. 1 is the narrowest border; 10 is quite wide. Experiment with the width you prefer.

Cellspacing=3 refers to how much white space I want within each cell. 1 is the least amount of white space, more than 10 tends to get to be too much.

Cellpadding=3 refers to how much space I want between cells. Again, 1 is very little, 10 is a lot.

Caption announces the title of my table. I will turn off the caption command with </caption>.

TR refers to table row. I am announcing that I am beginning a new row in my table. When I get to the end of the row, I will indicate that I've reached the end with the </tr> command.

TH means "table header," in other words, a label for each column. The label will appear automatically in bold type on the page. The first row of my table consists of my column labels.

TD refers to "table data." I will fill each cell of my table with data. So, each time I start a new cell in each row, I will insert the command <td>. In this example, I have three cells across, so for every row, I will have three <td> tags. Notice that I do not have to end the command with </td>.

The End. Once you have completed the three TD entries for each of the five rows, you have come to the end. Don't forget to turn off the table tag with </table> and the center tag with </center>. Your table is finished. Easy, n'est-ce pas? By the way, did you notice that this section (source code + explanations) is also a table with two columns?!

What can you put in the cells of a table?

Here is a simple table that incorporates all three:

My Favorite Person
Meet my son, Matt. He is a fifteen-year-old Wayne Gretzky wannabe who loves to play hockey with the Greenville Youth Hockey Association.

When he's not on ice skates, he's rolling around Greenville on his roller blades.

Borderless tables are very useful for lining up text and images. Here's what the same table looks like without a border. In the source code, just change the border command to border=0.



My Favorite Person
Meet my son, Matt. He is a fifteen-year-old Wayne Gretzky wannabe who loves to play hockey with the Greenville Youth Hockey Association.

When he's not on ice skates, he's rolling around Greenville on his roller blades.

Now It's Your Turn!

Using the source code and explanations above, create a simple table of your fall schedule on your home page. Use at least three rows.

Pat Pecoy
MFL 195
Summer 1997
This page was updated on November 4, 1997