Table Tutor- Lesson 1

Just like "follow the bouncing ball", I want you to open up Notepad (Yes Notepad!) and follow me. Copy and paste off this page the following to get you started:

`<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>`

</BODY>
</HTML>

Save it as `table1.html` in some folder somewhere. Go ahead and give it its own folder because we will be putting other things in there too. Start up your browser .Use it to open `table1.html` and run Notepad and the browser side by side. This way you can create your pages and almost instantaneously see the results of your handiwork. And you thought you needed a 9 megabyte 'wizzard' ;-)

Type in your table tags. These simply mean "starting a table" and "ending a table".

`<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>`

<TABLE>
</TABLE>

</BODY>
</HTML>

Every table needs at least one row.

`<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>`

<TABLE>
<TR>
</TR>
</TABLE>

</BODY>
</HTML>

And of course every row has to have at least one table data cell.

`<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>`

<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>

</BODY>
</HTML>

Now, just to keep things a little cleaner I am going to start writing only what is in the table tags. I will leave out the head, body, title, etc. tags from now on. Needless to say, leave them in your document.

`<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>`

Now you need something to put in that cell. How about Ed? let's put Ed in the `<TD>` cell.

`<TABLE>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>`

Well now, you are the proud owner of a fully functional html table! Open it with the browser and check it out! If you've done everything correctly your table should look like this:

Ed |  |

Just kidding! Haha! As you can see I am easily amused. This is what you have created:

Ed

Take a deep breath, pat yourself on the back and be proud. You made your first table!

`<--BACK` `NEXT-->`

General Table of Contents | Lessons Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 | Quick Index | Barebones HTML Guide
PROFESSIONAL WEB DESIGN