HTML Table Rowspan - Web4learners

The HTML rowspan attribute allows a table cell to span across two or more rows. It is useful when the same information applies to multiple rows or when you want to organize related data in a table.

You can use the rowspan attribute with the <td> and <th> elements. Its value specifies how many rows the cell should occupy.

In this tutorial, you will learn how to use HTML rowspan, merge table cells vertically, create grouped table layouts, and combine rowspan with CSS using practical examples.

What Is HTML Rowspan?

The rowspan attribute specifies the number of rows a table cell should span vertically. Instead of repeating the same information in multiple rows, you can create one cell that occupies several rows.

For example, you can use rowspan="2" to make a cell cover two rows.

<table>
  <tr>
    <th>Name</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td rowspan="2">Rahul</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
  </tr>
</table>

In this example, the Rahul cell spans two rows. The second row contains only the CSS cell because the name cell already occupies the first column.

HTML Rowspan Syntax

The rowspan attribute is written inside the opening tag of a <td> or <th> element.

The basic syntax is:

<td rowspan="number">Content</td>

You can also use it with a table header:

<th rowspan="number">Heading</th>

Replace number with the number of rows the cell should occupy.

For example, rowspan="3" makes the cell span three rows.

HTML Rowspan Example

The following example demonstrates how to create a table with a cell that spans multiple rows.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Rowspan Example</title>

  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #333;
      padding: 12px;
      text-align: center;
    }

    th {
      background-color: #0878d1;
      color: white;
    }
  </style>
</head>
<body>

  <h2>Student Subjects</h2>

  <table>
    <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>Marks</th>
    </tr>
    <tr>
      <td rowspan="2">Rahul</td>
      <td>HTML</td>
      <td>85</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Priya</td>
      <td>JavaScript</td>
      <td>92</td>
    </tr>
  </table>

</body>
</html>

In this example, Rahul’s name occupies two rows because the rowspan value is 2. The table displays two subjects and their marks for Rahul without repeating his name.

The CSS adds borders, padding, and a colored header to improve readability.

HTML Rowspan with Two Rows

To make a cell span two rows, set the rowspan attribute to 2.

<table>
  <tr>
    <th>Department</th>
    <th>Employee</th>
  </tr>
  <tr>
    <td rowspan="2">IT</td>
    <td>Rahul</td>
  </tr>
  <tr>
    <td>Priya</td>
  </tr>
</table>

The IT cell occupies two rows, grouping Rahul and Priya under the same department.

HTML Rowspan with Three Rows

You can set rowspan="3" when a cell needs to cover three rows.

<table>
  <tr>
    <th>Category</th>
    <th>Product</th>
  </tr>
  <tr>
    <td rowspan="3">Electronics</td>
    <td>Laptop</td>
  </tr>
  <tr>
    <td>Monitor</td>
  </tr>
  <tr>
    <td>Keyboard</td>
  </tr>
</table>

In this example, Electronics spans three rows and groups the laptop, monitor, and keyboard under one category.

HTML Rowspan with Table Headers

You can use rowspan with the <th> element to create a heading that extends vertically across multiple rows.

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <th>English</th>
    <th>Maths</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>85</td>
    <td>92</td>
  </tr>
</table>

Here, the Name header spans two rows, while the Marks header spans two columns. This creates a grouped heading structure for the table.

HTML Rowspan with Colspan

You can combine rowspan and colspan in the same table when you need both vertical and horizontal cell merging.

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Contact Details</th>
  </tr>
  <tr>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>rahul@example.com</td>
    <td>9876543210</td>
  </tr>
</table>

In this example, the Name heading spans two rows, while Contact Details spans two columns. Together, these attributes help organize related information under grouped headings.

HTML Rowspan for Employee Details

The rowspan attribute can group employees who belong to the same department.

<table>
  <tr>
    <th>Department</th>
    <th>Employee Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td rowspan="2">IT</td>
    <td>Rahul</td>
    <td>Developer</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>Tester</td>
  </tr>
  <tr>
    <td>HR</td>
    <td>Arjun</td>
    <td>Recruiter</td>
  </tr>
</table>

The IT cell spans two rows because two employees belong to that department. The HR department occupies one row.

This approach is useful for employee directories, departmental reports, and grouped data.

HTML Rowspan with CSS Styling

CSS can improve the appearance of tables that use rowspan.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }

  th {
    background-color: #0878d1;
    color: white;
  }

  td[rowspan] {
    background-color: #e8f2ff;
    font-weight: bold;
    vertical-align: middle;
  }
</style>

The td[rowspan] selector targets data cells that have a rowspan attribute. The background color highlights those cells, while vertical-align: middle centers their content vertically.

Difference Between Rowspan and Colspan

The rowspan and colspan attributes allow cells to occupy multiple positions in a table, but they work in different directions.

Feature	`rowspan`	`colspan`
Purpose	Spans multiple rows	Spans multiple columns
Direction	Vertical	Horizontal
Example	`rowspan="2"`	`colspan="2"`
Common use	Grouping rows by category	Grouping column headings

Use rowspan when a cell needs to extend vertically and colspan when it needs to extend horizontally.

Common HTML Rowspan Mistakes

Avoid these common mistakes when using the rowspan attribute:

Forgetting to specify the number of rows the cell should occupy.
Adding extra cells in rows where a spanning cell already occupies the corresponding position.
Using incorrect rowspan values that disrupt the table structure.
Confusing rowspan with colspan.
Merging cells unnecessarily, making the table difficult to understand.
Forgetting to test tables with complex merged cells for accessibility and mobile usability.

HTML Rowspan Best Practices

Follow these practices when creating tables with rowspan:

Use rowspan only when information genuinely applies to multiple rows.
Set the correct number of rows for each spanning cell.
Make sure each row contains only the cells needed for its remaining columns.
Use CSS to style merged cells instead of outdated HTML presentation attributes.
Use clear headings and logical table structures.
Keep complex tables simple whenever possible.
Test tables on different screen sizes to ensure the information remains readable.

HTML Rowspan Exercises

Practice the following exercises to improve your understanding of the rowspan attribute.

Exercise 1: Create a table where one name cell spans two rows.

Exercise 2: Create a department table where the IT department spans three employee rows.

Exercise 3: Use rowspan="3" to group three products under one category.

Exercise 4: Combine rowspan and colspan to create a table with grouped headings.

Exercise 5: Apply CSS to highlight cells with a rowspan attribute and vertically center their content.