HTML Table Merging Explained: A Guide to rowspan and colspan

calender-iconPublished: 25 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

RowSpan Attribute

The rowspan attribute in HTML is used to merge multiple rows in a table, allowing a single cell to extend across multiple rows. This attribute in can be used with <td> or <th> elements

The value of rowspan attribute should be an non-negative integer indicating how many rows the cell spans or extends. Its default value is 1. The maximum value is 65534. Any value greater than 65534 defaults to 65534 in such case. If the value is set to 0, the cell will extends to the end of the table.

Example: 

<table>
    <tr>
        <th rowspan="2">Brand</th>
        <th rowspan="2">Model</th>
        <th colspan="2">Sales</th>
    </tr>
    <tr>
        <th>2023</th>
        <th>2024</th>
    </tr>
    <tr>
        <td rowspan="2">Toyota</td>
        <td>Corolla</td>
        <td>150,000</td>
        <td>160,000</td>
    </tr>
    <tr>
        <td>Camry</td>
        <td>120,000</td>
        <td>125,000</td>
    </tr>
    <tr>
        <td rowspan="2">Ford</td>
        <td>F-150</td>
        <td>200,000</td>
        <td>210,000</td>
    </tr>
    <tr>
        <td>Mustang</td>
        <td>90,000</td>
        <td>95,000</td>
    </tr>
</table>
Output:
Brand Model Sales
2023 2024
Toyota Corolla 150,000 160,000
Camry 120,000 125,000
Ford F-150 200,000 210,000
Mustang 90,000 95,000

Colspan Attribute

The colspan attribute in HTML is used to merge multiple columns in a table, allowing a single cell to extend across multiple columns. This attribute in can be used with <td> or <th> elements

The value of colspan attribute should be an non-negative integer indicating how many columns the cell spans or extends. Its default value is 1. Any value greater than 1000 is dismissed by browsers and defaults to 1 in such case.

Example: 

<table>
  <thead>
    <tr>
        <th>Fruit</td>
        <th>Price</td>
        <th>Quantity</td>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
  </tbody> 
  <tfoot>
    <tr>
        <td>Total Cost</td>
        <td colspan="2">$100</td>
        
    </tr>
  </tfoot>   
</table>
Output:
Fruit Price Quantity
Apple $1 50
Banana $0.5 100
Total Cost $100


Using rowspan and colspan together

On different Cells

You can use rowspan and colspan together in HTML to merge cells both vertically and horizontally within a single table. This is useful for creating complex table layouts like reports, calendars, or dashboards.

Example: 

<table border="1" cellpadding="8">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Contact Info</th>
  </tr>
  <tr>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>alice@example.com</td>
    <td>123-456-7890</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>bob@example.com</td>
    <td>987-654-3210</td>
  </tr>
</table>
Output:
Name Contact Info
Email Phone
Alice alice@example.com 123-456-7890
Bob bob@example.com 987-654-3210


On Same Cell

Yes, you can apply both rowspan and colspan to the same td or th element in HTML when you want a single cell to span multiple rows and columns simultaneously.

Example: 

<table>
  <tr>
    <th rowspan="2" colspan="2">Header</th>
    <th>Q1</th>
  </tr>
  <tr>
    <th>Q2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>
Output:
Header Q1
Q2
Data 1 Data 2 Data 3

Frequently Asked Questions (FAQ)

How do you merge rows in HTML?
To merge rows in HTML, you use the rowspan attribute within a <td> or <th> element inside a table. This tells the browser that a cell should span multiple rows vertically.

Example: This merges the current cell with the one below it, covering 2 rows. 


<td rowspan="2">Merged Cell</td>

How to use rowspan and colspan together in html?
Yes, you can apply both rowspan and colspan to the same td or th element in HTML when you want a single cell to span multiple rows and columns simultaneously. Example: 

<table>
  <tr>
    <th rowspan="2" colspan="2">Header</th>
    <th>Q1</th>
  </tr>
  <tr>
    <th>Q2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>