forum

Home / DeveloperSection / Forums / How to merge row of a table.

Ask Question

How to merge row of a table.

Samuel Fernandes218012-Oct-2016

Hi Team

I need to create a table through HTML in which I need to create 3 column, manager, leader and teammate.

Manager has two leader and leader has two team member.

I have tried a lots but not able to success.

Thanks

htmlhtml 
Updated on 27-Apr-2023
Samuel Fernandes

Samuel Fernandes

Follow

Can you answer this question?

Answer

4 Answers

Aryan Kumar

Aryan Kumar

27-Apr-2023

To merge rows of a table in HTML, you can use the rowspan attribute in the <td> or <th> tag. The rowspan attribute specifies the number of rows that a cell should span. Here's an example:

<table>
 <tr>
   <td rowspan="2">Merged Row</td>
   <td>Column 1</td>
   <td>Column 2</td>
 </tr>
 <tr>
   <td>Column 1</td>
   <td>Column 2</td>
 </tr>
</table>

In this example, the first cell in the first row has a rowspan attribute of 2, which means it should span two rows. As a result, the first cell in the second row is merged with the first cell in the first row, creating a single cell that spans two rows.

You can adjust the rowspan value to merge more than two rows if needed. Note that the cells in the same column that are merged with a rowspan attribute must not contain any content or be used in any other rows in the table to avoid misalignment of the table.

Abhishek Srivasatava

Abhishek Srivasatava

18-Oct-2016
Thanks Hubert.
Hubert Jason

Hubert Jason

17-Oct-2016
Very True. Perfect answer Abhishek
Abhishek Srivasatava

Abhishek Srivasatava

12-Oct-2016
Hi Samuel,


You need to use RowSpan. 

RowSpan: It is used when we need to merge rows of the table.

ColSpan: It is used when we need to merge rows of the table.

Here is the code for your problem:


<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Manager</th>
<th> Leader</th>
<th>Teammate</th>
</tr>
<tr><td
rowspan="2">XYZ</td><td>pqr</td><td>abc</td></tr>
                   <tr><td>stu</td><td>def</td></tr>
 
<tr><td
rowspan="2">XYZ</td><td>pqr</td><td>abc</td></tr>
                   <tr><td>stu</td><td>def</td></tr>
 
<tr><td colspan="3">Data Full
</table>
</body>
</html>

Liked By