Skip to content
Related Articles

Related Articles

How to merge table cells in HTML ?

Improve Article
Save Article
  • Last Updated : 20 Dec, 2020
Improve Article
Save Article

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>


Output:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!