Display total below HTML/CSS table

CODE

<!-- Style -->
<style>
   #total {
      text-align:right;
   }

   #table {
      border:1px solid red;
      border-collapse:separate;
   }

   #table th, #table td {
      border:1px solid #000;
   }
</style>

<!-- Table -->
<table id="table">
  <thead>
   <tr>
     <th>Col1</th>
     <th>Col2</th>
     <th>Col3</th>
     <th>Amount</th>
   </tr>
  </thead>
  <tbody>
   <tr>
     <td>A</td>
     <td>B</td>
     <td>C</td>
     <td>100</td>
   </tr>
   <tr>
     <td>D</td>
     <td>E</td>
     <td>F</td>
     <td>100</td>
   </tr>
  </tbody>
  <tfoot>
    <tr>
      <th id="total" colspan="3">Total :</th>
      <td>200</td>
    </tr>
   </tfoot>
 </table>

The 'Total' label is located in th that spans 2 columns (check cinnamon comment). A style applied to this cell moves all text on the right. The total number (200) is aligned with the other results.

You may try this

CSS

tbody tr{text-align:center; /*If you want to center align of row text*/}
.right{text-align:right;}​

HTML

<table>
    <thead>
        <tr><th>Col1</th><th>Col2</th><th>Col3</th><th>Amount</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td><td>B</td><td>C</td><td class="right">100</td>
        </tr>
        <tr>    
            <td>D</td><td>E</td><td>F</td><td class="right">100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td class="right" colspan="3">Total:</td><td class="right">200</td>
        </tr>
    </tfoot>
</table>

DEMO.