HTML and CSS Reference
In-Depth Information
Figure 7-1.
Browser output of a table with a cell spanning two columns
As you can see, the first row contains a single cell whose
colspan
attribute is set to span two columns.
The second row still holds two cells, as does the third. Browsers, recognizing that the cell in the first row
should stretch across two columns, generally center content in spanned cells.
Introducing the
colspan
attribute into your table adds complexity to the design and layout of the table. In
the example shown here, that complication is minimal. But with larger data sets, and thus larger tables,
you can imagine how introducing multiple instances of spanned columns can complicate the markup.
We're certainly not trying to scare you away from using the
colspan
and
rowspan
attributes (we'll be
discussing the
rowspan
attribute next)-quite the opposite, in fact. What we want to impress upon you is
the importance of planning out a table structure ahead of time so that you can make the best possible
markup decisions.
The rowspan attribute
Similar in usage to the
colspan
attribute, the
rowspan
attribute accepts a positive integer as its value. The
higher the specified value, the more rows your cell will span. Listing 7-7 shows an example of the
rowspan
attribute in action.
Listing 7-7.
A table demonstrating usage of the
rowspan
attribute
<table>
<tr>
<td
rowspan="2"
>Utility Belts</td>
<td>New</td>
<td>9</td>
</tr>
<tr>
<td>Used</td>
<td>27</td>
</tr>
</table>
Looking at the markup, you see that the first row has three cells, the first of which is set to span two rows.
The second row, accordingly, has only two cells. Because the first cell of the first row spans its row and the
following row, we've included one fewer cell in the subsequent row. The browser understands that what
would have been the first cell in the second row is occupied by the first cell from the first row.
Figure 7-2 shows the output of this code with a background color added to the spanned cell for clarity. By
default, most browsers will vertically center cells that span multiple rows. This default presentation can be
changed easily using a touch of CSS. We'll be demonstrating techniques for this and more near the end of
this chapter.
