Practical Web Design - Introduction to Tables, Part 1

Aligning Your Cell Contents

You also notice that the text in the center row automatically aligns itself to the left side of the cell. That's the default. Let's change it using the align attribute. Try it with the cell just to the left of the "Abra Cadabra" cell:

<TD align="center">Bleah!</TD>

Now the word is centered in the cell. Want every word in that row center aligned? Instead of painstakingly aligning each cell's content, just add the attribute to the row instead:

<TR align="center">

It looks the same as before, but trust me, if and when the contents of the rest of that row's cells get some space to play with, they'll all center themselves instead of defaulting to the left.

There's also the VALIGN attribute, which looks very similar, but acts quite differently. For one, it's an attribute that works with an entire table (i.e. the <TABLE> tags), not the rows or cells. The default is to place the information in the center, with equal space above and below. Most people learn to lean heavily on the <TABLE valign="top"> attribute, which forces the content to align itself vertically from the top. If you have two vertical columns of content that contain unequal amounts of content, you don't want the "shorter" column to have its content shoved down into the center of the column, leaving an unsightly empty space at the top. Force the content to the top with the VALIGN attribute, and let the bottom of the column have the empty space.

Cellpadding and Cellspacing

Let's go back to our nonsense table. We might want to give the content in those cells room to breathe -- in other words, set it off with some whitespace so that it doesn't appear constricted by the table borders. Use the CELLPADDING attribute to give your content some elbow room. Try this in your <TABLE> tag:

<TABLE cellpadding="5">

Ahhh, room to breathe! Feel free to play with the padding value to give yourself as much or as little room in the cells as you like, but remember that the padding works indiscriminately -- in other words, you can't align one cell's content against the left border while using a pad, because the pad won't give way.

Now, let's add some space between the cells themselves, using the CELLSPACING attribute:

<TABLE cellpadding="5" cellspacing="5">

Notice how the border itself gets larger? This gives a different appearance than does using the BORDER attribute to make the border larger, and provides whitespace even when the BORDER attribute is set to 0.

COLSPAN and ROWSPAN

Okay so far? Good, now let's get messy. So far we've created a group of identical cells that trundle along the page one after another with no variance. This is all well and good, but we can do more. Meet the COLSPAN and ROWSPAN attributes. These are fairly obvious -- they cause cells to "span," or stretch across, a column or a row.

Let's add a COLSPAN attribute to the first <TD> line of our nonsense table:

<TD colspan="2">Bleah!</TD>

Well, that threw things into a tizzy. Your first cell "spans," or stretches over, the first two cells in the second row, and everything else moves to accommodate the stretched cell. One poor fellow is stranded alone, in a column by itself. Essentially, what you've done is made one cell occupy the space of two cells, so the table treats it as if it were two cells.

Let's add the COLSPAN attribute to the other rows to compensate, and see if we can tidy things up a bit:

<TABLE border="1" cellpadding="5" cellspacing="5">  
 <TR>  
   <TD colspan="2">Bleah!</TD>  
   <TD>Bleah!</TD>  
   <TD>Bleah!</TD>  
   <TD>Bleah!</TD>  
   <TD>Bleah!</TD>  
 </TR>  
 <TR>  
   <TD>Bleah!</TD>  
   <TD colspan="2">Bleah!</TD>  
   <TD>Bleah!</TD>  
   <TD>Bleah!</TD>  
   <TD>Bleah!</TD>  
 </TR>  
 <TR>  
   <TD>Bleah!</TD>  
   <TD>Bleah!</TD>  
   <TD colspan="2">Bleah!</TD>  
   <TD>Bleah!</TD>  
   <TD>Bleah!</TD>  
 </TR>  
<TABLE>

Well, that's a bit more symmetrical. See how they position themselves?

Now, let's see what happens with the ROWSPAN attribute. Get rid of all the COLSPAN attributes and change the first <TD> line to read:

<TD rowspan="2">Bleah!</TD>

As you might have expected, the first cell stretches downward two rows, and everything else shifts to compensate... once again, leaving a single cell stranded.

Take some time to experiment with the two attributes, singly and in combinations. You can make one heck of a mess of your table, but you can also get a feel for how they work.

Coloring Your Tables

It's quite simple to add color to your table structure. You can color the table border itself, or add color to the cells.

Color the border itself with the BORDERCOLOR attribute:

<TABLE border="1" cellpadding="5" cellspacing="5" bordercolor="#ff00ff">

This turns the lines of the border a nice... magenta? Change the thickness of the border to give the entire table a thicker frame:

<TABLE border="5" cellpadding="5" cellspacing="5" bordercolor="#ff00ff">

Use the familiar BGCOLOR attribute in your cells to change the color of the cells themselves:

<TD bgcolor="#3366ff">Bleah!</TD>

Experiment with different color combinations to see what appeals.

You can also use the BACKGROUND attribute to put a background image in your table, either in your entire table:

<TABLE border="5" cellpadding="5" cellspacing="5" background="image.gif">

or in a specific cell:

<TD background="image.gif">Bleah!</TD>

One neat use of a table, as suggested by Lissa, is to frame a graphic with a colored border:

<TABLE border="5" bordercolor="9966ff">  
<TR>  
<TD>  
<IMG SRC="image.gif" width="100" height="100" alt="image">  
</TD>  
</TR>  
</TABLE>

You can even use two tables, one inside the other, to make a double border:

<TABLE border="5" bordercolor="00ff00">  
<TR>  
<TD>  
<TABLE border="5" bordercolor="9966ff">  
<TR>  
<TD>  
<IMG SRC="image.gif" width="100" height="100" alt="image">  
</TD>  
</TR>  
</TABLE>  
</TD>  
</TR>  
</TABLE>

See how the interior table fits inside a single cell of the outer table? This is one example of "nesting" tables. In this example, the nested, or interior, table is just used to provide a border, but using nested tables one inside of the other is a terrific way to handle more complex page layouts. And, speaking of page layouts...