L’intégration HTML d’un emailing s’appuie sur une technique relativement ancestrale faite d’utilisation de tableaux (<table>). Je sais, c’est archaïque. Mais c’est comme ça mon bon Môssieur ! Ces tableaux sont composés de cellules (<td> ou <th>) et de lignes (<tr>). Un peu comme un tableau Excel quoi…
Ces cellules et ces lignes peuvent être fusionnées. Tiens ! Là-aussi, comme sur un tableau Excel ! Quelle surprise !
Par « fusionner », nous pouvons aussi entendre comment les cellules doivent s’étendre ou « couvrir » plusieurs lignes ou colonnes. C’est intéressant d’ailleurs d’utiliser le terme « couvrir », puisque C’EST LA TRADUCATION MÊME du verbe « to span » : c’est fou non ! Cette introduction étant faite, passons au principal sujet.
Table des matières
C’est quoi rowspan et colspan ?
Ces attributs HTML permettent de fusionner des cellules ou des lignes dans un tableau HTML. Il suffit de décortiquer les termes et de les traduire pour bien les comprendre : colspan = col + span = collonne + couverture. rowspan = row + span = ligne + couverture. C’est tout bête mais il fallait y penser !
colspan
L’attribut colspan indique donc le nombre de colonnes qu’une cellule (<td>) de tableau (<table>) doit couvrir. Cet attribut est utile lorsque vous souhaitez qu’une cellule s’étende horizontalement sur plusieurs colonnes. Tiens, par exemple, dans un tableau (<table>) avec deux lignes (<tr>) faites de trois colonnes (<td>), vous pouvez définir que la première ligne ne contient qu’une seule cellule.
<table>
<tr>
<td colspan="3">Three cells merged into one / Trois cellules fusionnées en un seule</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>rowspan
L’attribut rowspan indique, pour sa part, le nombre de lignes qu’une cellule (<td>) de tableau (<table>) peut couvrir. Cet attribut est utile si vous souhaitez qu’une cellule s’étende verticalement sur plusieurs lignes. Par exemple, si vous voulez qu’une cellule (<td>) s’étende sur deux lignes (<tr>), vous pouvez définir que la cellule couvre deux lignes.
<table>
<tr>
<td rowspan="2">A cell spans two rows vertically / une cellule couvre deux lignes verticalement</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>Jusque là, tout va bien ? Boooooonn… Alors ne nous arrêtons pas en si bon chemin.
Les colspan et rowspan dans un email
Pourquoi les utilise-t-on ?
Comme je le disais en introduction : les emails sont quasiment tout le temps développés sous forme de tableaux (<table>) pour en garantir le bon affichage sur la majorité des environnements d’ouverture. Ça peut sembler un peu « old school » lorsqu’on pense aux avancées en matière de conception web avec flexbox, grid, etc… MAIS !
- Le développement d’email n’est clairement pas la même chose que le développement de page web.
- C’est la méthode la plus efficace pour s’assurer d’une bonne interprétation et d’un même rendu par la majorité des clients de messagerie, dont beaucoup ont des capacités de support et de rendu limitées.
Il y a peu (et c’est peut-être toujours le cas), sur les plateformes Adobe Photoshop ou Adobe Fireworks, lorsque les découpes d’une maquette emailing étaient faites directement sur l’outil (via l’outil « Tranches » par exemple), il était possible d’exporter automatiquement le code HTML.
Si l’option « exportation en tableaux imbriqués » n’était pas sélectionnée, la plateforme découpait la maquette en un seul tableau, fait d’une première ligne avec de nombreuses colonnes, plus ou moins larges et remplies de spacer. Les autres lignes n’étaient alors qu’une succession de cellules (<td>) affublées, ou non, de colspan et rowspan.
<table>
<tr>
<td><img src="spacer.gif" width="50" height="1"></td>
<td><img src="spacer.gif" width="100" height="1"></td>
<td><img src="spacer.gif" width="20" height="1"></td>
<td><img src="spacer.gif" width="5" height="1"></td>
<td><img src="spacer.gif" width="40" height="1"></td>
<td><img src="spacer.gif" width="50" height="1"></td>
<td><img src="spacer.gif" width="170" height="1"></td>
<td><img src="spacer.gif" width="100" height="1"></td>
<td><img src="spacer.gif" width="20" height="1"></td>
<td><img src="spacer.gif" width="5" height="1"></td>
<td><img src="spacer.gif" width="40" height="1"></td>
</tr>
<tr>
<td colspan="5"><h1>Title</h1>
<h2>Subtitle</h2>
<p>Paragraph</p></td>
<td colspan="6"><img src="visual_01.jpg" width="385"></td>
</tr>
</table>
Ahhhh ça pique, ça pique ! C’était la méthode à l’ancienne et, pour être honnête, la méthode des flemmards ! Vade retro, mécréant !
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
Cependant, il n’est pas rare de croiser encore des colspan et rowspan de nos jours. Et c’est légitime, en un sens ! Prenons l’exemple ci-dessous.
Pour développer ce bloc fait de typographies particulières, d’arrondis, d’image de fond, je pourrai être tenté de découper ce visuel de la façon suivante :
colspan avec la valeur 3Sont-ils bien supportés ?
Oui ! Ces deux attributs sont très bien supportés, par l’intégralité des environnements d’ouverture. Et je prends le risque de l’affirmer, bien que rien ne le confirme sur caniemail.com. Mais j’assume ! Faut-il pour autant les utiliser ? Je dis que non. Et j’assume aussi.
Pourquoi faut-il les éviter ?
Parce que cela nuit à la maintenabilité et à la lisibilité du code
Mettez vous à la place d’un intégrateur qui reprend le code HTML d’un email ou d’une newsletter que vous avez précédemment développé(e) à grands renforts de colspan et rowspan : il ouvre le code, décide de supprimer une cellule… et constate que tout est cassé ! Le pauvre… Pourquoi ? Parce que la cellule appartenait à une ligne (<tr>), soeur d’une autre ligne (<tr>) où un colspan était renseigné sur une cellule (<td>).
Car c’est là le début du problème : la valeur du colspan ou du rowspan renseignée doit être cohérent avec l’étendue souhaitée ! Vous ne pouvez pas dire dans une première ligne d’un tableau que votre seule cellule va couvrir l’étendue de trois cellules (via un colspan="3") si, dans votre seconde ligne (soeur de votre première ligne), il n’y a que deux cellules.
Car si j’affirme que les attributs colspan et rowspan sont supportés dans un email, j’affirme aussi sans peur que si les valeurs ne sont pas cohérentes, cela risque de créer de gros soucis : en gros, ça va casser de partout !
<!-- Issue with this HTML code: the cell in my first row spans three cells, but I only have two cells in my second row / Problème dans ce code HTML : la cellule de ma première ligne couvre trois cellules, mais je n'ai que deux cellules dans ma seconde ligne -->
<table>
<tr>
<td colspan="3">Trois cellules fusionnées en un seule / Three cells merged into one</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>Parce que cela nuit à la version responsive de l’email
Reprenons le design proposé plus haut.
Pour la version mobile de cet email, je veux ne conserver que le titre « Opening of our new restaurant ». Comme vous le savez dans doute, je peux faire disparaître les trois cellules en-dessous en les ciblant avec une class et en leur appliquant un display:none. Ou en ciblant simplement la ligne (<tr>) contenant les trois cellules, et en y appliquant la même méthode. Soit.
Mais mon image du titre, elle, je ne peux pas lui enlever l’attribut colspan ! Autant avec les media queries, je peux changer des valeurs de propriétés CSS, mais en aucun cas des valeurs d’attributs HTML ! Que va-t-il alors se passer ? Bon, d’après les tests, pas grand chose, mais quand même : le code HTML n’est plus valable ! On a une éthique oui ou zut ?
Comment se passer des colspan et rowspan ?
C’est plutôt simple. Et tout réside d’ailleurs dans une bonne pratique dans l’intégration HTML pour email : l’utilisation des tableaux imbriqués. Insérer un (ou des) tableau(x) dans un (ou des) tableau(x). Je procèderai donc ainsi pour le visuel vu juste avant :
<table>
<tr>
<td><img src="myfirstvisual_thetitle"></td>
</tr>
<tr>
<td><table>
<tr>
<td><img src="mysecondvisual_firstbutton"></td>
<td><img src="mythirdvisual_discount"></td>
<td><img src="myfourthvisual_secondbutton"></td>
</tr>
</table></td>
</tr>
</table>
J’espère que ça vous semble plus clair ainsi ? Et si vous avez scrollé directement à la fin de l’article, la conclusion est la suivante : oubliez colspan et rowspan, préférez les tableaux imbriqués ! Ok, ça alourdit un peu le code HTML… Mais c’est plus propre, plus maintenable (ça se dit ?), plus lisible, et plus secure. Et si vous vous posez d’autres questions, allez donc faire un tour sur notre guide sur l’intégration HTML pour email !
