Table last cells to be aligned right - html

Question

I have a table with html as follows:
<div id="cart">
<table>
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th >Price</th>
<th>Qty</th>
<th >Options</th>
<th >Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item-pid">5</td>
<td class="item-name"></td>
<td class="item-price"></td>
<td class="item-quantity">1</td>
<td class="options">color</td>
<td class="item-total">$23.52</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<th>Sub-Total</td>
<td class="third">5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<th>Shipping Option</td>
<td class="third">EMS</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<th>Grand Total</td>
<td class="third">100</td>
</tr>
<CAPTION ALIGN="bottom">
This is the table's bottom caption
</CAPTION>
</tbody>
</table>
</div>
I need the last three row columns Sub-total, shipping option and grand total to be as a standalone single column with all td 's prior to it removed. currently i am adding:
<td><td><td><td>
to align it to right. All prior cells are displaying blank. I want all those cells removed and the last 3 cells aligned to right.
How is that possible?
I have a Fiddle Demo here..
Help Requested. Thanks in advance.

Answer 1

You can change those 3 rows code into this:
<tr>
<td colspan="5" style="text-align:right;">Sub-Total</td>
<td class="third">5</td>
</tr>
<tr>
<td colspan="5" style="text-align:right;">Shipping Option</td>
<td class="third">EMS</td>
</tr>
<tr>
<td colspan="5" style="text-align:right;">Grand Total</td>
<td class="third">100</td>
</tr>
You can use colspan to merge the colums and text-align:right for the text to align right.
Check out this Fiddle..