Table Tutor - Lesson 6
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 |