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>
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!
| PageTutor - Table Tutor |
| Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
| Tables Quick Reference Barebones HTML Guide |
| Print version of this tutorial available - Get the PageTutor book & CD |
|
|
|
Joke Break