GET ORGANIZED WITH TABLES 

Let's Build a Table

Let's say you have a Web site for your family that is scattered all over the country. They come to your site for information and to look at those great pictures you have posted. You want to list everyone's  birthdays, anniversaries, email address, and addresses. How do you do this with out making a mess of your page? Tables!

Figure out the Layout.

We want to list the name, address, email address, birthday, and anniversary dates. We will need  five columns to take care of this information. We will need as many rows as families we want to list plus our header row. We have five families scattered all over, so we need six rows.

To start our table, open a new file and name it, tables.html

Warning symbol  Important - remember you are making a web page so do not forget to start and end it correctly.

<html>
<head>
<title>My Tables Homework</title>
</head>
<body>
  Then your page contents - table - here.
</body>
</html>

Add the following code:

<table border="2" cellpadding="5" cellspacing="0">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
We have set up a table with a border of "2" and cellpadding of "5".

We have our six rows and have set up our five columns. The first row will be our header row, so we use the <th>...</th> tags. The other five rows use <td>...</td> tags.

By setting up all our table tags ahead of time, we eliminate the potential of  missing a tag and have them all properly nested.

Back to Top