Tableau et Div, espace incompréhensible.

[Crema]

Bonjour,

J'ai aidé une amie à coder une petite fiche sauf qu'on rencontre un petit soucis que je n'explique pas.
Entre mon DIV en haut et ma TABLE, il y a un espace qui s'agrandit à mesure que j'ajoute des lignes dans mon tableau.

Code:

<div style="margin:auto;width:502px;height:250px; background-image: url(http://www.elbakin.net/plume/xmedia/film/news/bilbo/orlando_bloom_bilbo.jpg); border: 3px solid #333333; -webkit-border-radius: 400px 400px 0px 0px; -moz-border-radius: 400px 400px 0px 0px; border-radius: 400px 400px 0px 0px;"></div>
<table style="margin-right:auto;margin-left:auto;margin-top:-40px;border: 3px solid #000000;background-color: #dddddd;"><tr><td style="width: 200px; height:400px; background-image: url(http://www.elbakin.net/plume/xmedia/film/news/bilbo/orlando_bloom_bilbo.jpg); border: 3px solid #333333;"></td><td valign=top style= "width: 280px; height:400px; background-color: #333333; border: 3px solid #333333;">Nom :
Prénom :
Age:
</td></tr>
<tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;">
Caractère</div>
</td></tr>
<tr><td colspan="2"><div style= "padding: 20px; margin-right: 20px; margin-left : 20px; background-color: #ffffff; font-color: #333333; font-size: 12px; text-align: justify; border: 1px solid #333333;">texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div>
</td></tr>
<tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;">Physique</div>
</td></tr>
<tr><td colspan="2"><div style= "padding: 20px; margin-right: 20px; margin-left : 20px; background-color: #ffffff; font-color: #333333; font-size: 12px; text-align: justify; border: 1px solid #333333;">texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div>
</td></tr>
<tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;">Histoire</div>
</td></tr>
<tr><td colspan="2"><div style= "padding: 20px; margin-right: 20px; margin-left : 20px; background-color: #ffffff; font-color: #333333; font-size: 12px; text-align: justify; border: 1px solid #333333;">texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div>
</td></tr>
<tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;">& Vous ?</div>
</td></tr>
<tr><td style="width: 200px; height:200px; background-image: url(http://www.elbakin.net/plume/xmedia/film/news/bilbo/orlando_bloom_bilbo.jpg); border: 3px solid #333333;"></td><td valign=top style= "width: 200px; height:200px; background-color: #333333; border: 3px solid #333333;">Nom :
Prénom :
Age:
</td></tr>
<tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 12px; text-align: center;">
By [url=www.http://point-virgule.fr1.co]Point Virgule[/url].</div>
</td></tr></table>

Je n'arrive vraiment pas à comprendre pourquoi... Pourriez-vous me donner un coup de main ?
Merci !


EDIT : une petite capture histoire de préciser mon problème.

Spoiler:

[Invité]

Bonjour,

En retirant tous les retours à la ligne, le soucis disparait. Dans les messages, les retours à la ligne causent systématiquement ce soucis .

Code:

<div style="margin:auto;width:502px;height:250px; background-image: url(http://www.elbakin.net/plume/xmedia/film/news/bilbo/orlando_bloom_bilbo.jpg); border: 3px solid #333333; -webkit-border-radius: 400px 400px 0px 0px; -moz-border-radius: 400px 400px 0px 0px; border-radius: 400px 400px 0px 0px;"></div><table style="margin-right:auto;margin-left:auto;margin-top:-40px;border: 3px solid #000000;background-color: #dddddd;"><tr><td style="width: 200px; height:400px; background-image: url(http://www.elbakin.net/plume/xmedia/film/news/bilbo/orlando_bloom_bilbo.jpg); border: 3px solid #333333;"></td><td valign=top style= "width: 280px; height:400px; background-color: #333333; border: 3px solid #333333;">Nom :
Prénom :
Age:
</td></tr><tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;">
Caractère</div></td></tr><tr><td colspan="2"><div style= "padding: 20px; margin-right: 20px; margin-left : 20px; background-color: #ffffff; font-color: #333333; font-size: 12px; text-align: justify; border: 1px solid #333333;">texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></td></tr><tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;">Physique</div></td></tr><tr><td colspan="2"><div style= "padding: 20px; margin-right: 20px; margin-left : 20px; background-color: #ffffff; font-color: #333333; font-size: 12px; text-align: justify; border: 1px solid #333333;">texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></td></tr><tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;">Histoire</div></td></tr><tr><td colspan="2"><div style= "padding: 20px; margin-right: 20px; margin-left : 20px; background-color: #ffffff; font-color: #333333; font-size: 12px; text-align: justify; border: 1px solid #333333;">texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></td></tr><tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 15px; text-align: center;">& Vous ?</div></td></tr><tr><td style="width: 200px; height:200px; background-image: url(http://www.elbakin.net/plume/xmedia/film/news/bilbo/orlando_bloom_bilbo.jpg); border: 3px solid #333333;"></td><td valign=top style= "width: 200px; height:200px; background-color: #333333; border: 3px solid #333333;">Nom :
Prénom :
Age:
</td></tr><tr><td colspan="2" valign=top><div style="font-color: #333333; font-size: 12px; text-align: center;">
By [url=www.http://point-virgule.fr1.co]Point Virgule[/url].</div></td></tr></table>

Bien sincèrement.

[Crema]

Super ! Ca fonctionne ! Merci beaucoup !