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 (Win3.x users save it as `table1.htm`). Go ahead and give it its own folder because we will be putting other things in there too. Start up your browser [plug Netscape].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-->`

Introduction | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5 | Lesson 6 | Lesson 7 | Index
PROFESSIONAL WEB DESIGN