rowspan (HTML attribute)

Spec
Depr. Version
No HTML 3.2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Partial Full Partial Full Partial

Syntax

rowspan="number"

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.

Figure 1. A th element spanning 3 rows A th element spanning 3 rows

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".

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>

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

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Partial Partial Partial Partial Full Full Full Full Full Partial Partial Partial Partial Full Full Full Partial

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.

Related Products