Dividing a table into head, body and footer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dividing a table into head, body and footer.</title>
<style type="text/css">
thead, tfoot {background-color:#d6d6d6;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Transaction date</th>
<th>Payment type and details</th>
<th>Paid out</th>
<th>Paid in</th>
<th>Balance</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>$1.27</td>
<td>$2.00</td>
<td>$8.88</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>12 Jun 09</td>
<td>Amazon.com</td>
<td>$4.99</td>
<td></td>
<td>$8.16</td>
</tr>
<tr>
<td>13 Jun 09</td>
<td>Total</td>
<td>$6.00</td>
<td></td>
<td>$8.16</td>
</tr>
<tr>
<td>14 Jun 09</td>
<td>Whole Foods</td>
<td>$7.28</td>
<td></td>
<td>$8.88</td>
</tr>
<tr>
<td>14 Jun 09</td>
<td>Visa Payment</td>
<td>$3.00</td>
<td></td>
<td>$7.88</td>
</tr>
<tr>
<td>15 Jun 09</td>
<td>Cheque 122501</td>
<td></td>
<td>$1.00</td>
<td>$9.88</td>
</tr>
</tbody>
<tbody>
<tr>
<td>17 Jun 09</td>
<td>Murco</td>
<td>$6.00</td>
<td></td>
<td>$9.88</td>
</tr>
<tr>
<td>18 Jun 09</td>
<td>Wrox Press</td>
<td></td>
<td>$1.00</td>
<td>$1.88</td>
</tr>
<tr>
<td>18 Jun 09</td>
<td>McLellans Bakery</td>
<td>$2.00</td>
<td></td>
<td>$1.88</td>
</tr>
<tr>
<td>18 Jun 09</td>
<td>Apple Store</td>
<td>$1.00</td>
<td></td>
<td>$8.88</td>
</tr>
</tbody>
</table>
</body>
</html>
Related examples in the same category