I have an email signature which consists of a simple table (one row, two columns). The first column has a logo, the second column has all the contact details.
I would like to make it responsive so that on small devices the logo is shown above, and the contact details below (so effectively the columns turn into rows). Currently, on small devices, the table gets squeezed so that the contact details are not readable.
<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<div class="m_159975109461180827gmail_signature">
<div dir="ltr">
<div dir="ltr">
<table style="color: #000000; font-family: 'Times New Roman'; font-size: medium; background: none; margin: 0px; padding: 0px; border: 0px initial initial;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: arial, sans-serif; margin: 0px; border-top: 0px; border-right-width: 3px; border-right-color: #d2ac67; padding: 0px 7px 0px 0px; vertical-align: middle;" valign="top"><img class="CToWUd" src="http://mywebsite.com/logo-small.png" alt="" /></td>
<td style="font-family: arial, sans-serif; margin: 0px; padding: 0px 0px 0px 12px;">
<table style="background: none; margin: 0px; padding: 0px; height: 93px; border: 0px initial initial;" border="0" width="300" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; padding-bottom: 5px; color: #d2ac67; font-size: 14px;" colspan="2"><strong>My Name</strong></td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; color: #333333; font-size: 12px;" colspan="2"><span style="color: #d2ac67;">My position • Name of the company</span></td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">p:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top"><a style="color: #1155cc;" href="tel:+44%2020%207099%206646" target="_blank">+44 1234566</a> <span style="color: #d2ac67;">m: </span><a style="color: #1155cc;" href="tel:+44%207491%20044801" target="_blank">+44 1</a>234567</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">a:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">some addresss</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">w:</td>
<td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">link to the website</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Thank you all in advance for your help/guidance.
If you want to use a table create another table with your rows as columns and assign each table a class. Use css to hide and show the different tables using media calls.
Related
I've tried the code below to fold on smaller screens and cut signature in half using float:left command on each of but it doesn't work. I need to make this footer as it is on larger screens and fold in half on smaller ones :/
<table style="width: 450px;" width="450" cellspacing="0" cellpadding="0">
<tbody style="vertical-align: top; position: fixed;">
<br></br>
<tr>
<td style="border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: bottom; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="bottom"><strong><span style="font-family: Verdana, sans-serif; font-size: 14pt; color: #b50015;">Natalia Gułaś</span></strong><br /><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #444444;"><span style="font-family: Verdana, sans-serif; color: #2c2c2c;">Dyrektor Zarządzający</span></span></td>
<td style="border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: top; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="top"><img style="width: 179px; height: auto; border: 0;" src="https://lp.gimmik.net/upload/logo.jpg" alt="Logo" width="179" border="0" /></td>
</tr>
<tr>
<td style="width: 60%; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="60%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong>tel.:</strong> +48 882 143 502<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong> email:</strong> natalia#gimmik.net </span></td>
<td style="width: 40%; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="40%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">Gimmik.net<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">ul. Mełgiewska 9E<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">20-209 Lublin</span></td>
</tr>
<tr>
<td style="width: 60%; vertical-align: top; padding: 10px 0 0 0;" valign="top" width="60%"><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/fb.png" alt="facebook icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/yt.png" alt="youtube icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/it.png" alt="instagram icon" width="16" border="0" /> </span></td>
<td style="width: 40%; vertical-align: top; padding: 10px 0 0 0;" valign="top" width="40%"><span><strong><a style="text-decoration: none;" href="http://www.gimmik.net" target="_blank" rel="noopener"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #3b4908;"><span style="font-family: Verdana, sans-serif; color: #b50015;">www.gimmik.net</span></span></a></strong></span></td>
</tr>
</tbody>
</table>
To achieve this you need to create two separate tables—one for each side—and float them both. You'll also need to hard-set heights on some cells to keep things aligned.
<table width="225" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<td style="height: 58px; border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: bottom; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="bottom"><strong><span style="font-family: Verdana, sans-serif; font-size: 14pt; color: #b50015;">Natalia Gułaś</span></strong><br /><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #444444;"><span style="font-family: Verdana, sans-serif; color: #2c2c2c;">Dyrektor Zarządzający</span></span></td>
</tr>
<tr>
<td style="height: 54px; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="60%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong>tel.:</strong> +48 882 143 502<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong> email:</strong> natalia#gimmik.net </span></td>
</tr>
<tr>
<td style=" vertical-align: top; padding: 10px 0 0 0;" valign="top" width="60%"><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/fb.png" alt="facebook icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/yt.png" alt="youtube icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/it.png" alt="instagram icon" width="16" border="0" /> </span></td>
</tr>
</table>
<table width="225" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<td style="height: 58px; border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: top; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="top"> <img style="width: 179px; height: auto; border: 0;" src="https://lp.gimmik.net/upload/logo.jpg" alt="Logo" width="179" border="0" /></td>
</tr>
<tr>
<td style="height: 54px; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">Gimmik.net<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">ul. Mełgiewska 9E<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">20-209 Lublin</span></td>
</tr>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0;" valign="top"><span><strong><a style="text-decoration: none;" href="http://www.gimmik.net" target="_blank" rel="noopener"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #3b4908;"><span style="font-family: Verdana, sans-serif; color: #b50015;">www.gimmik.net</span></span></a></strong></span></td>
</tr>
</table>
html siganture keeps cutting off
I have 0 html experience but can edit code if its straightforward enough.
The top of my logo/social media icons keeps cutting off on outlook. They don't cut off when I open the email in a browser or through a mobile device. Is there a way to edit the code so that it doesn't cut off? I tried adding padding to the top but it doesn't work. Please help.
Code
<table width="335" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td style="padding-top: 0; padding-bottom: 0; padding-left: 0px; padding-right: 0;"> <table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td colspan="2" style="padding-bottom: 2px; color: #515151; font-size: 15px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b>Ryan Milliman </b> </td> </tr> <tr> <td colspan="2" style="padding-bottom: 6px; color: #515151; font-size: 14px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b> <small style="color:#515151;" >Director of Investor Relations</small></b> </td> </tr> <tr> <td colspan="2" style="color: #333333; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;line-height:0px;"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >O:</b> (800) 735- 9973 </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">M:</b> (760) 793- 2933 </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >W:</b> www.primior.com </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">E:</b> ryan.milliman#primior.com </td> </tr> <tr> <td colspan="2" style="color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;"> <b style="color:#9d1924;">A:</b> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px; padding-top:7px;line-height:15px;"> <a href="http://www.primior.com"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/logo.png" width="155" height="20" alt="" /> </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px;padding-top:7px;line-height:15px;text-align:right;"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/fb.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/tw.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/lin.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/ins.png"> </td> </tr> </table> </td> </tr> </table>
Outlook sometimes ignores the width/height of an element.
Try adding width and height to your td where the Image is located.
How can I have an image (little arrow on the right) set next to an anchor tag <a> and keep them both aligned vertically and horizontally. I've been trying this in multiple ways but came across errors with every method I tried. either the <a> tag wont work (not clickable) in html emails or the arrow would be outside the clickable area. I only need one of these following codes .Here's some what Iv'e tried:
First code: the problem here is: if the user clicked on the arrow it wont response, because it's not inside the <a> tag, but this is working
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
</td>
<td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
<td><img src="http://via.placeholder.com/5/007cb0" width="5" /></td>
</tr>
</table>
</td>
</tr>
</table>
Second code: I couldn't get the text vertical aligned within the <td>
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td height="50" align="left" style="text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: 100% !important;">
<a style="height:100%;font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer; display: block">Go to Link <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Third code The problem here is: It didn't work in any email client and the link is not clickable.
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;">
<tr>
<td>
<a style="border: 1px solid red; padding: 20px;display: block; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<tr style="font-size: 16px; text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<td align="left" style="text-decoration: none; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
GET VERSATILE
</td>
<td align="right" style="text-align: center; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15" /></td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Summaries:
I need this <a> tag to have an arrow next to it and to be Clickable all around the blue area.
Thanks for the help.
This is working in most of email clients, and even if I changed the text inside the anchor tag.
hope that would help.
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0;font-family: Arial, Helvetica, sans-serif;font-weight: bold;">
<tr>
<td class="links" style="padding: 10px; color: #ffffff; vertical-align: middle; text-align: center; font-family: Arial, Helvetica, sans-serif;font-weight: bold;"><a style="text-align: center; display: block;cursor: pointer;font-family: Arial, Helvetica, sans-serif; color: #ffffff !important; text-decoration: none; font-size: 16px; line-height: 20px; font-weight: bold;" pm-link="landingpage1" pm-link-default-url="global_landingpage">GO TO LINK<img src="http://via.placeholder.com/15/007cb0" width="15" alt="" /><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;padding: 0 0 4px 0;max-width: 20px" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
Not sure if you have thought of this but it should be as easy as adding an a tag around the image for the first question.
Try this below and see if it works for you. I have just added your a tag from the sibling td just to give you an idea.
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
</td>
<td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
<td><a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;"><img src="http://via.placeholder.com/5/007cb0" width="5" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
Hope this answer works for you.
Edited
Now that I know you're making a button that aligns to the right, I have a better approach for you.
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td><!-- The button code -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background: #007cb0; text-align: center;">
<a href="#" target="_blank" style="background: #007cb0;
border: 15px solid #007cb0; font-family: sans-serif; font-size: 16px;
line-height: 110%; text-align: center; text-decoration: none !important;
display: block; font-weight: 700;"><span style="color:#ffffff;"> Go to Link <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
</span></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
This code will right-align and look presentable in every email client. It does not quite look perfect in Outlook. To do that, you need to add a spacer table specifically for Outlook.
I am deleting the older post and code, but honestly, it's the same thing I posted yesterday with added which gives you a reliable form of padding.
Could you tell why are you using table formatting for making button-styled links? Is that specific for html-email? This seems easier and after some customizing will give the same look:
a {
display: inline-block;
border: 1px solid black;
padding: 10px;
}
Link <span> ❯</span>
OK then just add/adjust margin and padding to make clickable area larger
a{
display: inline-block;
position: relative;
z-index: 1;
padding: 1em;
margin: -1em;
}
td img{
padding-bottom: 5px;
}
https://jsfiddle.net/33q09cy0/
and add the image inside the a tag reference.
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
<img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
</td>
I have made an email signature to be used for outlook, but when it is sent in the email, the format is changing. The spaces between each section increase. How do I code this to ensure that the format does not change?
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table class="container" style="margin:0;background:#fff;border-collapse:collapse;border-spacing:0;margin:0;padding:0;text-align:inherit;width:580px; box-style: borderbox; position: relative;">
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<p style=" color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 12pt; font-weight: bold; padding: 0;">Delia Bellaby</p>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><img src="https://s19.postimg.org/95hmbn6ar/design_Make_Logo.jpg"></td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><p style="color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 12pt; font-weight: bold">Architect</p></td>
</tr>
<tr>
<td><p style="color: #9C9E9E; font-family: 'Arial', sans-serif; font-size: 10pt; font-weight: bold; margin-top: 10px;">Mobile: 022 362 6916 </p></td>
</tr>
<tr>
<td><p style="text-align: left; color: #9C9E9E; font-family: 'Arial', sans-serif; font-size: 10pt; border-top: 2px solid #00b3b3; padding-top: 10px; "><strong style="color:#00b3b3;">website:</strong> http://www.designmake.co.nz<br><strong style="color:#00b3b3;">email:</strong> delia#designmake.co.nz</p></td>
</tr>
<tr>
<td>
<span style="text-align: left; color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 10pt; ">
<img style="color: #3399ff; height: 30px; width: 30px;" src="https://s19.postimg.org/6begy7bub/Facebook-_Home-_Logo.png"></span>
</td>
</tr>
</table>
</body>
</html>
I want to adjust vertical line height as per the content of <td> tag.
<table class="bg-color1" style="background-color:#ffffff;border:none;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; " align="center" border="0" cellpadding="0" cellspacing="0" width="600" >
<tbody>
<tr>
<td width="28%" valign="top" style=" border: none;mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-top: 20px; padding-left:70px; text-align: center; ">
<span style="text-align: center">8:30 - 9:30</span>
</td>
<td width="7%" valign="top" style=";mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-left: 70px; padding-top: 10px; ">
<hr style="height: 20px;">
</td>
<td width="65%" style="mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0px; padding-left: 10px; padding-top: 10px; text-transform: uppercase; text-align: left; ">
Tea, Registration, Networking
</td>
</tr>
<tr style="border: thin black solid;">
<td width="28%" valign="top" style=" border: none;mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-top: 20px; padding-left:70px; text-align: center; ">
<span style="text-align: center">8:30 - 9:30</span>
</td>
<td width="7%" valign="top" style=";mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 0px; padding-left: 70px; padding-top: 10px; ">
<hr style="height: 20px;">
</td>
<td width="65%" valign="top" style="mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; text-transform: uppercase; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0px; padding-left: 10px; padding-top: 10px; text-transform: uppercase; text-align: left; ">
Tea, Registration, Networking
Tea, Registration, Networking
Tea, Registration, Networking
</td>
</tr>
</tbody>
<tr>
<td height="40"></td>
</tr>
</table>
Now What I want is when the content of third <td> changes then as per the changes the height of vertical line and the time of 1st <td> should be adjusted to center of the <td> tag.
I want output as per the image.
PS : As I am making HTML Email , I can't use <div> , position property. I have to stick to table and inline css only.
Thank You.
Replacing padding-top: xx; in the first TD's with vertical-align: middle; seems to work.
fiddle
https://jsfiddle.net/Hastig/j3qy132b/1/
I played around a bit further, if it's of use to anyone..
https://jsfiddle.net/Hastig/j3qy132b/3/
A faint border-left instead of boxshadow
https://jsfiddle.net/Hastig/j3qy132b/4/