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

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

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

Contents of Cell #1	Contents of Cell #2
Contents of Cell #3	Contents 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 #1	Contents of Cell #2
Contents of Cell #3	Contents 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 #1	Contents of Cell #2
Contents of Cell #3	Contents 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 #1	Contents of Cell #2
Contents of Cell #3	Contents of Cell #4

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

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 Cell	Second Cell		Third Cell
Fourth Cell			Fifth 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 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.

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.

Last Updated: