Stripy HTML tables and rowspan - html

Question

Original table (http://highspeedbroadband.com.my/home-package/comparison-chart-for-home-package/)
I want to modify the original as highlighted in image below. I can do this by adding rowspan and colspan attribute to td elements but when I use row span in stripy tables the order of alternative color breaks and gives me ugly result.
someone help me please.

Answer 1

Try wrapping those three texts with another table in which every FREE xmins will be a new table cell (<td>) like this:
(...)
<td colspan="3">
<table>
<tr>
<td>FREE 50 mins</td>
<td>FREE 100 mins</td>
<td>FREE 200 mins</td>
</tr>
</table>
</td>
(...)

Answer 2

You could make 3 spans inside the cell.
HTML:
<td>
<span>1</span>
<span>2</span>
<span>3</span>
</td>
CSS:
table td span {
display: inline-block;
width: 30%;
background: lightblue;
}
DEMO.

Answer 3

<td colspan="3" id="TD_97"> <div class="xyz">
<div class="abc"> FREE 50mins </div>
<div class="abc"> FREE 100mins </div>
<div class="abc"> FREE 200mins </div>
<div class="aa"> *RM0.15/min (local fixed and mobile call)</div> </div>
</td>
CSS
.xyz{
height: 168px;
line-height: 21px;
outline: rgb(81, 94, 108) none 0px;
padding: 8px;
text-align: center;
vertical-align: middle;
float:right;
width: 250px;
}
.abc {
float:left;
width:77px;
height:100px;
padding-top:50px;
border:double 3px black;
}
.aa {
border-top:none;
border:double 3px black;
padding:0;
margin:0;
clear:both;
}
DEMO