HTML Email - colspan est-il autorisé?
Je me demandais si j'utilisais l'attribut colspan dans un tableau HTML que je voulais utiliser comme courrier électronique. Les clients de messagerie (Outlook, etc.) comprendront-ils ce que fait colspan, car j'ai lu que cela pourrait poser un problème de mise en page?
Oui. Tout le balisage HTML est autorisé dans la plupart des clients de messagerie, sinon tous. En ce qui concerne les scripts, vous devez faire face à un problème, car la plupart des clients de messagerie, sinon tous, n'autorisent pas les scripts.
Colspan et rowspan sont tous deux entièrement pris en charge dans tous les principaux clients de messagerie. Ils sont plus difficiles, mais si vous les comprenez bien, ils constituent une excellente option en combinaison avec des tables imbriquées.
La raison pour laquelle ils ont une mauvaise réputation, en plus de la difficulté, est qu’il faut tenir compte de quelque chose de bizarre dans Outlook, sinon votre mise en page risque de se briser.
Colspan:
Outlook a un problème où si vous mettez un colspan dans la première ligne d'un tableau, il gâchera la largeur des lignes suivantes. La solution consiste à spécifier la largeur de la cellule dans la rangée supérieure, même s'il s'agit d'une rangée vide.
Voici un exemple:
<!-- the second row in this example will not respect the specified widths in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
<!-- here is the fix - note the empty row at the top enforces the specified width in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200">
</td>
<td width="400">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
Rangée:
Encore plus évité que colspan est rowspan. J'ai constaté qu'il pouvait afficher de manière plus cohérente que des tables imbriquées en fonction de votre public cible. Cela s'explique par le fait que les lignes (en particulier celles qui sont fractionnées) ne séparent pas autant que les tables lors du transfert du courrier électronique à partir d'Outlook en raison des balises <p class="msoNormal"> enveloppées par Outlook. Ces lacunes sont particulièrement inévitables si quelqu'un transmet votre courrier électronique à Gmail _.
Une chose à noter est que rowspan ne semble pas fonctionner avec Blackberry (ce que je ne considérerais pas comme un client majeur). Donc, comme pour tout ce qui se trouve dans les courriels html, vous devez jouer au jeu des pourcentages et décider où vous voulez le moins briser.
Un exemple de base de colspan et rowspan travaillant ensemble:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr><!-- hidden row to establish widths in Outlook -->
<td width="200">
</td>
<td width="200">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#333333">...
</td>
<td width="200" height="400" rowspan="2" bgcolor="#444444">...
</td>
</tr>
<tr>
<td width="200" height="400" rowspan="2" bgcolor="#555555">...
</td>
<td width="200" height="200" bgcolor="#666666">...
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#777777">...
</td>
</tr>
</table>
Pour réaliser quelque chose de similaire à ceci sans rowspan/colspan, vous devez diviser les cellules du tableau rectangulaire en petits carrés. Imaginez si la cellule en haut à droite était une image recouvrant l'en-tête voir cette question pour un exemple concret . Si vous deviez éviter les lignes de rangée et diviser l'image du logo horizontalement en deux cellules empilées, cela deviendrait problématique lorsque Outlook le ferait de manière mOanormale. Personne n'aime une couture à leur image.
Dans les e-mails html, vous pouvez toujours scinder les images verticalement sans risque de jointures, mais vous devez en règle générale éviter de scinder une image horizontalement. Rowspan permet d'éviter ce problème dans les scénarios où vous souhaitez superposer des images.
Une dernière remarque - Outlook a également le même problème couvrant avec rowspan que avec colspan. Vous devez définir la hauteur de vos lignes dans la première colonne pour que celle-ci respecte les hauteurs des lignes étendues suivantes. Voici un exemple }. Notez que la première cellule de chaque ligne est vide.
Je pensais juste que id ajouter un peu d’information à votre question
Colspan peut être utilisé mais je suggérerais contre. Chaque fois que je crée des emails (expérience de 6 mois), j'ai toujours utilisé des tables imbriquées. De plus, vous ne pouvez utiliser que les CSS en ligne dans les courriels, je serais donc très prudent en utilisant même la marge et le remplissage.
Un couple de choses que je fais sur chaque email.
Utilisez toujours ce code dans chaque image de votre page. Cela corrigera un espace gmail sous le bogue de l'image.
style="display:block"
Utilisez également border = "0" sur les liens d’image pour empêcher l’apparition d’une bordure bleue.
J'espère que ça aide!
Un autre conseil, en plus du style = "display: block", consiste à ajouter line-height: 0 avec une image dans - cela résout le bogue d'espacement des blancs impair dans Outlook 2007.
J'utilise tout le temps les colspans, mais aussi les tables de nidification - évitez les rangées de rangées - ce sont des cauchemars, et lorsque vous faites des tables de nid, ne vous énervez pas et ne faites pas un nid à 4/5 ou 6, je constate que ça commence à foirer.
Rowspans et Colspans vont bien, mais je vous suggère fortement d'utiliser des tables imbriquées. Vous aurez des lignes de code supplémentaires, cependant, cela vous évitera des interruptions sur d'autres clients de messagerie.