html签名垂直拆分tr

时间:2016-12-13 11:18:54

标签: html html-table html-email signature

我正在制作一个包含html和表格的电子邮件签名。我差不多了,但最后一点只需要一只手。

我希望社交图标在右边。我附上了截图,这里是代码。

<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

1 个答案:

答案 0 :(得分:0)

您需要将右侧td拆分为2行。这是更正后的代码。

<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>