HTML rowspan Attribute

The HTML rowspan attribute specifies how many rows a table cell spans. It is used with <td> and <th> elements when one cell needs to extend vertically across two or more rows.

Elements That Use the rowspan Attribute

The rowspan attribute is used with the <td> and <th> elements.

Element	Description
`<td>`	Specifies the number of rows spanned by a table data cell.
`<th>`	Specifies the number of rows spanned by a table header cell.

rowspan Value

The rowspan attribute accepts a non-negative integer. A value greater than zero specifies the number of rows the cell spans. The value must not be greater than 65534.

<td rowspan="2">Web Design</td>

In this example, the table cell occupies its current row and the following row.

If rowspan is omitted or its value cannot be parsed as a valid supported value, the cell spans one row.

How rowspan Works

When a cell spans multiple rows, it occupies a cell position in each of those rows. The following rows therefore need fewer cells in the HTML because the spanning cell already occupies that part of the table.

<table>
  <tr>
    <th>Category</th>
    <th>Service</th>
  </tr>
  <tr>
    <td rowspan="2">Web</td>
    <td>Web Design</td>
  </tr>
  <tr>
    <td>Web Hosting</td>
  </tr>
</table>

The cell containing "Web" spans two rows. The second of those rows contains only the "Web Hosting" cell because the first column is already occupied by the spanning cell.

Using rowspan="0"

A rowspan value of 0 has a special meaning. It makes the cell span all remaining rows in the table row group containing that cell.

<tbody>
  <tr>
    <th rowspan="0">Web Services</th>
    <td>Web Design</td>
  </tr>
  <tr>
    <td>Web Hosting</td>
  </tr>
  <tr>
    <td>Domain Registration</td>
  </tr>
</tbody>

Here, the header cell extends from its starting row through the remaining rows of the same <tbody> row group.

Maintaining Table Structure

When using rowspan, account for the positions occupied by the spanning cell. Adding an extra cell to a later row where the spanning cell already occupies a position can create an incorrect or confusing table structure.

<tr>
  <td rowspan="2">Web</td>
  <td>Web Design</td>
</tr>
<tr>
  <td>Web Hosting</td>
</tr>

The second row contains one explicit cell because the first column continues to be occupied by the cell from the previous row.

rowspan and colspan

The rowspan and colspan attributes both allow table cells to occupy more than one position. The rowspan attribute extends a cell vertically across rows, while colspan extends a cell horizontally across columns.

<th rowspan="2">Category</th>
<th colspan="2">Services</th>

A table cell can use both attributes when it needs to span multiple rows and multiple columns.

Common Mistakes

Do not add replacement cells in rows already occupied by a cell using rowspan. The spanning cell continues to occupy its column position in those rows.

Do not use a negative value for rowspan. The attribute accepts a non-negative integer, with 0 having the special meaning of spanning the remaining rows in the row group.

Do not confuse rowspan with colspan. The rowspan attribute spans rows vertically, while colspan spans columns horizontally.

Do not use unnecessarily complex spanning arrangements when a simpler table structure can present the same information. Complicated tables can be more difficult for users and assistive technologies to understand.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The rowspan attribute is widely supported on both <td> and <th> table cells in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the rowspan Attribute

The example uses rowspan="2" to make the "Web Services" cell extend vertically across two table rows.

Play in Editor

Summary

The HTML rowspan attribute specifies how many rows a <td> or <th> table cell spans. Positive values specify the number of rows occupied by the cell, while rowspan="0" makes the cell span the remaining rows in its row group. When using rowspan, the surrounding table structure must account for every row position occupied by the spanning cell.