Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML rowspan Attribute

The rowspan attribute on a table cell element specifies the number of rows this cell should occupy, i.e. span.

Elements that accept this attribute are <td>, and <th>.

Example

#

A rowspan attribute on 2 td elements.
The country data cells span 2 and 3 rows respectively.

Firstname Lastname Country
Anna Samsong Sweden
Imgar Johanson
Stephanie James USA
Karen McNolen
Jamie Spiro
<style>
  table.tb { width: 350px; border-collapse: collapse; }
  .tb th { background-color:lightblue; }
  .tb th, .tb td { border: solid 1px #777; padding: 5px; }
</style>

<table class="tb">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Samsong</td>
    <td rowspan="2">Sweden</td>
  </tr>
    <tr>
    <td>Imgar</td>
    <td>Johanson</td>
  </tr>
  <tr>
    <td>Stephanie</td>
    <td>James</td>
    <td rowspan="3">USA</td>
  </tr>
    <td>Karen</td>
    <td>McNolen</td>
  </tr>
    </tr>
    <td>Jamie</td>
    <td>Spiro</td>
  </tr>
</table>

For additional details see our HTML td rowspan Reference.


Using rowspan

The rowspan attribute specifies the number of rows a table cell should span.

With rowspan="0", the cell will span until the last row of the table.


Syntax

<tagname rowspan="number">

Values

#

Value Description
number Number of rows a table cell will span.

Elements that accept rowspan

The following elements accept the rowspan attribute.

Elements Description
<td> Specifies a table data cell -- see example above
<th> Creates a table header cell.

<th> with rowspan

A rowspan attribute on 2 th elements.
The header cells span 2 and 3 rows respectively.

Name Anna
Paxton
Address 124 W 7th Street
Austin
Texas, 78702
<style>
  table.tbl { width: 350px; border-collapse: collapse; }
  .tbl th { background-color:lightblue; }
  .tbl th, .tbl td { border: solid 1px #777; padding: 5px; }
</style>

<table class="tbl">
  <tr>
    <th rowspan="2">Name</th>
    <td>Anna</td>
  </tr>
  <tr>
    <td>Paxton</td>
  </tr>
  <tr>
    <th rowspan="3">Address</th>
    <td>124 W 7th Street</td>
  </tr>
    <td>Austin</td>
  </tr>
    </tr>
    <td>Texas, 78702</td>
  </tr>
</table>

For additional details see our HTML th rowspan Reference.


Browser support

Here is when rowspan support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like




Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides