HTML and CSS —

Spanning Rows

As you're setting up your data table, you might find that you need to have a single column span a number of rows within the table. To do this, you'll use the rowspan attribute with the value of rows you want to span to the table header or table cell in question (see Example 4-9).

Example 4-9. Using rowspan to span two rows
<table width="90%" border="1" cellspacing="5" cellpadding="5" summary="This table
demonstrates rowspan">
<caption>Demonstrating rowspan</caption>
<tr>
<th rowspan="2">Header (spans 2 rows)</th>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<th>Header (no span)</th>
<td>data</td>
<td>data</td>
</tr>
</table>

Figure 4-10 shows the spanned header rows.

Figure 4-10. Spanning rows within table headers.

You can also span rows within table cells. If you wanted to make the second column span all three rows, you could do so by using the rowspan attribute in the appropriate table data cell (see Example 4-10).

Example 4-10. Spanning three rows in a table cell
<table width="90%" border="1" cellspacing="5" cellpadding="5" summary="This table
 demonstrates rowspan">
<caption>Demonstrating rowspan</caption>
<tr>
<th rowspan="2">Header (spans 2 rows)</th>
<td rowspan="3">data (spans 3 rows)</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<th>Header (no span)</th>
<td>data</td>
</tr>
</table>

You'll notice that I've removed any unnecessary table cells (see Figure 4-11).

Figure 4-11. Adding rowspan to a table cell.

Beware Overlapping Cells

If you don't remove the cells that are overlapped by a span, you'll end up with a big mess! So you've got to do just a bit of simple math and subtract the appropriate number of cells in relation to your table and row spanning. You know you've done your work properly when there's no additional whitespace or seemingly empty spaces within the table. If you do see any odd spaces, go back and rethink the table's structureyou'll quickly find your overlap and correct the overlap problems.