HTML rowspan Attribute

HTML rowspan Attribute: This attribute defines the number of rows a cell should span. If a row spans two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span the height of more than one cell or row. It provides the same functionality as “merge cell” in a spreadsheet program like Excel.



HTML rowspan Attribute

This attribute can be applied on <td>,<th> elements.

Usage: It can be used with <td> and <th> element in an HTML Table.

<td>: The rowspan attribute when used with <td> tag determines the number of standard cells it should span.

Syntax: <td rowspan=”number”>

Browser Support

This attribute is supported by the following browsers:

  • Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Example: for <th> element

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Book name</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>C</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>JAVA</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

Output:

HTML rowspan attribute

Example: for <td> element

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th rowspan="3">Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

Output:

HTML rowspanning attribute