AmeriYank's Basic HTML Table Tutorial, Lesson One

WELCOME!!

AmeriYank's HTML Table Tutorial--Lesson One.

In the past, we have learned how to create a basic HTML page. We know about linking and folders and all the nice things that improve our pages. But, we do not know how to make blocks of text appear next to graphics.

For example, if we want to make an image and have wrting next to it, it would probably look like this:

This is a lovely flower, isn't it? Wouldn't it be nice if we could get the text to appear all nice and centered next to the flower instead of looking the way it does in this example? Well, the good news is, we can. We just have to learn to use tables. Using tables makes our page look like this:

Here is our lovely flower. Doesn't it look better this way than in the above example?

You can do many things with a table. Today, we will just learn the very basic set-up. A table has three tags to make it up. And they must be used in order. To create a basic two-celled table , write, wherever you want the table to appear on your page:

REMEMBER, you MUST use the / to CLOSE each tag. And the tags MUST be NESTED. that means that you have to close each tag in the reverse order that you created it. You can create tables with or without borders. In our example above, we have one without borders.

Your text, image, or whatever you are putting in the table, MUST be placed AFTER the <td> and BEFORE the </td>

So, if you have an image and you are using a two-celled table, your code would look like this:

<table>
<tr>
<td>
<IMG src="flower.jpg">
</td>
<td>
This is a way cool flower!
</td>
</tr>
</table>

The above will give you some thing that looks like this:

This is a way cool table.

So, I want you to begin a NEW HTML page and name it "table.html". Write in your own text and choose your own image and your own background color for the page itself.. Now, create a web page with a two-celled table like the one above. Your code should look some thing like this:

<HTML>
<HEAD>
<TITLE>My Table Example Page</TITLE>
</HEAD>

<TABLE>
<TR>
<TD>
<IMG SRC="flower.jpg">
</TD>
<TD>
This is a way cool table.
</TD>
</TR>
</TABLE>

</BODY>

</HTML>

There are many, many things we will learn about tables in the next few weeks. This is only the beginning!

HAPPY CREATING!

HOME

Mary, Madonna and Blessed Virgin Mother and Jesus
Designs for Tsunami Relief.

Tuts
On to Table Lesson Two
On to Table Lesson Three
On to Table Lesson Four