Bonjour à tous,
 
J'espère ne pas faire de doublon avec ce message mais je n'ai pas trouvé de réponse à mon petit soucis.
 
Je débute tout juste et j'essaie de construire un tableau tout simple avec une colonne et un "imbriquement" de deux colonnes.
La largeur de la colonne est de 700pixels. Dans mon imbrication, les deux colonnes font donc 350 pixels chacune.
 
Tout allait bien jusqu'à ce que j'ajoute des images de 700pixels dans ma première colonne.
Les deux colonnes du dessous se sont alors décalés (en rouge dans le code ci-dessous). La première a pris la taille de la colonne du dessus (700pixels) et a donc décalé la seconde colonne à droite. Je précise que la seconde a gardé ses 350pixels de large.
 
J'imagine que je peux régler mon soucis avec un colspan mais je n'arrive pas à l'appliquer correctement.
 
Vous pouvez voir le bug ici : http://presentcontinu.com/NL/2013/NL1/index.html
 
Quelqu'un pourrait-il m'aider ?
 
Voici mon code :
 
<table border="0" cellspacing="0" cellpadding="0" width="700" align="center">
   <tr>
    <td class="header" align="left" valign="top">
     <p>image1 (width="700" height="150" )</p>
    </td>
   </tr>
   <tr>
    <td align="left" valign="top">
     <p>image2 (width="700" height="50" )</p>
    </td>
   </tr>
   <tr>
    <td align="left" valign="top">
     <p>image3 (width="700" height="50" )</p>
     <p>&nbsp;</p>
    </td>
   </tr>
   <tr>
    <td align="left" valign="top">
     <p>image4 (width="700" height="50" )</p>
     <p>&nbsp;</p>
    </td>
   </tr>
   <tr>
    <td align="left" valign="top">
     <p>image5 (width="700" height="50" )</p>
     <p>&nbsp;</p>
    </td>
   </tr>
   <tr>
    <td align="left" valign="top">
     <p>image6 (width="700" height="50" )</p>
     <p>&nbsp;</p>
    </td>
   </tr>
   <tr>
    <td width="350" align="left" valign="top">
     <p>image7 (width="350" height="50" )</p>
     <p class="retrait25"></p>
    </td>
    <td width="350" align="left" valign="top">
     <p>image8 (width="350" height="50" )</p>
     <p class="retrait25"></p>
    </td>
   </tr>
   <tr>
    <td align="left" valign="top">
     <p>image8 (width="700" height="50" )</p>
     <p class="retrait25"></p>
    </td>
   </tr>
   <tr>
    <td>
     <p class="retrait25" align="center"></p>
    </td>
   </tr>
</table>  
 
 
Et le css :
 
body {
 color: #666666;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 margin: 20px 20px 0 0;
 padding: 0;
 font-size: 11px;
 line-height: 1.3em;
 }
 td {  
 font-size: 11px;
 }
 a {
 color: #666666;
 }
 a img {
 border: none;
 }
 .header {
 padding-bottom: 15px;
 background-repeat: no-repeat;
}
 .retrait25 {
 padding-right: 25px;
 padding-left: 25px;
 }
 
 
Merci beaucoup et désolé par avance si mon code vous faisait bondir !!

Euh alors les tableaux c'est le mal, on code plus du tout comme ça normalement (faut utiliser des div + css).
 
Mais en admettant que tu veuilles garder le code tel quel, il suffirait de faire un sous tableau.  
 
Autrement dit remplacer :

par :

Merci beaucoup c'est très gentil ! En fait j'ai suivi les conseils d'un graphiste qui m'a dit que, pour une newsletter, il vallait mieux essayer de mettre le moins possible de css pour éviter que cela bouge ... Mais j'imagine que c'est un peu la soluce fainéant !
 
Quoi qu'il en soit merci beaucoup, tout fonctionne très bien maintenant !

je confirme pour une newsletter il faut encore utiliser des tableaux