COLSPAN and ROWSPAN

Now that you have an understanding of basic table construction, let's move on to slightly more complicated tables.

A TH or TD cell of a table may span more than one column or row. Here's an example of what I mean:

<table border="1">
<tr>
<th colspan="2">Weeds</th>
<th colspan="2">Plants</th>
</tr>
<tr>
<th>Pretty</th>
<th>Ugly</th>
<th>Pretty</th>
<th>Ugly</th>
</tr>
<tr>
<td>Queen Anne's Lace</td>
<td>Crabgrass</td>
<td>Rose</td>
<td>Pitcher Plant</td>
</tr>
<tr>
<td>Forget-Me-Nots</td>
<td>Stinkweed</td>
<td>Crysanthemum</td>
<td>Cactus</td>
</tr>
</table>

Displayed:

Example:

<table border="1">
<tr>
<th rowspan="2">Reds</th>
<td>Pink</td>
<td>Magenta</td>
</tr>
<tr>
<td>Scarlet</td>
<td>Puce</td>
</tr>
<tr>
<th rowspan="2">Blues</th>
<td>Pale Blue</td>
<td>Cornflower</td>
</tr>
<tr>
<td>Turquoise</td>
<td>Navy</td>
</tr>
</table>

Displayed:

You can see that the cells denoting "Weeds" vs. "Plants" span two columns each, and that the cells denoting "Reds" vs. "Blues" span two rows each. Any TH or TD cell may span columns or rows; a given cell may, in fact, span both columns AND rows simultaneously, if desired. Here's another example:

<table border="1">
<tr>
<th colspan="2" rowspan="2"><img src="./graphics/capitalA.gif" width="54" height="54" /></th>
<td>Oof</td>
<td rowspan="2">Boo</td>
</tr>
<tr>
<td>Iddle</td>
</tr>
<tr>
<td>Sip</td>
<td>Grip</td>
<td colspan="2">Rumpleteezer</td>
</tr>
</table>

Displayed:

		Oof	Boo
		Iddle
Sip	Grip	Rumpleteezer

As you can see, very complex layouts become possible when cells span multiple rows or columns. A TH or TD cell may span multiple columns using the COLSPAN attribute, or multiple rows using the ROWSPAN attribute.

Tag: TH, TD
Attribute: COLSPAN
Values: positive integers representing the number of columns to be spanned by a cell.
Description: COLSPAN causes a TH or TD cell to span multiple columns of cells.
Example: <td colspan="2">This cell spans two columns</td>

Tag: TH, TD
Attribute: ROWSPAN
Values: positive integers representing the number of rows to be spanned by a cell.
Description: ROWSPAN causes a TH or TD cell to span multiple rows of cells.
Example: <td rowspan="2">This cell spans two rows</td>

To demonstrate COLSPAN and ROWSPAN, let's create a table utilizing these two attributes. Here's what it's going to look like when we're finished:

Example:

<table border="1" width="500">
<tr>
<th colspan="3">This cell spans three columns</th>
<th rowspan="2">This cell spans two rows</th>
</tr>
<tr>
<td>Blah</td>
<td>Blooble</td>
<td rowspan="2">This other cell spans two rows</td>
</tr>
<tr>
<th colspan="2">This cell spans two columns</th>
<th>Gobble</th>
</tr>
</table>

Displayed:

In a table this complex, it may seem more difficult to figure out where a particular cell is supposed to be coded, since cells may reside in more than one row; it's really not as confusing as it looks. Remember: the row where the upper left-hand corner of a cell resides is the row into which you would code that particular cell. Always look to the upper left hand corner of a cell, and you'll never have trouble deciding into which row you need to place a particular cell.

Using the BGCOLOR attribute, I have set the background color of the TH and TD cells in this revised version of the table, to make the relationships between cells and rows clearer. The cells in the first row have been colored blue, the cells in the second row have been colored red, and the cells in the third row have been colored yellow.

Example:

<table border="1" width="500">
<tr>
<th colspan="3" bgcolor="#9999FF">This cell spans three columns</th>
<th rowspan="2" bgcolor="#9999FF">This cell spans two rows</th>
</tr>
<tr>
<td bgcolor="#FF9999">Blah</td>
<td bgcolor="#FF9999">Blooble</td>
<td rowspan="2" bgcolor="#FF9999">This other cell spans two rows</td>
</tr>
<tr>
<th colspan="2" bgcolor="#FFFF99">This cell spans two columns</th>
<th bgcolor="#FFFF99">Gobble</th>
</tr>
</table>

Displayed:

Tag: TH, TD
Attribute: BGCOLOR
Value: Any named color or hex code color
Description: Sets the background color for a given cell of a table; useful for creating GIF-less designs in navigation bars, etc.
Example: <th bgcolor="#CCFFCC">Stuff in Cell</th>

To clarify the structure even further, I have taken a screen shot of this table, and cut it up into its essential grid structure:

As you can see, this table is REALLY built on a 4X3 grid (4 cells/columns wide, 3 rows tall), making 12 total cells. SOME of these cells, however, use COLSPAN or ROWSPAN attributes in order to take the place of their neighbor cells in the table. With this particular table, we end up with only 7 cells because of the COLSPAN and ROWSPAN attributes: 2 cells in the first row, 3 cells in the second row, and 2 cells in the third row.

Now, let's create the above table, in a Step-by-Step progression; I strongly urge you to follow along, typing up this table with me. Pause the RealAudio vocal playback, as needed.

Step Zero: Design the table (done)

Step One: Lay in the TABLE tag

Example:

<table>

</table>

Step Two: Lay in all the TR tags.

Example:

<table>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
</table>

Step Three: Create appropriate number of cells in each row.

Create the cells first; we'll fill in the content and set the necessary attributes later. Remember: You're not going to be able to review the table as you lay it out; rather, you're going to have to finish your code FIRST, then make corrections afterwards.

As mentioned above, there are two cells in the first row, three cells in the second row, and two cells in the third row. As may be implied from the picture, the first row cells are all TH, the second row cells are all TD, and the third row cells are all TH. How can we tell this? Because all the text in the first and third rows is BOLD and center aligned, whereas the text in the second row is NORMAL and left aligned.

Example:

<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<th></th>
</tr>
</table>

Step Four: Add appropriate content to cells.

Example:

<table>
<tr>
<th>This cell spans three columns</th>
<th>This cell spans two rows</th>
</tr>
<tr>
<td>Blah</td>
<td>Blooble</td>
<td>This other cell spans two rows</td>
</tr>
<tr>
<th>This cell spans two columns</th>
<th>Gobble</th>
</tr>
</table>

Step Five: Add necessary attributes to cells, particularly COLSPAN and ROWSPAN (where appropriate).

Also add BORDER="1" and WIDTH="500" to the TABLE tag, so that the table will have visible borders and a fixed width.

Example:

<table border="1" width="500">
<tr>
<th colspan="3">This cell spans three columns</th>
<th rowspan="2">This cell spans two rows</th>
</tr>
<tr>
<td>Blah</td>
<td>Blooble</td>
<td rowspan="2">This other cell spans two rows</td>
</tr>
<tr>
<th colspan="2">This cell spans two columns</th>
<th>Gobble</th>
</tr>
</table>

Step Six: The structure is finished. Now, test the table in the browser. Make corrections, if needed.

Table Displayed:

Step Seven: Add additional appearance attributes, such as BGCOLOR (if desired)

Example:

<table border="1" width="500">
<tr>
<th colspan="3" bgcolor="#9999FF">This cell spans three columns</th>
<th rowspan="2" bgcolor="#9999FF">This cell spans two rows</th>
</tr>
<tr>
<td bgcolor="#FF9999">Blah</td>
<td bgcolor="#FF9999">Blooble</td>
<td rowspan="2" bgcolor="#FF9999">This other cell spans two rows</td>
</tr>
<tr>
<th colspan="2" bgcolor="#FFFF99">This cell spans two columns</th>
<th bgcolor="#FFFF99">Gobble</th>
</tr>
</table>

Displayed:

Main Menu

Copyright © 2001 Michael Masumoto. All Rights Reserved.