Problème CSS

Bonjour, je voudrais faire en sorte que mon tableau est une marge de 10% à gauche et à droite et que mes cellules de ma deuxième ligne soit égale en longueur mais le problème est que mon tableau ne fait pas ce que je veux.. :(

La première ligne de mon tableau ne doit faire environ que 8% et il n'y a pas 10% de marge à droite sur ma deuxième ligne.. :/

Je vous montre mon code pour que vous compreniez:

----------------------------------------------------------------------------
menu.html

<table border="1" class="tableau">
<tr class="baniere">
<td>Banniere du site</td>
</tr>

<tr>
<td class="celulle">Acceuil</td>
<td class="celulle">Informatique</td>
<td class="celulle">Image et son</td>
<td class="celulle">Telephonie</td>
<td class="celulle">Electromenager</td>
<td class="celulle">Auto/moto</td>
<td class="celulle">Jeux/jouets</td>
<td class="celulle">Maison/bricolage</td>
</tr>
</table>

----------------------------------------------------------------------------

----------------------------------------------------------------------------
style.css

.tableau{
margin-left:10%;
margin-right:10%;
}

.celulle{
width:12.5%;
}

.baniere{
width:100%;
height:15%;
}

----------------------------------------------------------------------------

Configuration: Windows Vista
Firefox 3.0.10