'Email signature html tables - how do I get the layout I want?
I have a background in graphic design and I need to design a responsive email signature with an imagine to the left, then on the right column the name, below that the job title and below that the contact details beside each other and below that the icon links.
I'm struggling to get this: phone number | email address (linked seperately)
Here's what I want it to look like
How would the code change? I've been stuck on this for a while.
Here's an example of my current code with the details stacked instead:
<table style="
background-color: #ffffff;
font-family: 'Urbanist Regular';
text-align: left;
color: #000000;
font-size: 14px;
line-height: 21px;
padding: 10px 0px;">
<tbody>
<!-- 4. The Logo -->
<tr style="font-family: 'Roboto Slab',">
<td rowspan="5" style="width:30%; padding-left: 20px"><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61f8f92e2c3842b65d06be34_Teacup-Girl.gif" height="130" width="130"></a></td>
<td rowspan="5" style="width:1px; height: 100px;"></td>
<!-- 5. The Contact Details -->
<td colspan="5" style="font-size: 22px; color: #161616; font-family:'Roboto Slab',Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding-left: 15px; padding-bottom: 3px">NAME SURNAME</td>
</tr>
<tr>
<td colspan="5" style="font-size: 17px; color: #32B8BB; font-family:'Roboto Slab',Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding-left: 15px; padding-bottom: 2px" >Creative Team Lead</td>
</tr>
<tr>
<td colspan="5" style="padding-left: 15px; font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';"> <a href="tel:" style="text-decoration: none; color:#161616;">+12 34 567 8910</a></td>
</tr>
<tr>
<td colspan="5" style="font-family:'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding-left: 15px; padding-bottom: 4px">
<a href="" style="text-decoration: none; color:#161616;">[email protected]</a></td>
</tr>
<!-- 6. Social Icons -->
<tr>
<td style="padding-right: 2px; width:28px; height:28px; padding-left: 15px"><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee7fe53f6a680535effd5e_Icons-Square-03.jpg" width="28" height="28"></a></td>
<td style="padding-right: 2px; width:28px; "><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee7fe4ef420634cee3424b_Icons-Square-02.jpg" width="28" height="28"></a></td>
<td style="padding-right: 2px; width:28px"><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee8399cff0471925fc9d71_Icons%20Square-04.png" width="28" height="28"></a></td>
<td></td>
</tr>
</tbody>
</table>Solution 1:[1]
Web design has moved on from using tables for layouts. Consider learning methods like flexbox or grid.
The solution to your question is simple: just put the email and phone number in the same <tr>.
<a href="tel:">+12 34 567 8910</a> | <a href="">[email protected]</a>
<table style="
background-color: #ffffff;
font-family: 'Urbanist Regular';
text-align: left;
color: #000000;
font-size: 14px;
line-height: 21px;
padding: 10px 0px;">
<tbody>
<!-- 4. The Logo -->
<tr style="font-family: 'Roboto Slab',">
<td rowspan="5" style="width:30%; padding-left: 20px"><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61f8f92e2c3842b65d06be34_Teacup-Girl.gif" height="130" width="130"></a></td>
<td rowspan="5" style="width:1px; height: 100px;"></td>
<!-- 5. The Contact Details -->
<td colspan="5" style="font-size: 22px; color: #161616; font-family:'Roboto Slab',Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding-left: 15px; padding-bottom: 3px">NAME SURNAME</td>
</tr>
<tr>
<td colspan="5" style="font-size: 17px; color: #32B8BB; font-family:'Roboto Slab',Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding-left: 15px; padding-bottom: 2px" >Creative Team Lead</td>
</tr>
<tr>
<td colspan="5" style="padding-left: 15px; font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';"> <a href="tel:" style="text-decoration: none; color:#161616;">+12 34 567 8910</a> | <a href="" style="text-decoration: none; color:#161616;">[email protected]</a></td>
</tr>
<!-- 6. Social Icons -->
<tr>
<td style="padding-right: 2px; width:28px; height:28px; padding-left: 15px"><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee7fe53f6a680535effd5e_Icons-Square-03.jpg" width="28" height="28"></a></td>
<td style="padding-right: 2px; width:28px; "><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee7fe4ef420634cee3424b_Icons-Square-02.jpg" width="28" height="28"></a></td>
<td style="padding-right: 2px; width:28px"><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee8399cff0471925fc9d71_Icons%20Square-04.png" width="28" height="28"></a></td>
<td></td>
</tr>
</tbody>
</table>Solution 2:[2]
Simply use this for that row. That'll work.
<td colspan="5" style="padding-left: 15px; font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';">
<a href="tel:" style="text-decoration: none; color:#161616;">+12 34 567 8910</a> |
<a href="" style="text-decoration: none; color:#161616;">[email protected]</a>
</td>
<table style="
background-color: #ffffff;
font-family: 'Urbanist Regular';
text-align: left;
color: #000000;
font-size: 14px;
line-height: 21px;
padding: 10px 0px;">
<tbody>
<!-- 4. The Logo -->
<tr style="font-family: 'Roboto Slab',">
<td rowspan="5" style="width:30%; padding-left: 20px"><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61f8f92e2c3842b65d06be34_Teacup-Girl.gif" height="130" width="130"></a></td>
<td rowspan="5" style="width:1px; height: 100px;"></td>
<!-- 5. The Contact Details -->
<td colspan="5" style="font-size: 22px; color: #161616; font-family:'Roboto Slab',Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding-left: 15px; padding-bottom: 3px">NAME SURNAME</td>
</tr>
<tr>
<td colspan="5" style="font-size: 17px; color: #32B8BB; font-family:'Roboto Slab',Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding-left: 15px; padding-bottom: 2px" >Creative Team Lead</td>
</tr>
<tr>
<td colspan="5" style="padding-left: 15px; font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';">
<a href="tel:" style="text-decoration: none; color:#161616;">+12 34 567 8910</a> |
<a href="" style="text-decoration: none; color:#161616;">[email protected]</a>
</td>
</tr>
<!-- 6. Social Icons -->
<tr>
<td style="padding-right: 2px; width:28px; height:28px; padding-left: 15px"><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee7fe53f6a680535effd5e_Icons-Square-03.jpg" width="28" height="28"></a></td>
<td style="padding-right: 2px; width:28px; "><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee7fe4ef420634cee3424b_Icons-Square-02.jpg" width="28" height="28"></a></td>
<td style="padding-right: 2px; width:28px"><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee8399cff0471925fc9d71_Icons%20Square-04.png" width="28" height="28"></a></td>
<td></td>
</tr>
</tbody>
</table>Solution 3:[3]
Web (HTML) design is way ahead from Email (HTML) design, think on Email design like you are working in the '90s, and mostly if you want your email signature to be multiplatform, this is to look close to the original design on most email clients, hence continue using table layout instead of any of the nice CSS technologies we have nowadays (flexbox, grid).
The other option is just to work with an image of the signature and attach it to the email, this way you'll get everything what and how you are looking for, but this won't be too fancy.
Some remarks:
- try not using custom fonts, it won't look the same on different email clients
- try using tools like https://caniuse.email/ to check if the CSS / HTML works on the email client you are trying to target;
.text-cell { padding-left: 15px }
.name { font-size: 22px; color: #161616; padding-bottom: 3px; }
.title { font-size: 17px; color: #32B8BB; padding-bottom: 2px }
.contact-details { text-decoration: none; color:#161616; }
.sm-icon { padding-right: 2px; width:28px; height:28px; border: 0; }<!DOCTYPE html>
<html lang="en">
<style>
</style>
<body>
<table style="
background-color: #ffffff;
text-align: left;
color: #000000;
font-size: 14px;
line-height: 21px;
padding: 10px 0px;">
<tbody>
<tr>
<!-- 4. The Logo -->
<td rowspan="4" style="width:30%; padding-left: 20px"><a href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61f8f92e2c3842b65d06be34_Teacup-Girl.gif" height="130" width="130"></a></td>
<!-- 5. The Contact Details -->
<td class="text-cell name">NAME SURNAME</td>
</tr>
<tr>
<td class="text-cell title">Creative Team Lead</td>
</tr>
<tr>
<td class="text-cell">
<a href="tel:" class="contact-details">+12 34 567 8910</a> |
<a href="" class="contact-details">[email protected]</a>
</td>
</tr>
<!-- 6. Social Icons -->
<tr>
<td class="text-cell">
<a class="sm-icon" href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee7fe53f6a680535effd5e_Icons-Square-03.jpg" width="28" height="28"></a>
<a class="sm-icon" href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee7fe4ef420634cee3424b_Icons-Square-02.jpg" width="28" height="28"></a>
<a class="sm-icon" href=""><img src="https://uploads-ssl.webflow.com/5f1804fe75d94007d2a35707/61ee8399cff0471925fc9d71_Icons%20Square-04.png" width="28" height="28"></a>
</td>
</tr>
</tbody>
</table>
</body>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | MrSandyWilly |
| Solution 2 | Saikat Roy |
| Solution 3 | ecedenyo |