PageTutor.com

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>
Ed Tom

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>
Ed Tom Rick

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>
Ed Tom Rick
Larry Curly Moe

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>
Ed Tom Rick
Larry Curly

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 (&nbsp;). 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>
Ed Tom Rick
Larry Curly  

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>
Ed Tom Rick
Larry Curly  

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>
Ed Tom Rick
Larry Curly Moe

So there you have the first few lessons of Table Tutor. Is there more? Of course there is. In the members area you'll learn much more about HTML tables and how to use them in your web page. You can use them as a layout tool, to add organization to your page, to display large amounts of data in an organized fashion. You'll learn more about borders, colors and positioning things within tables.

Yes indeed, there is a LOT more to making tables... you'll learn plenty. But you'll need to become a member first...

SIGN UP NOW  >>

<< BACK NEXT >>
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