Terrific Tables to Try

Tables are a great way to build webpages. Up until now, we have only learned how to write across the whole page. Now we are going to learn to subdivide the page into sections that we can create separate things for.

I wonder if this frogdance.gif is any good?

While Mr. Froggie is busy dancing for us, I want to show you a couple of things. First, Mr. Froggie is in a table. This table is made up of two cells, one for the picture and the other for the caption. It is a very simple table.
The code is as follows:

<Table border=2> This command says make a table with a border.
<tr> This command says make a table row.
<td> This command says to make a table cell.
<img src="frogdance.gif" Width=300 Height=250 ALT="Froggie"> This command says to place the frog gif in the table cell.
</td> This command says to end the table cell.
</tr> This command says to end the table ROW.
<tr> This command says to start another table row.
<td> This command says to make a table cell.
<font size=-1> This command says to make the font one size smaller.
<i> This command says to make italics.
I wonder if this frogdance.gif is any good?
</i> This command ends italics.
</font> This command ends font (the smaller size).
</td> This command ends the table cell.
</tr> This command ends the table row.
</table> This command ends the table.

While learning about tables, I am also going to give you a mini lesson about images. Notice how unclear the picture is. You can notice dots and spaces if you look closely. This is called pixelated and is caused by making the picture too big. Let's try the whole thing over again, making the picture smaller in a smaller table.
The only part of the above code to change (besides not specifying a border) is the following:
<img src="frogdance.gif" Width=200 Height=200 ALT="Froggie"> This command says to place the frog gif in the table cell.

Better, but let's try again.

How about one more version of Mr. Froggie so we can almost make the pixelated look disappear!

This time we specify the dimensions even smaller:
<img src="frogdance.gif" Width=125 Height=125 ALT="Froggie"> This command says to place the frog gif in the table cell.

Now he looks much better!

 

To create a simple table then, follow these directions:

1. Type <Table>
2. Type <tr> to start the first table row.
3. Type <td> to define the beginning of the cell. Why td instead of tc? I dunno. Ask the experts.
4. Type the contents of the cell.
5. Type </td> to complete the cell. Repeat last three steps for each cell.
6. Type </table> when finished. Don't forget, because Netscape won't forgive you.

   Check my source code and see how I made these three tables for Mr. Froggie. Now you try it.