Table Footer With Two Split Row - html

Question

I've created a table with the following custom format:
.table th, td {
border: 1px solid black;
}
<table class="table">
<col />
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<td rowspan="2" scope="colgroup">Discipline</td>
<th colspan="2" scope="colgroup">Weight Type 1</th>
<th colspan="1"></th>
<th colspan="2" scope="colgroup">Weight Type 2</th>
</tr>
<tr>
<th scope="col">Weight 1</th>
<th scope="col">Weight 2</th>
<th scope="col">Weight Percentage (%)</th>
<th scope="col">Weight 1</th>
<th scope="col">Weight 2</th>
</tr>
</thead>
<tbody>
<tr style="background-color: white;">
<th scope="row">Discipline 1</th>
<td>10</td>
<td>20</td>
<td>100</td>
<td>2</td>
<td>1</td>
</tr>
<tr style="background-color: white;">
<th scope="row">Discipline 2</th>
<td>20</td>
<td>40</td>
<td>100</td>
<td>4</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<b>Summation</b>
</td>
<td>30</td>
<td>60</td>
<td></td>
<td>6</td>
<td>3</td>
</tr>
</tfoot>
</table>
My plan is to create the footer section under Weight Percentage column as the following sample and in the same time, merge and centre the Weight Percentage column:
Is it something possible to create? I tried with rowspan and colspan, but seems like require bit more assistance here.

Answer 1

Yes it is possible with rowspan and colspan, but you need to define extra rows and cols which can then be merged as needed.
.table th,
td {
border: 1px solid black;
}
<table class="table">
<thead>
<tr>
<td>Discipline</td>
<th colspan="2">Weight Type 1</th>
<th colspan="2" rowspan="2" style="border-top:none;">Weight Percentage (%)</th>
<th colspan="2">Weight Type 2</th>
</tr>
<tr>
<th></th>
<th>Weight 1</th>
<th>Weight 2</th>
<th>Weight 1</th>
<th>Weight 2</th>
</tr>
</thead>
<tbody>
<tr style="background-color: white;">
<th>Discipline 1</th>
<td>10</td>
<td>20</td>
<td colspan="2">100</td>
<td>2</td>
<td>1</td>
</tr>
<tr style="background-color: white;">
<th>Discipline 2</th>
<td>20</td>
<td>40</td>
<td colspan="2">100</td>
<td>4</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td rowspan="2">
<b>Summation</b>
</td>
<td rowspan="2">30</td>
<td rowspan="2">60</td>
<td style="width: 80px;">Weight 1</td>
<td style="width: 80px;">X</td>
<td rowspan="2">6</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>Weight 2</td>
<td>Y</td>
</tr>
</tfoot>
</table>