How to merge table cells in HTML?

HTML Web Development Front End Technology

We use the colspan and rowspan attribute, to merge cells in HTML. The rowspan attribute is for the number of rows a cell should merge, whereas the colspan attribute is for the number of columns a cell should merge.

The attribute should be placed inside the <td> tag.

Syntax

Following is the syntax to merge table cells in HTML.

<td rowspan="2">cell data</td>

Example

Following is the example program to merge the row cells of the table in HTML.


<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td >Tharun</td>
         <td rowspan="2">Content writer</td>
      </tr>
      <tr>
         <td >Akshaj</td>
      </tr>
   </table>
</body>
</html>

Using colspan attribute

We can merge the column cells of the table by using below syntax.

Syntax

For colspan we use below syntax.

<td colspan="2">cell data</td>

Example

Following is the example program to merge column cells of the table in HTML.


<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Last Name</th>
         <th>Job role</th>
      </tr>
      <tr>
         <td colspan="2" >Tharun chandra</td>
         <td >Content writer</td>
      </tr>
      <tr>
         <td colspan="2">Akshaj Vank</td>
         <td >Content writer</td>
      </tr>
   </table>
</body>
</html>

Example

Following is the example program where we are performing both rowspan and colspan on a HTML table.


<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td >Tharun</td>
         <td rowspan="2">Content writer</td>
      </tr>
      <tr>
         <td >Akshaj</td>
      </tr>
      <tr>
         <td colspan="2">Welcome to the company</td>
      </tr>
   </table>
</body>
</html>