Merge Table Cells in HTML

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>
Updated on: 2023-09-02T13:15:09+05:30

76K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements