How to 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>

Advertisements