For some time I've been developing this simple HTML code to use it as my signature email. Recently I've add the .gif photo and links to make it look better. I can't put the Instagram icon and the WhatsApp icon side by side, I've tried a lot of things on the internet, but didn't managed to make it.
Here's the code for my HTML signature.
this is a screenshot of my signature
<table cellspacing="0" cellpadding="0" border="0" style="width: 590px;">
<tbody><tr>
<td style="border-right: 2px solid #a9a9a9; padding-right: 0px; vertical-align:middle" valign="middle"><img id="BeattorLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Gif-Assinatura-do-Email-2.gif" height="150px" walt="Beattor Comunicacao" style="display: block"></td>
<td style="vertical-align: middle; padding-left: 10px;">
<table cellspacing="0" cellpadding="1" border="0">
<tbody><tr>
<td style="font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">
<font style="font-weight: bold; font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">Thiago Dam</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 5px; font-weight: bold; font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">
<font style="font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">CEO e Diretor Comercial</font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana">Site: beattor.com.br</font></td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana">Email: thiago.dam#beattor.com.br</font></td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana">Contato: <font style="color: #333333; font-size: 10pt; font-family: Verdana">(21) 96407-9707</font></td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana"> <font style="color: #333333; font-size: 10pt; font-family: Verdana"></font></td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;"><img id="InstagramLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Instagram-Logo-Beattor-Comunicacao.png" height="30px" walt="Instagram da Beattor" style="display: block">
</td>
</tr>
<tr>
<td style=" font-family: Verdana; font-size: 10pt;"><img id="WhatsApp Logo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/WhatsApp-Logo-Beattor-Comunicacao.png" height="30px" walt="WhatsApp da Beattor" style="display: block">
</td>
</tr>
</tr>
</tr>
</tbody>
</table>
If you want both your social icons on the same line, one way of doing it would be to firstly remove the closing row </tr>/ opening new line <tr> between them (I've done so in the snippet. After that, float your icons left in the social icon tds (add float:left; into your style with the font-size and family) and then you should be good to go. I added a small margin-left (10px) to the whatsapp one to put a small space between them. I also removed the 100px padding from the instagram.
Hope this helps!
<table cellspacing="0" cellpadding="0" border="0" style="width: 590px;">
<tbody>
<tr>
<td style="border-right: 2px solid #a9a9a9; padding-right: 0px; vertical-align:middle" valign="middle">
<img id="BeattorLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Gif-Assinatura-do-Email-2.gif" height="150px" walt="Beattor Comunicacao" style="display: block">
</td>
<td style="vertical-align: middle; padding-left: 10px;">
<table cellspacing="0" cellpadding="1" border="0">
<tbody>
<tr>
<td style="font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">
<font style="font-weight: bold; font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">Thiago Dam</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 5px; font-weight: bold; font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">
<font style="font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">CEO e Diretor Comercial</font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">Site: beattor.com.br</font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">Email: thiago.dam#beattor.com.br</font>
</td>
</tr>
<tr>
<td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">Contato:
<font style="color: #333333; font-size: 10pt; font-family: Verdana">(21) 96407-9707</font>
</td>
</tr>
<tr>
<td style="padding-right: 50px; font-family: Verdana; font-size: 10pt;">
<font style="color: #333333; font-size: 10pt; font-family: Verdana">
<font style="color: #333333; font-size: 10pt; font-family: Verdana"></font>
</td>
</tr>
<tr>
<td style="font-family: Verdana; float:left; font-size: 10pt;">
<img id="InstagramLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Instagram-Logo-Beattor-Comunicacao.png" height="30px" walt="Instagram da Beattor" style="display:block; ">
</td>
<td style="font-family: Verdana; margin-left:10px; float:left; font-size: 10pt;">
<img id="WhatsApp Logo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/WhatsApp-Logo-Beattor-Comunicacao.png" height="30px" walt="WhatsApp da Beattor" style="display:block;">
</td>
</tr>
</tr>
</tr>
</tbody>
</table>
Related
I'm making an html email template, it's my first time, I have a design to respect. I'm really struggling with the table layout.
I have this layout.
Like you see, when the text is big, it makes the rows not aligned.
What changes I should make to fix this?
Here's my code of only two cards:
<table class="table_scale" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: separate;
border-spacing: 30px;
*border-collapse: expression('separate', cellSpacing='30px');">
<tr>
<td style="background-color: #fff; padding: 20px; border-radius: 20px;">
<table style="border-collapse: separate;border-spacing: 0 10px;">
<tr>
<td style="background-color: #0C49F6; font-style: normal;
font-weight: 500;
font-size: 25px;
color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
text-align: center;">
-34% de réduction
</td>
</tr>
<tr>
<td style="font-style: normal;
font-weight: 700;
font-size: 20px;
color: #1B0F66;">
E-mail marketing
</td>
</tr>
<tr>
<td style="font-style: normal;
font-weight: 400;
font-size: 19px;
color: #8C8A8A;">
Crée votre Site Web personnalisé
</td>
</tr>
</table>
</td>
<td style="background-color: #fff; padding: 20px; border-radius: 20px;">
<table style="border-collapse: separate;border-spacing: 0 10px;">
<tr>
<td style="background-color: #0C49F6; font-style: normal;
font-weight: 500;
font-size: 25px;
color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
text-align: center;">
-33% de réduction
</td>
</tr>
<tr>
<td style="font-style: normal;
font-weight: 700;
font-size: 20px;
color: #1B0F66;">
Facebook Ads
</td>
</tr>
<tr>
<td style="font-style: normal;
font-weight: 400;
font-size: 19px;
color: #8C8A8A;">
Lancer votre publicité sur Facebook & Instagram
</td>
</tr>
</table>
</td>
</tr>
</table>
Changes done:
td made 50% width
Tables made 100% width
<table class="table_scale" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: separate;
border-spacing: 30px;
*border-collapse: expression('separate', cellSpacing='30px');">
<tr>
<td width="50%" valign="top" style="background-color: #fff; padding: 20px; border-radius: 20px;">
<table width="100%" style="border-collapse: separate;border-spacing: 0 10px;">
<tr>
<td style="background-color: #0C49F6; font-style: normal;
font-weight: 500;
font-size: 25px;
color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
text-align: center;">
-34% de réduction
</td>
</tr>
<tr>
<td style="font-style: normal;
font-weight: 700;
font-size: 20px;
color: #1B0F66;">
E-mail marketing
</td>
</tr>
<tr>
<td style="font-style: normal;
font-weight: 400;
font-size: 19px;
color: #8C8A8A;">
Crée votre Site Web personnalisé
</td>
</tr>
</table>
</td>
<td width="50%" style="background-color: #fff; padding: 20px; border-radius: 20px;">
<table width="100%" style="border-collapse: separate;border-spacing: 0 10px;">
<tr>
<td style="background-color: #0C49F6; font-style: normal;
font-weight: 500;
font-size: 25px;
color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
text-align: center;">
-33% de réduction
</td>
</tr>
<tr>
<td style="font-style: normal;
font-weight: 700;
font-size: 20px;
color: #1B0F66;">
Facebook Ads
</td>
</tr>
<tr>
<td style="font-style: normal;
font-weight: 400;
font-size: 19px;
color: #8C8A8A;">
Lancer votre publicité sur Facebook & Instagram
</td>
</tr>
</table>
</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 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.
I have created a small html signature but its inline, to the left and my boss needs it to be edge to edge instead of being inclined to the left. I need to fix this but i'm not very good at html so i'd love some advice, or better still somebody who can help me redo it, well i know its a walk in the park for anybody good at Html :-)
Here is the code.
<html>
<head>
</head>
<body style="-webkit-text-size-adjust: 100%;">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;" colspan="2">
<span style="text-align: left; color: #52524D; font-family: Helvetica, Arial, sans-serif; font-size: 13pt; font-weight: bold"><b>Mathenge Anthony</b> |<i><small> Intern</small></i></span>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 2px; padding-right: 0px;" colspan="2">
<img src="http://www.qualitexsolutions.com/img/works/systech.png" nosend="1" border="0" width="200" height="120" alt='Systech Africa' title='Systech Africa' />
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;" colspan="2"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> 1st Floor Mayfair Business Centre, Parklands Road, Westlands <font size="1" color="#B9B9B9"><br></font> P.O. Box 41964 - 00100 <font size="1" color="#B9B9B9">|</font> Nairobi, Kenya.<br></span></td>
</tr>
<tr>
<td valign="bottom" style="padding-left: 0px; padding-top: 6px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 7pt; font-style: normal; font-weight: normal;"><font color="#828282"><b>Phone:</b></font> </span></td>
<td align="left" width="100%" valign="top" style="padding-left: 6px; padding-top: 6px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> (+254) 020 2115993/3742207 </span></td>
</tr>
<tr>
<td valign="bottom" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 7pt; font-style: normal; font-weight: normal;"><font color="#828282"><b>Mobile:</b></font> </span></td>
<td align="left" width="100%" valign="top" style="padding-left: 6px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> 0723-847842, 0786-384784 </span></td>
</tr>
<tr>
<td valign="bottom" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 7pt; font-style: normal; font-weight: normal;"><font color="#828282"><b>Fax:</b></font> </span></td>
<td align="left" width="100%" valign="top" style="padding-left: 6px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> (+254) 020 224 0363 </span></td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 6px; padding-bottom: 0px; padding-right: 0px;" colspan="2"><span style="text-align: left; margin-top: 0px; color: #00ADEF; font-size: 8pt; font-weight: bold; font-family: 'Calibri', sans-serif;"><a style="text-decoration: none; color: #00ADEF" href="http://www.systechafrica.com/"><font color="#00ADEF">website</font></a> <font size="1" color="#00ADEF"> <font size="1" color="#00ADEF">|</font> <a style="text-decoration: none; color: #00ADEF" href="https://www.google.com/maps/place/Systech+Limited/#-1.262282,36.808949,15z/data=!4m2!3m1!1s0x0:0xf5bbb42d28fa1a88"><font color="#00ADEF">map</font></a> <font size="1" color="#00ADEF">|</font> <a style="text-decoration: none; color: #00ADEF" href="mailto:info#systechafrica.com"><font color="#00ADEF">email</font></a></span></td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 10px; padding-bottom: 0px; padding-right: 0px;" colspan="2">
<img src="http://s24.postimg.org/y4lzmrxut/Fundmaster.png" nosend="1" border="0" width="250" height="70" alt="" />
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 7px; padding-bottom: 0px; padding-right: 0px;" width="100%" colspan="2">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" nosend="1" border="0" width="22" height="20" alt="Twitter" />
<a href="https://www.facebook.com/SystechLimited">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" nosend="1" border="0" width="22" height="20" alt="Facebook" /></a>
<img src="https://simplesharebuttons.com/images/somacro/linkedin.png" nosend="1" border="0" width="22" height="20" alt="LinkedIn" />
<img src="https://simplesharebuttons.com/images/somacro/google.png" nosend="1" border="0" width="22" height="20" alt="google+" />
</td>
</tr>
</tr>
</tbody>
</table>
</body>
<style>
a {color: #00ADEF;}
</style>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Firstly: <style> and <meta> tags should be inside <head> tag.
Secondly: Let this be your starting point ;)
<table style="border:1px solid black; width:600px">
<tr>
<td style="text-align:left">I'm on left</td>
<td style="text-align:right">I'm on right</td>
</tr>
</table>
Tip: You can place another table inside <td>
Add width to your table
<table width="100%" cellspacing="0" cellpadding="0" border="0">
Is magic.