I remember the biggest challange when I first started playing around with making web sites was figuring out the ever illusive table.

Tables are used for everything. To confine your text to a specific part of the page, to line up buttons, to piece together interfaces and so much more. But in the beginning they're hard to figure out.

In this tutorial we'll learn how to make a table, then we'll use tables to line up some buttons and then to piece together a three part "button".

Step 1: How do I make a table?
When it comes down to it, tables are actually quite easy. The are made up of rows and colums. All you have to do is decide how many of each you need, and then write your code to match. Below you'll see two tables.

The table above is made up with just one row and one column. It has a border around it so that you can see it, but often you'll use a table with no border. What does the HTML for this table look like?

<table width="300" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>&nbsp;</td>
</tr>
</table>

Later we'll look at what each piece of this code means.

The table here is made up of three rows and three columns. Again it has a border so that you can see the layout.

<table width="300" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

So, what does all this mean? Let's break down the components of the code and talk about how they work.

<table> </table>

These tags are used to open or close a table. Without them you won't have a table at all, so don't forget to use them at the beginning and the end.

<tr> </tr>

These tags open and close the rows of your table. You use <tr> to start your row, then you add anything you want in (including the columns which are described below) and then when you're done with each specific row you add the </tr> tag and then either start your next row or close your table.

<td> </td>

These tags are used to open and close your columns. You can have as many colums as you want in the table. Use the <td> tag to start a colum and then the </td> to end it. When you've added all of the colums you need the close the row with </tr>

So. How do you use tables for text? One of the things that every oen should remember when designing pages is that text running all the way from one end of the screen to the other is hard to read. Using a table to confine text (and anything else) to a certian width or percentage of the screen is a great way to make your pages easier to read.

lesson 1.1: using tables to confine text