Need table design with rowspan and colspan - html

Question

I am working on a pay slip design which should be implemented using table structure. I tried a lot but I am still very confused about rowspan and colspan. I also attached the html code below and I need to achieve the entire design in the attached png
<table id="woSpTable" align="center" class="table table-bordered table-responsive table-striped fontsize">
<thead>
<tr>
<th colspan="2"> Employee Details</th>
<th colspan="2">Payment & Leave Details</th>
<th colspan="2">Location Details</th>
<!--<th>ABC</th>-->
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">Item1</td>
<td colspan="2">Item1</td>
<td colspan="2">Item1</td>
<td colspan="4">Item1</td>
</tr>
<tr>
<td>Name1</td>
<td>Price1</td>
</tr>
<tr>
<td>Name2</td>
<td>Price2</td>
</tr>
<tr>
<td>Name3</td>
<td>Price3</td>
</tr>
<tr>
<td>Item2</td>
<td>Item2</td>
<td colspan="2">Item2</td>
<td>Item2</td>
</tr>
</tbody>
</table>

Answer 1

table {
font: 12px 'Arial';
margin: 10px auto;
background: #fff;
text-align: left;
border: 1px solid #000;
border-collapse: collapse;
}
table * { border: 1px solid #000; padding: 5px; white-space: nowrap; }
caption {
background: #fff;
text-transform: uppercase;
text-align: left;
font-weight: bold;
}
tr { background: #fafafb; }
th { color: #fff; background: #0080bf; }
.field { font-weight: bold; }
<table id="woSpTable" align="center" class="table table-bordered table-responsive table-striped fontsize">
<caption>MS. KUSUM KISHORI</caption>
<thead>
<tr>
<th colspan="4">Employee Details</th>
<th colspan="7">Payment & Leave Details</th>
<th colspan="2">Location Details</th>
</tr>
</thead>
<tbody>
<tr>
<td class="field">Emp No.</td>
<td colspan="3">929753</td>
<td class="field">Bank Name</td>
<td colspan="6">AXIS Bank</td>
<td class="field">Location</td>
<td>Item1</td>
</tr>
<tr>
<td class="field">Grade</td>
<td>C1</td>
<td class="field">UAN</td>
<td>10110101013999</td>
<td class="field">Acc No.</td>
<td colspan="6">10110101013999</td>
<td class="field">Base Br.</td>
<td>TSC - Hyderabad</td>
</tr>
<tr>
<td class="field">PAN</td>
<td colspan="3">DROPK7729E</td>
<td class="field">Days paid</td>
<td colspan="6">31</td>
<td class="field">Depute Br.</td>
<td>TSC - Hyderabad</td>
</tr>
<tr>
<td colspan="4"></td>
<td class="field">Leave Balance</td>
<td class="field">EL</td>
<td>36.32</td>
<td class="field">SL</td>
<td>24.32</td>
<td class="field">CL</td>
<td>2.50</td>
<td class="field">WON/SWON</td>
<td>2874529</td>
</tr>
</tbody>
</table>
<table id="woSpTable2" class="table table-bordered table-responsive table-striped fontsize">
<thead>
<tr>
<th>Earnings</th>
<th>Arrears</th>
<th>Current</th>
<th>Deductions</th>
<th>Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Total Earnings (Current + Arrears)</td>
<td>34,710.00</td>
<td>Total Deductions</td>
<td>2,817.00</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Op</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Op</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>