Lesson 1

Intro To Tables

Why learn about tables?

Tables are probably the most powerful web-building tool there is in HTML. They are the "Swiss Army Knife" of HTML. They are the "breakfast of champions"!

With tables you can:

  • place one image on top of another
  • put a fancy (imaged) border around an image
  • put multiple borders around an image
  • build a mini webpage inside another webpage
  • record your favorite team's wins & losses
  • make a checkbook register
  • make a spreadsheet
  • make a mileage log
  • make an appointment book
  • make a boxscore sheet
  • make a calendar
  • make a greeting card
  • make business cards
  • make personalized labels & stationery
  • make fancy schmancy table art (woo-hoo)
  • make friends & influence people!
And that ain't the half of it. "But Gnubee, I've seen some of that fancy stuff. That has to be hard. Tables intimidate me. Tables scare me".

Take courage! Tables are really very easy. In these lessons you will learn what every table tag does, one at a time. We'll start at the very beginning. We'll take our time, make some tables as we go along, and soon... others will wonder "Holy Smokes, how did they do that?" Well, maybe not, but you will be able to take control of your pages. YOU will be a mighty creator!

Speaking of which, here is our mantra. Repeat 3 times & feel the power as it begins to course through your veins:
I love tables!
Tables are my friend!
I AM THE MIGHTY CREATOR!!!

Ready? Great, here we go.

Basic 1-cell table:
<table> (open your table)
<tr> (open a row)
<td> (open a data cell)
Info (data) goes here  
</td> (close the data cell)
</tr> (close the row)
</table> (close your table)



<table> & </table> start & end your table.

<tr> & </tr> determine a table row. You can have as many rows as you want. (cool)

<td> & </td> determine a table data cell You can have more than one data cell in a row. (farout)

Key concept: Each data cell in a row determines a column.

That's all the basics there are! "TOO EASY", you say. Darn tootin'.

Happy tabling, you might creators!
Gnubee



Code



Homework Assignment

  • Make a separate directory for your tables.
    Make an index page. You will be linking your results to this page.

In Lesson 2, we will take a closer look at the <table> tag.



Table Course
Table Gallery Key Concepts and Table Tips
Understanding Gradangles
WebTV Viewer
Table Gallery
HTML Cookbook
Html.Help.Gnubee
Html Help Gnubee Chat