How to Merge Cells in HTML Tables

You can merge cells in an HTML table using the colspan attribute for horizontal merging and the rowspan attribute for vertical merging. You’ll probably also want to go past basic merging and learn about nested merges, grouping and spanning across the entire table. This post covers all this so keep reading to learn more.

What are colspan and rowspan in HTML?

Use the colspan attribute in a <td> or <th> tag to merge cells horizontally. The colspan value determines how many columns you should merge into a single cell. For vertical merging, apply the rowspan attribute, which specifies the number of rows to merge.

Horizontal merging with colspan

To span a header across three columns in a table, you can apply the colspan attribute like this:

<table border="1">
  <tr>
    <th colspan="3">Header Spanning 3 Columns</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Vertical merging with rowspan

If you need a row label to span two rows, use the rowspan attribute as shown below:

<table border="1">
  <tr>
    <td rowspan="2">Row Header</td>
    <td>Data 1</td>
  </tr>
  <tr>
    <td>Data 2</td>
  </tr>
</table>

Combining colspan and rowspan

For more complex table structures, combine both colspan and rowspan attributes:

<table border="1">
  <tr>
    <th colspan="2">Group Header</th>
    <th rowspan="2">Vertical Header</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

This example features a header spanning two columns and a vertical header spanning two rows, showcasing effective cell merging both horizontally and vertically.