Table Footer With Three Split Row - html

Question

I am trying to create a table with the following custom format that has three rows under a column at the end:
.table th, td {
border: 1px solid black;
}
<table class="table">
<thead>
<tr>
<td rowspan="2">Discipline</td>
<th colspan="3">Weight Type 1</th>
<th colspan="1" rowspan="2">Weight Percentage (%)</th>
<th colspan="3">Weight Type 2</th>
</tr>
<tr>
<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="1">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="1">100</td>
<td>4</td>
<td>2</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td rowspan="2">
<b>Summation</b>
</td>
<td rowspan="2">30</td>
<td rowspan="2">60</td>
<td rowspan="2">90</td>
<td style="width: 20px;">Weight 1</td>
<td style="width: 20px;">X</td>
<td rowspan="2">6</td>
<td rowspan="2">3</td>
<td rowspan="2">9</td>
</tr>
<tr>
<td>Weight 2</td>
<td>Y</td>
</tr>
</tfoot>
</table>
What I want, under Weight Percentage column there will be three rows at a time. That means, it'll have something as follows:
Weight 1 - 20
Weight 2 - 40
Weight 4 - 60
For now, under Weight Type 2 area, one of the column Weight 4 is bound out of the table. That has to be adjusted to Weight 4 column. Tried myself, but unable to do it. Anything that I missed?

Answer 1

You have used colspan="1" instead of colspan="2" for the cells of Weight Percentage (%), which causes the 9 to be displayed outside the table since the last rows (since they are merged) now have one more column than the rest. Adjust the three colspan="1" and that problem should be fixed.
As for the third row, you need to actually add a third row (<tr>...</tr>) and then adjust the rowspan for the rows you want to merge in your tfoot.
.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>