How to merge table cells in HTML ?
The purpose of this article is to merge table cells in HTML. It can be done by using the rowspan and colspan attribute in HTML. The rowspan is used to merge or combine the number of cells in a row whereas the colspan is used to merge column cells in a table.
Example 1: In this example, we will merge two table row 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> <!-- This cell will take up space on two rows --> <td rowspan="2">44</td> </tr> <tr> <td>fahad</td> </tr> </table></body> </html> |
Output:
Example 2: In this example, we will 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> <!-- The last row --> <tr> <!-- This td will span two columns, that is a single column will take up the space of 2 --> <td colspan="2">Sum: 28</td> </tr> </table> </center></body> </html> |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
Please Login to comment...