Centrer des tabelaux pour emailing responsive

Bonjour à toutes et tous,

voilà je me heurte à un problème bien prise de tête concernant un emailing en responsive.

J'ai un tableau de 600 pixels de large, contenant 3 tableaux alignés de 200 pixels de large avec align="left".
En mode smartphone, les tableaux se mettent bien les uns en dessous des autres mais sont alignés à gauche, je n'arrive pas à les centrer.

Si je mets align="center", bien entendu ils se placent les uns en dessous des autres en mode desktop donc ce n'est pas la solution.

Voici un extrait de mon code :

<table class="inner" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
        <tr>
            <td>
            <table class="dashedBorder 3cols" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" align="left" border="0" cellpadding="0" cellspacing="0" width="210">
                ...........
            </table>
            <table class="dashedBorder 3cols" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" align="left" border="0" cellpadding="0" cellspacing="0" width="210">
                ...........
            </table>
            <table class="dashedBorder 3cols" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" align="left" border="0" cellpadding="0" cellspacing="0" width="210">
                ...........
            </table>
            </td>
        </tr>
</table>

Merci d'avance pour votre aide et votre temps,

DaTongue

Hello,
l'extrait de ton code est étrange, tu met tes 3 colonnes à 210px de large dans un tableau a 600 ?

pour centrer utilise css avec un text-align:center et le conteneur en margin:0 auto.

Bonne soirée

Merci pour ton retour uix, mais je n'arrive pas à faire mieux :

<br>
<style>
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-color:#f9f9f9; }
@media (max-width: 640px) {
.inner { width:320px !important; margin:0 auto !important;}
.dashedBorder.3cols { text-align:center !important;}
}
</style>

<table class="inner" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
        <tr>
            <td style="text-align:center;">
            <table class="dashedBorder 3cols" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;text-align:center;" border="0" cellpadding="0" cellspacing="0" width="200" bgcolor="#003399">
               <tr><td>111</td></tr>
            </table>
            <table class="dashedBorder 3cols" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;text-align:center;" border="0" cellpadding="0" cellspacing="0" width="200" bgcolor="#33FF66">
               <tr><td>222</td></tr>
            </table>
            <table class="dashedBorder 3cols" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;text-align:center;" border="0" cellpadding="0" cellspacing="0" width="200" bgcolor="#993399">
               <tr><td>333</td></tr>
            </table>
            </td>
        </tr>
</table>

Bonjour Datongue,

Tu vas avoir bien du mal à y arriver si tu ne respecte pas la syntaxe de construction d'une table.
Dans ton dernier exemple j'aperçois des balises table à l'intérieure de balise td. Ceci est inconcevable.

Une table commence et se termine par <table></table>
Une en-tête se matérialise par <thead></thead> et contient des cellules <th></th>.
Un pied-de-table se matérialise par <tfoot></tfoot> et ne contient pas de th
Un corps de table se matérialise par <tbody></tbody>
Une ligne se matérialise par <tr></tr>
Une cellule se matérialise par <td></td>

Dans une construction simplifiée tu peux t'abstenir d'inclure de thead, de tfoot et/ou de tbody.
Des tbody peuvent être multiples mais des tables ne peuvent être imbriquées.

Je pense que si tu remets au carré ta syntaxe aux standard html5, tes soucis de centrage devraient s'évanouir naturellement.

Edit: Voici bien la première fois que je rencontre mso-table-rspace (et consorts) ; d'après-toi que signifie cette propriété et quel est son usage stp ?
Modifié par Greg_Lumiere (29 Jul 2016 - 11:25)

????? On est le 1er avril ?

Merci Greg_Lumiere pour ton intervention

Mais je te confirme qu'on peut insérer des tableaux dans des cellules de tableaux.
Et les styles suivants "border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" permettent à Outlook de bien garder tes tableaux alignés en version Emailing.

Mon problème apparaît en mode Responsive Smartphone. Les tableaux sont bien alignés en mode Desktop.

DaTongue a écrit :

Mais je te confirme qu'on peut insérer des tableaux dans des cellules de tableaux.
Et les styles suivants "border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" permettent à Outlook de bien garder tes tableaux alignés en version Emailing.

J'ignorais ces faits, merci pour les précisions.