How to merge table cells in HTML ?

Last Updated : 20 Dec, 2020

The purpose of this article is to merge table cells in HTML. It can be done by using the rowspan and colspan attribute in HTML. The rowspan is used to merge or combine the number of cells in a row whereas the colspan is used to merge column cells in a table.

Example 1: In this example, we will merge two table row and make a single row.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 6px;
        }
    </style>
</head>
  
<body style="text-align:center">
  
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h2>How to merge table cells in HTML?</h2>
  
    <table align="center">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Akku</td>
  
            <!-- This cell will take up
                space on two rows -->
            <td rowspan="2">44</td>
        </tr>
        <tr>
            <td>fahad</td>
        </tr>
    </table>
</body>
  
</html>

Output:

Example 2: In this example, we will merge two table column and make a single column.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 6px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            How to merge table 
            cells in HTML?
        </h2>
          
        <table>
            <tr>
                <th>Name</tMh>
                <th>Marks</th>
            </tr>
            <tr>
                <td>Aman</td>
                <td>10</td>
            </tr>
            <tr>
                <td>riya</td>
                <td>18</td>
            </tr>
            <!-- The last row -->
  
            <tr>
                <!-- This td will span two 
                    columns, that is a 
                    single column will take 
                    up the space of 2 -->
                <td colspan="2">Sum: 28</td>
            </tr>
        </table>
    </center>
</body>
  
</html>