How to merge table cells in HTML ?
Last Updated :
11 Jan, 2024
The purpose of this article is to explore the method of merging table cells in HTML using the rowspan
and colspan
attributes. By utilizing rowspan
, multiple cells in a row can be merged or combined, while colspan
enables the merging of cells in a column within an HTML table. This technique proves essential for creating visually organized and structured tables, and optimizing the presentation of data.
Example 1: Merge two table rows and make a single row.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</ style >
</ head >
< body style = "text-align:center" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h2 >How to merge table cells in HTML?</ h2 >
< table align = "center" >
< tr >
< th >Name</ th >
< th >Age</ th >
</ tr >
< tr >
< td >Akku</ td >
< td rowspan = "2" >44</ td >
</ tr >
< tr >
< td >fahad</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:
Example 2: Merge two table column and make a single column.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align: center;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h2 >
How to merge table
cells in HTML?
</ h2 >
< table >
< tr >
< th >Name</ tMh >
< th >Marks</ th >
</ tr >
< tr >
< td >Aman</ td >
< td >10</ td >
</ tr >
< tr >
< td >riya</ td >
< td >18</ td >
</ tr >
< tr >
< td colspan = "2" >Sum: 28</ td >
</ tr >
</ table >
</ center >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...