HTML rowspan Attribute

Introduction

The rowspan attribute lets a single table cell span multiple rows vertically. Use it on <td> or <th> when one label or value should cover several rows — like a category name beside multiple data rows, or a sidebar header in a timetable. Set a positive integer (e.g. rowspan="2"), then omit the matching cell in the rows below. In JavaScript, use cell.rowSpan (capital S). Not the same as rows on <textarea>.

What You’ll Learn

Purpose of rowspan Attribute

The primary purpose of rowspan is to control the vertical layout of tables by letting one cell cover multiple rows. This helps group related data under a single label and reduces repeated text in the first column.

For example, a product table might list three sizes under one “T-Shirt” cell with rowspan="3", instead of writing “T-Shirt” three times.

📝 Syntax

Add rowspan to a <td> or <th> with a positive integer:

<td rowspan="2">Spans two rows</td>
<th rowspan="3">Category</th>

Syntax Rules

• Valid on <td> and <th> inside a <table>.
• Value must be a positive integer ≥ 1.
• A spanned cell occupies multiple row slots — skip cells in that column on following rows.
• Each row’s effective column count must stay consistent across the table.
• Default is rowspan="1" (single row, no merge).
• JavaScript: cellElement.rowSpan = 3 (capital S).
• Not valid on <textarea> — use rows for textarea height.

💎 Values

The rowspan attribute accepts a positive integer — the number of rows the cell should span:

• rowspan="1" — Default; single row (no merge).
• rowspan="2" — Cell covers two adjacent rows.
• rowspan="3" — Common for category labels spanning three data rows.

<tr>
  <th rowspan="3">Electronics</th>
  <td>Phone</td>
  <td>$499</td>
</tr>
<tr>
  <!-- no cell in column 1 — covered by rowspan -->
  <td>Tablet</td>
  <td>$299</td>
</tr>
<tr>
  <td>Laptop</td>
  <td>$899</td>
</tr>

How it Works

With rowspan="3", the first cell stretches down three rows. Rows 2 and 3 omit a cell in that column because the slot is already taken.

Applicable Elements

rowspan vs colspan vs rows

Examples Gallery

Basic vertical cell merge, dynamic rowSpan in JavaScript, and combining rowspan with colspan.

<table border="1">
  <tr>
    <td>Row 1, Cell 1</td>
    <td rowspan="2">Row 1–2, Cell 2 (rowspan=2)</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 3</td>
  </tr>
  <tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
    <td>Row 3, Cell 3</td>
  </tr>
</table>

<td id="dynamicCell">Spans 3 rows</td>

<script>
  document.getElementById("dynamicCell").rowSpan = 3;
</script>

<table border="1">
  <tr>
    <th rowspan="2" colspan="2">Sales Report</th>
    <th>Q1</th>
    <th>Q2</th>
  </tr>
  <tr>
    <th>Jan–Mar</th>
    <th>Apr–Jun</th>
  </tr>
  <tr>
    <td>North</td>
    <td>East</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

♿ Accessibility

• Use proper headers — Pair merged header cells with scope="rowgroup" or scope="row" where appropriate.
• Keep structure logical — Screen readers rely on consistent row and column relationships.
• Do not over-merge — Excessive rowspan can confuse assistive technology and sighted users.
• Caption your table — Use <caption> to describe the table purpose.
• Test with screen readers — Verify merged cells still announce correct header associations.

💡 Best Practices