HtmlHow-ToBeginner · 3 min read

How to Use Rowspan in HTML: Simple Guide with Examples

Use the rowspan attribute inside a <td> or <th> tag to make a cell span multiple rows vertically in an HTML table. Set rowspan to the number of rows the cell should cover.

📐

Syntax

The rowspan attribute is added to a table cell element (<td> or <th>) to make it span multiple rows vertically.

rowspan="number": The number of rows the cell should cover.

html

<table>
  <tr>
    <td rowspan="2">Cell with rowspan</td>
    <td>Cell 1</td>
  </tr>
  <tr>
    <td>Cell 2</td>
  </tr>
</table>

Output

A table with two rows where the first cell in the first column spans both rows vertically.

💻

Example

This example shows a table where the first cell in the first column spans three rows using rowspan="3". The other cells fill the remaining spaces.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rowspan Example</title>
  <style>
    table { border-collapse: collapse; width: 50%; }
    td, th { border: 1px solid #333; padding: 8px; text-align: center; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th rowspan="3">Name</th>
      <th>Day</th>
      <th>Task</th>
    </tr>
    <tr>
      <td>Monday</td>
      <td>Emails</td>
    </tr>
    <tr>
      <td>Tuesday</td>
      <td>Meeting</td>
    </tr>
  </table>
</body>
</html>

Output

A table with a 'Name' header cell spanning three rows vertically on the left, and two rows of day and task cells on the right.

⚠️

Common Pitfalls

Common mistakes when using rowspan include:

Not adjusting the number of cells in rows below the rowspan cell, causing layout issues.
Using a rowspan value larger than the number of remaining rows.
Forgetting that the rowspan cell occupies space in multiple rows, so those rows should have fewer cells accordingly.

html

<!-- Wrong: extra cell in second row causes misalignment -->
<table border="1">
  <tr>
    <td rowspan="2">Rowspan cell</td>
    <td>Cell 1</td>
  </tr>
  <tr>
    <td>Cell 2</td>
    <td>Extra cell</td> <!-- This extra cell breaks the layout -->
  </tr>
</table>

<!-- Correct: second row has only one cell because rowspan cell covers first column -->
<table border="1">
  <tr>
    <td rowspan="2">Rowspan cell</td>
    <td>Cell 1</td>
  </tr>
  <tr>
    <td>Cell 2</td>
  </tr>
</table>

Output

First table shows misaligned cells due to extra cell in second row; second table shows correct alignment with proper rowspan usage.

📊

Quick Reference

Attribute	Description	Example
rowspan	Number of rows a cell spans vertically		Spans 3 rows
Used on	Applies to	or		elements	Yes
Value type	Positive integer (1 or more)	rowspan="2"
Effect	Merges cells vertically in a column	Cell covers multiple rows

✅

Key Takeaways

Use the rowspan attribute inside or to make a cell span multiple rows vertically.

Set rowspan to the exact number of rows the cell should cover to avoid layout issues.

Adjust the number of cells in rows below the rowspan cell to keep the table structure correct.

Rowspan values must be positive integers and cannot exceed the number of remaining rows.

Test your table in a browser to ensure cells align as expected.