Fixer mon pied de page

Bonjour,

j'ai un petit soucis au niveau de mon pied et mon tableau créé (je n'ai ce problème uniquement sur la page où j'ai créé le tableau). Mon pied de page se met au dessus de mon tableau et je ne vois vraiment pas pourquoi.
Voici: l'html:
<div id="soustitre">
Nos tarifs
</div>
<!--COLONNE1-->
<table>
<tr>
<th style="color:#F0F8FF;">Nombre d'heures</th>
<th style="color:#F0F8FF;">Prix(+18 ans)</th>
<th style="color:#F0F8FF;">Prix(-18 ans)</th>
</tr>
<tr>
<td style="color:#F0F8FF;">1</td>
<td style="color:#F0F8FF;">4€</td>
<td style="color:#F0F8FF;">2,50€</td>
<tr>
<tr>
<td style="color:#F0F8FF;">2</td>
<td style="color:#F0F8FF;">6€</td>
<td style="color:#F0F8FF;">4€</td>
<tr>
<tr>
<td style="color:#F0F8FF;">3</td>
<td style="color:#F0F8FF;">8€</td>
<td style="color:#F0F8FF;">5,50€</td>
<tr>
<tr>
<td style="color:#F0F8FF;">4</td>
<td style="color:#F0F8FF;">10€</td>
<td style="color:#F0F8FF;">7€</td>
<tr>
<tr>
<td style="color:#F0F8FF;">5</td>
<td style="color:#F0F8FF;">12€</td>
<td style="color:#F0F8FF;">9,50€</td>
<tr>
<tr>
<td style="color:#F0F8FF;">+5</td>
<td style="color:#F0F8FF;">25€</td>
<td style="color:#F0F8FF;">20€</td>
<tr>
</section>
<footer>
<!--PIED DE PAGE-->
<span class="piedgauche">
xxxxx
</span>
<span class="piedcentre">
xxxxx
</span>
<span class="pieddroit">
xxxx
</span>
</footer>
</body>
</html>

le css:
footer{
float:none;
clear:both;
}
.piedgauche
{
float:left;
color:#F0F8FF;
}
.piedcentre
{
padding-left:500px;
color: #F0F8FF;
}
.pieddroit
{
float:right;
color: #F0F8FF;
}

table
{
border-collapse: collapse;
}
td, th
{
border: 1px solid #F0F8FF;
font-size:#F0F8FF;
}