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". Or, more
accurately, the tags enclose the table element.
<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>
<hr size=1
width="100%" noshade color="#cccccc" align=center>
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!