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
 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.
|
|
