0
0
HTMLmarkup~5 mins

Cell merging in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Cell merging helps combine two or more table cells into one bigger cell. It makes tables easier to read and organize.

When you want a header to span across multiple columns in a table.
When you need to group related data under one label in a table.
When you want to create a table layout with cells that cover multiple rows or columns.
When you want to reduce repeated information in adjacent cells.
Syntax
HTML
<td colspan="number"> ... </td>
<td rowspan="number"> ... </td>
colspan merges cells horizontally (across columns).
rowspan merges cells vertically (down rows).
Examples
This cell covers two columns side by side.
HTML
<td colspan="2">Merged across 2 columns</td>
This cell covers three rows vertically.
HTML
<td rowspan="3">Merged down 3 rows</td>
A header cell that stretches across four columns.
HTML
<th colspan="4">Header spanning 4 columns</th>
Sample Program

This table shows how to merge cells horizontally and vertically. The header spans all three columns using colspan="3". The "Apples" cell merges two rows vertically with rowspan="2". The "Oranges" row merges two columns horizontally with colspan="2".

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cell Merging Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 80%;
      margin: 1rem auto;
      font-family: Arial, sans-serif;
    }
    th, td {
      border: 1px solid #333;
      padding: 0.75rem;
      text-align: center;
    }
    th {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <main>
    <h1 style="text-align:center;">Cell Merging in Tables</h1>
    <table aria-label="Example table showing cell merging">
      <thead>
        <tr>
          <th colspan="3">Monthly Sales Report</th>
        </tr>
        <tr>
          <th>Product</th>
          <th>January</th>
          <th>February</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">Apples</td>
          <td>120</td>
          <td>135</td>
        </tr>
        <tr>
          <td>130</td>
          <td>140</td>
        </tr>
        <tr>
          <td>Oranges</td>
          <td colspan="2">200 (combined sales)</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always make sure the total number of columns in each row matches the table structure after merging.

Use colspan for horizontal merging and rowspan for vertical merging.

Screen readers understand merged cells better when you use semantic tags like <th> for headers.

Summary

Cell merging combines multiple table cells into one bigger cell.

Use colspan to merge cells across columns.

Use rowspan to merge cells across rows.