There are two main uses for HTML Tables -- organizing data in columns, and arranging elements on the screen. This tutorial will only cover data columns since nowdays arranging a page is done simpler and easier with style sheets.

To create your first table, you will need to know just three tags: <table>, <tr> and <td>. As you may have guessed, a table begins with the <table> tag and ends with the </table> tag. No suprises there!

The hard part about tables comes next -- and it isn't really hard once you practice it a bit. That is the concept of "Rows" and "Data Columns".

Each table data column will be wrapped in a <td> tag like this:

  <td>data1</td> <td>data2</td> 

Each row (one or more data columns values) is thenwrapped in a row tag <tr>. A simple resulting table might look like this:

  <table>
   <tr> <td>data1</td> <td>data2</td> </tr>
   <tr> <td>data3</td> <td>data4</td> </tr>
  </table>

And here's what it looks like in HTML-Help-Toy:

Make sure to open HTML-Help-Toy and try this out yourself. You will find that playing in HTML-Help-Toy will dramatically speed up learning HTML tables!

Advanced HTML Tables - Spanning Columns and Rows

Here's where tables get powerful and a little tough. In order to display more complicated information, you will sometimes want to have two columns or rows merged. Let's start with a couple examples. Needless to say, you should play around with these as much as necessary until the idea is clear.

Merging rows with colspan (I've added spacing to help make the structure clear):

  <table border=1>
   <tr> <td>item a</td>  <td>item b</td> </tr>
   <tr> <td colspan=2>item c</td>        </tr>
  </table>

Merging columns with rowspan:

  <table border=1>
   <tr> <td rowspan=2>item a</td> <td>item b</td> </tr>
   <tr>                           <td>item c</td> </tr>
  </table>

Great! You've really conquored a major hurdle now. Later you'll find that there is a lot more power available with additional table attributes and a few other important table tags -- but these are the core and you'll quickly pick up the others as you need them. You'll find HTML-Help-Toy to be a huge help early on as you construct your first simple tables. You'll also want to bookmark WC3's Table Reference.

Now let's move on to a quick overview of HTML frames!