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 ( ). 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> </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> </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 |
Table Tutor |
|
Tables Quick Reference |
HTML 4.0 Reference Barebones HTML Guide |
![]() |