how to dynamically assign rowspan to td based on number of rows in the table by creating Handlerbar template

how to dynamically assign rowspan to td based on number of rows in the table by creating Handlerbar template

Lets say in a div i want to dynamically create table based on the collection which i assign the handlerbar...

Lets see the below code..
<div>

<table style="width:100%; table-layout: fixed;">
<tr>
<td style="background-color:green">Old Value</td>
<td> </td>
<td> </td>
</tr>

<tr>
<td style="background-color:Gray" rowspan="4">New Value</td>
<td>Team A </td>
<td>Player1,Player2,Player3</td>
</tr>
<tr>
<td>Team B</td>
<td>Player4,Player 5,Player6</td>
</tr>

<tr>
<td>Team C</td>
<td>Player7,Player8,Player9</td>
</tr>
<tr>
<td>Team D</td>
<td>Player10,Player11,Player12</td>
</tr>

</table>

<table style="width:100%; table-layout: fixed;">
<tr>
<td style="background-color:green" rowspan="4">Old Value</td>
<td>Team A </td>
<td>Player1,Player2,Player3</td>
</tr>

<tr>
<td>Team B</td>
<td>Player4,Player 5,Player6</td>
</tr>

<tr>
<td>Team C</td>
<td>Player7,Player8,Player9</td>
</tr>

<tr>
<td>Team D</td>
<td>Player10,Player11,Player12</td>
</tr>

<tr>
<td style="background-color:Gray" rowspan="3">New Value</td>
<td>Team B</td>
<td>Player1,Player2,Player3</td>
</tr>
<tr>
<td>Team C</td>
<td>Player10,Player11,Player12</td>
</tr>

</table>

</div>

the value of the rowspan in the td should be based on number of rows...how to create such templates?