

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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?
To merge cells in HTML, use the colspan and rowspan attribute. The rowspan attribute is for the number of rows a cell should span, whereas the colspan attribute is for a number of columns a cell should span.
Both the attribute will be inside the <td> tag. The number will be a numeric value, for example, 2 for 2 rows if rowspan, 2 for 2 columns if column span.
Example
Firstly, we will see how to create a table in HTML with 3 rows and 3 columns
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; width: 100px; height: 50px; } </style> </head> <body> <h1>Heading</h1> <table> <tr> <th></th> <th></th> <th></th> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
Output
Example
Let’s merge cells using the colspan and rowspan attribute
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; width: 100px; height: 50px; } </style> </head> <body> <h1>Heading</h1> <table> <tr> <th colspan="2"></th> <th></th> </tr> <tr> <td></td> <td></td> <td rowspan="2"></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
Output
- Related Questions & Answers
- How to merge table columns in HTML?
- How to center align text in table cells in HTML?
- How to layout table cells, rows, and columns with JavaScript?
- Java Program to select all cells in a table
- How to assign specific colors to specific cells in a Matplotlib table?
- How to set the space between cells in a table with JavaScript?
- Set width between table cells with CSS
- How to create table border in HTML?
- How to create table header in HTML?
- How to set table width in HTML?
- How to create table footer in HTML?
- How to create table heading in HTML?
- In HTML how to create table header?
- How to add one or more header cells a cell is related to in HTML?
- How to use an HTML tag inside HTML table?
Advertisements