Love tables yet? You will. This week we're going to go over ways to spice up your table and complicate your life. Got the basics down? Cool.
You're already familiar with the align tag. It's an old friend. You put it in <img> and <p> tags. But you can also use it in a table — anywhere. Let's take a look:
<td align=right> aligns anything you put in that cell (text, images, etc.) to the right.
<tr align=right> aligns everything you put in all the cells of that row to the right.
<table align=right> aligns the whole table to the right and flows text around it - it works just like aligning an image. But be warned: Aligning whole tables only works in Netscape 3.0 and Explorer 2.0+.
The values for aligning an entire table are:
align=right pushes everything against the right side.
align=left pushes everything against the left side. (This is the default setting, so you probably won't ever need it.)
align=center centers everything in the middle.
But wait, there's more! We can also line stuff up vertically, pushing it toward the top, bottom, or middle of the cells. We do this with valign:
<td valign=top> aligns anything you put in that cell (text, images, etc.) at the top.
<tr valign=top> aligns anything you put in all the cells of that row with the top.
The values for vertical alignment are:
valign=top pushes everything to the top of the cell.
valign=bottom pushes everything to the bottom of the cell.
valign=middle centers everything in the middle vertically. (This is the default, so you probably won't ever need to do it.)
(An aside: Why do we align=center but valign=middle? Well, actually, you can use either term in either situation, but this is the way they're listed in Netscape's documentation. [More proof that Netscape's on crack.])
Just a little space
Now that you've got your table all aligned, you may want to adjust the spacing of the cells. Here are two tags that do really similar things that you'll probably mix up a lot: cellspacing and cellpadding.
They both put a little space between the cells of your table, but they do it in different ways. cellspacing makes the border of the table fatter, increasing the distance between cells. cellpadding adds invisible space inside the border of the cells, which pushes the cell's contents away from the border on all four sides.
If you're planning on leaving the table borders off, it really doesn't matter which you use. But if you're going to leave the borders on (or add color to your table cells) the difference between the two tags will become very important. Just remember: Spacing increases the size of the border, and padding increases the space around the border.
Now that you've got tables down cold, here are some tips and tricks that might come in handy:
