Html Rowspan Put on the top - html

Question

I just want to ask if how I can put the <td> on the top since I used a rowspan on the <td>. Please see sample below.
This is my code:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">
<div>January</div>
<div>test</div>
<div>test</div>
</td>
</tr>
<tr class="rowsl">
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td rowspan="2">January</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
I want to have it this way like picture:

Answer 1

You've got multiple solutions.
My main suggestion will be to remove all rowspans and the multiple trs.
See the code I changed into comment in the snippet below:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td><!-- rowspan="2"-->
<div>January</div>
<div>test</div>
<div>test</div>
</td>
<!--/tr>
<tr class="rowsl"-->
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td><!-- rowspan="2"-->January</td>
<!--/tr>
<tr-->
<td>February</td>
<td>$80</td>
</tr>
</table>
From the snippet above, if you ever need to add lines in the td, you can add divs like you did for the month, and maybe stylize it a little, like that:
td div {
border-bottom: 1px solid black;
}
/* Or use the one below if you don't want the first column to be stylized
td:not(:first-child) div {
border-bottom: 1px solid black;
}
*/
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>
<div>January</div>
<div>test</div>
<div>test</div>
</td>
<td>
<div>February</div>
<div>test</div>
<div>test</div>
</td>
<td>
<div>$80</div>
<div>test</div>
<div>test</div>
</td>
</tr>
<tr>
<td>January</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
Or, you can do the following, keep the rowspan and add the empty tds that will make your table structure consistent:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<!-- Do the following -->
<tr>
<td rowspan="2">
<div>January</div>
<div>test</div>
<div>test</div>
</td>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>January</td>
<td>February</td>
<td>$80</td>
</tr>
</table>

Answer 2

Why you can move all rowspan td in one tr
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">
<div>January</div>
<div>test</div>
<div>test</div>
</td>
<td rowspan="2" style="vertical-align:top">February</td>
<td rowspan="2" style="vertical-align:top">$80</td>
</tr>
<tr class="rowsl">
</tr>
<tr>
<td rowspan="2">January</td>
<td>February</td>
<td>$80</td>
</tr>
</table>

Answer 3

Not sure my answer is what you are looking for:
<table border ="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr >
<td rowspan="2" >
<div>January</div><div>test</div><div>test</div>
</td>
<td>February</td>
<td>$80</td>
</tr>
<tr class="rowsl">
</tr>
<tr>
<td rowspan="2">January</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

Answer 4

The only way I see is putting it in the same row, but then you will have the same height:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">
<div>January</div>
<div>test</div>
<div>test</div>
</td>
<td rowspan="2" >February</td>
<td rowspan="2" >$80</td>
</tr>
<tr>
<td rowspan="2">January</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>

Answer 5

You may also write as below code,
<table border=1>
<tr>
<th>Month</th>
<th>Savings</th>
<th rowspan="2">Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2" >
<div>January</div>
<div>test</div>
<div>test</div>
</td>
</tr>
<tr class="rowsl">
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td rowspan="2">January</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>