- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
- Related Articles
- How to merge table columns in HTML?
- How to center align text in table cells in HTML?
- How to assign specific colors to specific cells in a Matplotlib table?
- How to layout table cells, rows, and columns with JavaScript?
- How to create table footer in HTML?
- How to create table heading in HTML?
- In HTML how to create table header?
- How to create table header in HTML?
- How to set table width in HTML?
- How to create table border in HTML?
- Java Program to select all cells in a table
- How to use an HTML tag inside HTML table?
- How to display a table body in HTML
- How to create table rows & columns in HTML?
- How to include groups of table columns in HTML?

Advertisements