Lets give Ed a bigger cell since he's been here from the beginning.

<table border="3" width="300" height="75">
<tr>
<td width="80%">Ed</td>
<td width="20%">Tom</td>
</tr>
</table>

Now Rick is back and of course he wants his own cell. We need to decide how much of the row we will give him. I suppose 20% is fair. Make sure to adjust Ed's share also (so that they add up to 100%).

<table border="3" width="300" height="75">
<tr>
<td width="60%">Ed</td>
<td width="20%">Tom</td>
<td width="20%">Rick</td>
</tr>
</table>

Three yahoos from across the street see what's going on and they want to be in your table. I think we will give them their own row.

<table border="3" width="300" height="75">

<tr>
<td width="60%">Ed</td>
<td width="20%">Tom</td>
<td width="20%">Rick</td>
</tr>

<tr>
<td>Larry</td>
<td>Curly</td>
<td>Moe</td>
</tr>

</table>

Notice the width attributes in the first row carry over to the second row.

If Moe leaves, we still have a perfectly good table, it just has an empty spot.

<table border="3" width="300" height="75" >

<tr>
<td width="60%">Ed</td>
<td width="20%">Tom</td>
<td width="20%">Rick</td>
</tr>

<tr>
<td>Larry</td>
<td>Curly</td>
</tr>

</table>

What we may want to do, just to keep the browser from guessing, is to actually leave that empty cell there and just put a blank space in it ( ). Normally for a simple table this isn't necessary, however as your tables become more complex, the less guessing the browser has to to, the better off you'll be.

<table border="3" width="300" height="75" >

<tr>
<td width="60%">Ed</td>
<td width="20%">Tom</td>
<td width="20%">Rick</td>
</tr>

<tr>
<td>Larry</td>
<td>Curly</td>
<td>&nbsp;</td>
</tr>

</table>

Now let's back up a little. Remember when we learned about aligning stuff in a cell using align and valign? Well it's good to know that you can use those atributes in table rows too. All that does is simply apply the align/valign attribute accross all rows in a cell. Here is a quick example:

<table border="3" width="300" height="75" >

<tr align="right" valign="top">
<td width="60%">Ed</td>
<td width="20%">Tom</td>
<td width="20%">Rick</td>
</tr>

<tr align="center">
<td>Larry</td>
<td>Curly</td>
<td>&nbsp;</td>
</tr>

</table>

Let's put Moe back and remove all attributes except border.

<table border="3">

<tr>
<td>Ed</td>
<td>Tom</td>
<td>Rick</td>
</tr>

<tr>
<td>Larry</td>
<td>Curly</td>
<td>Moe</td>
</tr>

</table>

Table Tutor

Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Tables Quick Reference

HTML 4.0 Reference      Barebones HTML Guide