How to Merge Table Cells in HTML

Use colspan or rowspan when you want one table cell to stretch across multiple columns or rows. This helps you build cleaner table layouts for grouped headings, schedules, and summary rows.

What you’ll build or solve

You’ll learn how to merge table cells in HTML by making one cell span across more than one column or row. You’ll also know how to keep the table structure aligned after the merge.

When this approach works best

This approach is the right choice when some table content needs to cover multiple cells in the grid.

Common real-world scenarios include:

• Table headings that cover several columns
• Schedule cells that span multiple time slots
• Summary rows such as totals
• Category labels that group several rows

This is a bad idea when every row and column follows the same simple structure. In that case, a normal table is easier to read and maintain.

Prerequisites

You only need:

• A basic HTML table
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add colspan or rowspan to the cell you want to merge

Use colspan when one cell should stretch across multiple columns.

<table>
  <tr>
    <th colspan="2">Contact Info</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>ana@example.com</td>
  </tr>
</table>

Use rowspan when one cell should stretch across multiple rows.

<table>
  <tr>
    <th>Name</th>
    <th>Task</th>
  </tr>
  <tr>
    <td rowspan="2">Ana</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
  </tr>
</table>

What to look for:

• colspan="2" makes one cell cover two columns
• rowspan="2" makes one cell cover two rows
• Remove the extra cell in the row or column being covered
• Use colspan for wider cells and rowspan for taller cells
• Keep the grid balanced after the merge

Examples you can copy

Merged heading across two columns

<table>
  <tr>
    <th colspan="2">Pricing Plans</th>
  </tr>
  <tr>
    <td>Basic</td>
    <td>$9</td>
  </tr>
</table>

Total row across multiple columns

<table>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td colspan="2">Total: $29</td>
  </tr>
</table>

One label across two rows

<table>
  <tr>
    <th>Name</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td rowspan="2">Mark</td>
    <td>Math</td>
  </tr>
  <tr>
    <td>Science</td>
  </tr>
</table>

Common mistakes and how to fix them

Mistake 1: Forgetting to remove the covered cell

What the reader might do:

<table>
  <tr>
    <th colspan="2">Contact Info</th>
    <th>Extra</th>
  </tr>
</table>

Why it breaks: the merged cell already covers two columns, so the extra cell creates too many columns in the row.

Corrected approach:

<table>
  <tr>
    <th colspan="2">Contact Info</th>
  </tr>
</table>

Mistake 2: Using rowspan but keeping the duplicate cell below

What the reader might do:

<table>
  <tr>
    <td rowspan="2">Ana</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>Ana</td>
    <td>CSS</td>
  </tr>
</table>

Why it breaks: the top cell already covers the next row, so adding the same cell again throws off the table structure.

Corrected approach:

<table>
  <tr>
    <td rowspan="2">Ana</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
  </tr>
</table>

Mistake 3: Using the wrong span value

What the reader might do:

<th colspan="3">Pricing</th>

Why it breaks: if the table only has two columns in that section, the cell spans too far and the layout becomes uneven.

Corrected approach:

<th colspan="2">Pricing</th>

Use a span value that matches the number of columns or rows you actually want to merge.

Troubleshooting

If the table looks misaligned, check whether you forgot to remove a covered <td> or <th>.

If a merged heading stretches too far, reduce the colspan value.

If a cell overlaps the wrong rows, check the rowspan number and the rows below it.

If the table becomes hard to follow, simplify the structure and use fewer merged cells.

Quick recap

• Use colspan to merge cells across columns
• Use rowspan to merge cells across rows
• Remove the extra covered cells after merging
• Match the span value to the grid you want
• Keep the table structure balanced and easy to scan