Back to Home Page Back to Main HTML Page


ADVANCED TABLES


In this page, we'll learn two more modifiers of the <TABLE> tag, we'll discuss the COLSPAN and ROWSPAN modifiers of the <TD> and <TH> tags, and we'll see some of the less obvious uses of tables.

<TABLE> Revisited

We've discussed many of the modifiers of the <TABLE> tag in the Basic Tables page. These include: WIDTH; BORDER; BGCOLOR; and BORDERCOLOR. There is a method for more precisely controlling the appearance of your table, however - you can use the CELLPADDING and CELLSPACING modifiers.

Let's start with CELLPADDING. This is set to equal a number of pixels, and it describes how many pixels the table should add around the contents of the cell. For example, if your table had the opening tag

<TABLE WIDTH=100% BORDER=2 CELLPADDING=10>,
then every cell in that table would pad its contents by ten pixels. If a cell were filled with text, that text would be surrounded on all sides by ten pixels of space. If there were an image in the cell, there would be ten pixels between any side of the image and the cell's border. Cell padding is a way to make your cells look less cramped. Be warned, however, that these pixels can add up, and many cells with lots of cell padding means a wide table.

Cell padding is often confused with CELLSPACING. Cell spacing is also set to equal a number of pixels, but rather than describing the room between the contents of a cell and the borders of the cell (as in cell padding), cell spacing describes the room between a cell and its neighbor. For example, ifyour table had the opening tag

<TABLE WIDTH=100% BORDER=2 CELLSPACING=10>,
then every cell in that table would be separated from every other cell in that table by ten pixels. Again, be warned that these pixels can add up.

A couple of examples. First, a small table with neither CELLSPACING nor CELLPADDING set.
<TABLE WIDTH=70% BORDER=2>
Contents of Cell #1Contents of Cell #2
Contents of Cell #3Contents of Cell #4

Next, the same table, with CELLPADDING set to 20 and CELLSPACING set to 0:
<TABLE WIDTH=70% BORDER=2 CELLPADDING=20 CELLSPACING=0>
Contents of Cell #1Contents of Cell #2
Contents of Cell #3Contents of Cell #4

Next, the original table with CELLPADDING set back to 0, and CELLSPACING set to 20:
<TABLE WIDTH=70% BORDER=2 CELLPADDING=0 CELLSPACING=20>
Contents of Cell #1Contents of Cell #2
Contents of Cell #3Contents of Cell #4

Finally, the original table with both CELLPADDING set to 20, and CELLSPACING set to 20:
<TABLE WIDTH=70% BORDER=2 CELLPADDING=20 CELLSPACING=20>
Contents of Cell #1Contents of Cell #2
Contents of Cell #3Contents of Cell #4

Notice that this is starting to get pretty fluffy - lots of table and space, not too much content.

COLSPAN

Up until now, all of the cells in our tables have lined up with the other cells in our tables. In other words, if there are 4 cells in one row, the next row will also have four cells. COLSPAN gives us a way to change this - it allows us to make one cell span other cells. It's used as a modifier of either the TD or the TH tag - it makes the cell described by those tags wider than other cells in the table. We've seen the <CAPTION> tag do a similar thing - it makes one cell that spans the entire width of the table - if the table was four cells wide, the caption spread out to cover all of them. COLSPAN allows us a little more control.

Here's some sample HTML - it will generate a table with 5 different cells:
<TABLE WIDTH=100% BORDER=2>
<TR>
<TH>
First cell</TH>
<TH COLSPAN=2>
Second Cell</TH>
<TH>
Third Cell</TH>
</TR>
<TR>
<TH COLSPAN=3>
Fourth Cell</TH>
<TH>
Fifth Cell</TH>
</TR>
</TABLE>

And the resulting table:
First CellSecond CellThird Cell
Fourth CellFifth Cell

Does this make sense? If you count how many cells belong in each row, each row adds up to four. The first row has a single cell, a double cell, and a single cell - for a total of four cells. The second row has a triple cell and a single cell - again, totalling four. The confusing part is that the second row has a cell that says <TH COLSPAN=3>, and yet it only takes up as much space as the first and second cell in the row above it. The reason for this is simpler than it seems - the first and second cell in row #1 take up a total of three cells' worth of room (a single cell and a double cell) - which is exactly how much room we're asking the first cell in row #2 (a triple cell) to occupy.

ROWSPAN

ROWSPAN works on the same principle as COLSPAN, except that ROWSPAN is a little trickier to implement. It allows us to have one cell that spans many rows (as the name suggests). Where things get complicated is in figuring out which rows are being spanned - the placement of the <TR> and </TR> tags gets a little harder to understand. The best way to learn how this works is to experiment, but I'll try to give you some of the basics.

Here's a sample of some of the HTML code from the Main HTML Page of Steve's HTML Primer:
<TABLE WIDTH=100% BORDER=3>
<TR><TH ROWSPAN=3><FONT SIZE=5 COLOR=RED>
NON-TEXT VISUALS</FONT></TH>
<TD>
Placing and Organizing Images</TD></TR>
<TR><TD>
Understanding Color</TD></TR>
<TR><TD>
Advanced Color</TD></TR>
</TABLE>

And the resulting table:
NON-TEXT VISUALS Placing and Organizing Images
Understanding Color
Advanced Color

Pay attention to the placement of the <TR> and </TR> tags. The easy part it to see that we've ended each row with the </TR> tag. What's less easy to see is that we've still started each row with the <TR> tag. There's one before the "NON-TEXT VISUALS" cell, which will obviously make up the left-most cell in this table. The important thing to remember is that since we've placed the <TR> before the "NON-TEXT VISUALS" cell once, we don't need to repeat that cell every time it starts a row. In fact, that cell is going to start three rows, but we only mention it the first time - the COLSPAN=3 modifier tells your browser to assume that the next two rows also start with the "NON-TEXT VISUALS" cell. So we'll put the <TR> tag before the next cell in each of the next two rows. And that's it.

Obviously, this can get quite complicated very quickly - just remember to try to figure out what the ROWSPAN modifier is telling your browser, and you should be ok.

TABLE USES

There are a few ways to get things to line up in HTML pages. The easy method is to use lists. Sometimes, however, you have more than one column of things that you'd like to see lined up - when that happens, you're usually in good shape if you use tables. In this instance, you generally need to remember to set BORDER=0 (NOBORDER, in some browsers). This way, the data will be lined up in a table, but the table itself won't be visible to the user. In fact, many of the pages in this Primer have been created using invisible tables - see the Font Color page for an example.

Here's an example of how to line up images with text. Even though the images are different sizes, the text still lines up to the same "margin", since it's actually lining up to the left of an invisible cell:

A piano
A typewriter
A treble clef
A mailbox
Hobbes
A caduceus

The final point to make about tables is that a cell in a table can be thought of as a container for just about anything. The contents of a cell can be text, links, images, lists, or even other tables. Whatever you place in between the <TH> and </TH> tags (or <TD> and </TD>) will show up just as it would on any other part of an HTML page. Here are some examples:

Some sample table contents
Link to Main HTML Page of Steve's HTML Primer A sample image
This is just normal text that I'm placing into a table for demonstration purposes. It will fill the cell from left to right and then it will automatically wrap to the next line. This cell spans two columns (COLSPAN=2).
  • This is
  • an unordered
  • list.
  • This cell
  • spans two
  • rows -
  • I used
  • ROWSPAN=2.
  • Cool, huh?
A clickable image
A second, smaller table


The possibilities are limitless. Hopefully these tips are enough to get you started.



Back to Top of Page Back to Main HTML Page Back to Home Page

Last Updated: