CODEWITHSUNDEEP
html-tablerowmultiple-columns
Cars PLan
Cars PLan

Reputation: 1

How to make HTML table with 2 column merge and 2 row merge?

I need A & B Colum to merge, also 1 & a row marge. Here I use colspan for merge A & B, also use rowspan for 1 & a row merge. But the Result not match my needs. I need look like this image Demo Table

table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}
th, td {
 padding: 5px;
 text-align: left;    
}
<table>
 <tr>
   <td colspan="2">A</td>
   <td colspan="2">B</td>
   <td>C</td>
 </tr>
 <tr>
   <td rowspan="2">1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td rowspan="2">a</td>
   <td>b</td>
   <td>c</td>
 </tr>
</table>

Upvotes: 0

Views: 1221

Answers (1)

RABIUL HOSSAIN
RABIUL HOSSAIN

Reputation: 11

I think solved the issue you mentioned. you may try it. I hope you'll satisfy with the solution. Thank you.

table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}
th, td {
 padding: 5px;
 text-align: left;    
}
<table>
 
 <tr>
   <td colspan="2">A</td>
   <td>C</td>
 </tr>
 <tr>
   <td rowspan="2">1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>a</td>
   <td>b</td>
 </tr>
</table>

Upvotes: 1

Related Questions