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 13 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 less cluttered 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 Reference | Barebones HTML Guide
PROFESSIONAL WEB DESIGN