Merge and Make A Blank Space - html

Question

I've a table that has three rows under weight allowance column at the footer. As you can see it has the three rows as follows:
Weight 1 20
Weight 2 40
Weight 4 60
What I am trying to make that area blank and something as this one: Sample Output
I tried to play around and used colspan or rowspan to make the tweak but seems am unable to do it. Is there any proper workaround for this?
.table th, td {
border: 1px solid black;
}
<table class="table">
<thead>
<tr>
<td>Discipline</td>
<th colspan="3">Weight Type 1</th>
<th colspan="2" rowspan="2">Weight Percentage (%)</th>
<th colspan="3">Weight Type 2</th>
</tr>
<tr>
<th></th>
<th>Weight 1</th>
<th>Weight 2</th>
<th>Weight 4</th>
<th>Weight 1</th>
<th>Weight 2</th>
<th>Weight 4</th>
</tr>
</thead>
<tbody>
<tr style="background-color: white;">
<th>Discipline 1</th>
<td>10</td>
<td>20</td>
<td>30</td>
<td colspan="2">100</td>
<td>2</td>
<td>1</td>
<td>3</td>
</tr>
<tr style="background-color: white;">
<th>Discipline 2</th>
<td>20</td>
<td>40</td>
<td>60</td>
<td colspan="2">100</td>
<td>4</td>
<td>2</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td rowspan="3">
<b>Summation</b>
</td>
<td rowspan="3">30</td>
<td rowspan="3">60</td>
<td rowspan="3">90</td>
<td style="width: 100px;">Weight 1</td>
<td style="width: 100px;">20</td>
<td rowspan="3">6</td>
<td rowspan="3">3</td>
<td rowspan="3">9</td>
</tr>
<tr>
<td>Weight 2</td>
<td>40</td>
</tr>
<tr>
<td>Weight 4</td>
<td>60</td>
</tr>
</tfoot>
</table>

Answer 1

You'll need rowspan="3" and colspan="2"` on that new empty cell:
.table th, td {
border: 1px solid black;
}
<table class="table">
<thead>
<tr>
<td>Discipline</td>
<th colspan="3">Weight Type 1</th>
<th colspan="2" rowspan="2">Weight Percentage (%)</th>
<th colspan="3">Weight Type 2</th>
</tr>
<tr>
<th></th>
<th>Weight 1</th>
<th>Weight 2</th>
<th>Weight 4</th>
<th>Weight 1</th>
<th>Weight 2</th>
<th>Weight 4</th>
</tr>
</thead>
<tbody>
<tr style="background-color: white;">
<th>Discipline 1</th>
<td>10</td>
<td>20</td>
<td>30</td>
<td colspan="2">100</td>
<td>2</td>
<td>1</td>
<td>3</td>
</tr>
<tr style="background-color: white;">
<th>Discipline 2</th>
<td>20</td>
<td>40</td>
<td>60</td>
<td colspan="2">100</td>
<td>4</td>
<td>2</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td rowspan="3">
<b>Summation</b>
</td>
<td rowspan="3">30</td>
<td rowspan="3">60</td>
<td rowspan="3">90</td>
<td rowspan="3" colspan="2"></td>
<td rowspan="3">6</td>
<td rowspan="3">3</td>
<td rowspan="3">9</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</tfoot>
</table>
However, now every cell in the bottom row has rowspan="3", so you might want to remove all the rowspans from the bottom row.