rowspan (HTML attribute)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Partial | Full | Partial | Full |
| Depr. | Version |
|---|---|
| No | HTML 3.2 |
Example
Some of the employees in this example work on the same floor of the building, so this information is shared across the appropriate rows:
<table border="1">
<tr>
<th colspan="4" scope="col">Work Contact Points</th>
</tr>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Floor/Block</th>
</tr>
⋮
<tr>
<td>Bill</td>
<td>bill@megacorp.com</td>
<td>345678</td>
<th rowspan="3">3/C</th>
</tr>
<tr>
<td>Jane</td>
<td>jane@megacorp.com</td>
<td>777444</td>
missing cell taken up by th with rowspan
</tr>
<tr>
<td>Alison</td>
<td>alison@megacorp</td>
<td>888652</td>
missing cell taken up by th with rowspan
</tr>
</table>
Description
Where information may be
relevant to multiple rows in the table, the cell
containing that information can be set to span those rows using the
rowspan attribute. In the HTML example shown, we
have three employees who all work on the same floor. Rather than repeat
the floor details three times over, that information can be output just
once, but made to span the three rows relating to those people, as shown
in Figure 1.
When you’re introducing a
rowspan attribute, take care to ensure that every
row adds up to same number of cells. Some tables can become quite
complicated, with a mixture of colspan and
rowspan attributes. Tables like this can be quite
tricky to hand-code, particularly for newcomers, and if you bungle your
calculations, your table may either contain overlapping cells, or gaps
where content should appear. Some people may prefer to use a WYSIWYG
editor, such as Dreamweaver, MS Expression, or something similar, which
will allow you to merge and unmerge cells very easily, and will take care
of these attributes for you. However, if you use such a package, pay
attention—unless you’re using quite a recent web editor, it may inject
some extra unnecessary markup into your table.
Note that when you’re
using the rowspan attribute, you can’t span a cell
beyond the boundary of its containing rowgroup (namely the thead, tfoot, or tbody elements). So, if the
thead comprises five rows, the
rowspan of a cell that’s defined in the first row
can’t have a value that’s greater than
"5".
Value
This attribute takes as its value a
number that should equal the number of rows that the spanned
th cell needs to cover. There is also a special value
of "0", which should tell the browser to span the cell
to the end of all rows inside the current rowgroup (that is, the thead, tfoot, or tbody).
Compatibility
| IE | 5.5 | Partial |
|---|---|---|
| 6.0 | Partial | |
| 7.0 | Partial | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Partial |
| 2.0 | Partial | |
| 3.0 | Partial | |
| Opera | 9.2 | Full |
Browser support for
rowspan is generally good, with one
exception—rendering rowspan="0". Firefox and Opera are
the only browsers tested that correctly span the cell to which this
attribute is applied across all subsequent rows; the other browsers tested
render the cell in the first row only.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
