html signature verticalement split tr

Je suis en train de créer un message électronique avec html et tables. Je suis presque là mais j'ai juste besoin d'une main avec le dernier morceau.html signature verticalement split tr

Je veux les icônes sociales à droite. J'ai joint des captures d'écran et voici le code.

<table> <tr> <td valign="top" style="padding:0 8px 0 0;"><img src="" style="max-height:80px" width="76" height="80"></td> <td style="font-size:80%;font-family:Arial;padding:0; min-width:240px;" valign="top"> <div style="color:#111111;font-size:1.4em;">Name</div> <span style="color:#111111;"><strong style="color:#111111;font-size:1em">Director</strong>,</span> <span style="color:#111111;font-size:1em;">Company</span> <div style="line-height:0.4em;font-size:0.4em;"> &nbsp; </div> <div><span style="color:#00c4b4;font-size:1em;">mobile:&nbsp;</span><span style="color:#111111;font-size:0.9em;">07777777777</span></div> <div><span><a href="https://www." target="_blank" style="color:#00c4b4;text-decoration:none;font-size:1em;">www.website.com</a></span></div> </td> <td style= "border-left:2px solid;padding:0 0 3px 6px;width:42px;border-color:#00c4b4;"valign="middle"> </td> </tr>   <tr> 
     <td><img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/072/landscape/facebook-5-128_1_.png" style="max-height:40px" width="40" height="40"></td> 
    </tr> 
    <tr> 
     <td><img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/073/landscape/linkedin-5-128_1_.png" style="max-height:40px" width="40" height="40"></td> 
    </tr></table>

how i want it to look

Source

2016-12-13 user3080228

https://jsfiddle.net/gvvL7f4p/ Réduire écart entre les images et les frontières, définir la largeur souhaitée td précédente (avec bordure verte, il est trop large maintenant, 42px), et aligner les images gauche .. . Par exemple comme ceci: https://jsfiddle.net/gvvL7f4p/1/ – sinisake

génial merci beaucoup! – user3080228

Vous devez diviser droit td 2 lignes. Voici le code corrigé.

<table> 
<tr> 
<td rowspan="2" valign="top" style="padding:0 8px 0 0;"><img src="" style="max-height:80px" width="76" height="80"></td> 
<td rowspan="2" valign="top" style="font-size:80%;font-family:Arial;padding:0; min-width:240px; border-right:2px solid; border-color:#00c4b4;"> 
<div style="color:#111111;font-size:1.4em;">Name</div> 
<span style="color:#111111;"><strong style="color:#111111;font-size:1em">Director</strong>,</span> 
<span style="color:#111111;font-size:1em;">Company</span> 
<div style="line-height:0.4em;font-size:0.4em;"> &nbsp; </div> 
<div> 
<span style="color:#00c4b4;font-size:1em;">mobile:&nbsp;</span> 
<span style="color:#111111;font-size:0.9em;">07777777777</span> 
</div> 
<div> 
<span> 
<a href="https://www." target="_blank" style="color:#00c4b4;text-decoration:none;font-size:1em;">www.website.com</a> 
</span> 
</div> 
</td> 
<td style= "padding:0 0 3px 6px;width:42px;"valign="middle"> 
<img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/072/landscape/facebook-5-128_1_.png" style="max-height:40px" width="40" height="40"> 
</td> 
</tr> 
<tr> 
<td style= "padding:0 0 3px 6px;width:42px;"valign="middle"> 
<img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/747/073/landscape/linkedin-5-128_1_.png" style="max-height:40px" width="40" height="40"> 
</td> 
</tr>   
</table>

Source

2016-12-13 11:52:21 Harsha

html signature verticalement split tr

Répondre

Questions connexes