- 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
Updated on 30-Dec-2021 06:27:02
- 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