Aligning rows of table layout used as cards - html

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>

Related

Photos in html Email keeps cutting off

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.

I Need Help Alignin 2 TD in My Email Signature HTML

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>

How Can I add an icon next to anchor tag in HTML email?

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>

My email signature needs to be edge to edge instead of being to the left

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.

trouble with gmail rendering email

<style type="text/css">
#media only screen and (max-width: 480px) {
.secondary img {
width: 100%;
}
}
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200);
* {
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
}
body {
font-family:'Source Sans Pro', Arial, Helvetica, sans-serif;
}
h1 {
font-size: 50px;
font-weight: 200;
color: #FFFFFF;
line-height: 50px;
margin-bottom: 40px;
}
h2 {
font-size: 36px;
font-weight: 200;
color: #444444;
margin-bottom: 30px;
}
h2 strong {
font-weight: 400;
color: #51a33d;
}
h3 {
font-size: 24px;
font-weight: 400;
color: #444444;
}
p {
font-size: 18px;
font-weight: 400;
line-height: 24px;
color: #AEAEAE;
margin-bottom: 20px;
}
p.light {
font-size: 18px;
font-weight: 400;
line-height: 24px;
color: #999999;
margin-bottom: 30px;
}
p.quote {
font-size: 24px;
font-weight: 200;
line-height: 30px;
color: #444444;
}
table {
text-align: center;
}
table.wrap {
width: 640px;
margin: 0 auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
table.flat-bottom {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
table.block {
width: 250px;
margin: 0 10px;
}
table.btn {
width:260px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
table.btn a {
width: 250px;
display: block;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
}
table.single a {
font-size: 24px;
padding: 15px 0;
}
table.double a {
font-size: 18px;
padding: 10px 0;
}
table.green {
background: #51a33d;
}
table.gray {
background-color: #999999;
}
table.orange {
background-color: #F57B20;
}
table img {
margin: 0 auto;
}
a img {
border: none;
}
.main-img {
display: block;
width: 640px;
margin: 0 auto;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.icon-img {
width: 90px;
height: 90px;
}
.main {
background-color: #444444;
}
.main a {
color: #FFFFFF;
text-decoration: none;
}
.secondary {
background-color: #EEEEEE;
}
.secondary a {
color: #51A33D;
text-decoration: none;
}
.secondary-logo img {
display: inline-block;
margin:0 auto 20px auto;
}
icon img {
display: inline-block;
margin:0 auto;
}
.unsubscribe {
font-size: 14px;
color: #999999;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<div style="width:640px; text-align:center; margin: 0 auto;">
<p style="font-size: 14px; margin-bottom: 0px;">Trouble viewing? View it in your web browser.</p>
</div>
<table cellpadding="0" cellspacing="0" class="main wrap flat-bottom">
<tr>
<td width="50"> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" width="540" height="60"> </td>
</tr>
<tr>
<td colspan="3">
<img src="http://img03.en25.com/EloquaImages/clients/SnagajobcomInc/{33384eb5-e6b0-4030-a8f8-332c77753d99}_logo.png" alt="When I Work" />
</td>
</tr>
<tr>
<td colspan="3" height="30"> </td>
</tr>
<tr>
<td colspan="3">
<font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
<h1>Building the Team to Make Scheduling Easier</h1>
<p>Last month we teamed up with When I Work to give our customers an extended free trial of their awesome scheduling software. There was such a great response that we wanted to make sure that you had another chance to easily schedule your employees.</p>
</font>
</td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td colspan="3">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="110"> </td>
<td>
<table class="" style="width: 320px;">
<tr>
<td valign="middle" height="55"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif">Schedule My Employees</font></td>
</tr>
</table>
</td>
<td width="110"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" height="50"> </td>
</tr>
</table>
</td>
<td width="50"> </td>
</tr>
</table>
<img src="http://staging.thisclicks.net/email/wiw/v4/images/main-img-phone.jpg" class="main-img" />
<br />
<table cellpadding="0" cellspacing="0" class="secondary wrap">
<tr>
<td width="50"> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" height="70"> </td>
</tr>
<tr>
<td colspan="3">
<div class="secondary-logo">
<img src="http://staging.thisclicks.net/email/wiw/v4/images/wiw-logo.jpg" />
</div>
<font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
<h2>Employee Scheduling. <strong>Reinvented.</strong></h2>
<p class="light">When I Work is the easiest way for a business to schedule and communicate with its employees using the web, mobile, text messaging, and social media.</p>
</font>
</td>
</tr>
<tr>
<td colspan="2" height="20"> </td>
</tr>
<tr>
<td width="110"> </td>
<td>
<table class="btn single green" style="width: 320px">
<tr>
<td valign="middle" height="65"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif">Schedule My Employees</font></td>
</tr>
</table>
</td>
<td width="110"> </td>
</tr>
<tr>
<td colspan="3" height="80"> </td>
</tr>
</table>
</td>
<td width="50"> </td>
</tr>
</table>
<br />
<table cellpadding="0" cellspacing="0" class="secondary wrap">
<tr>
<td width="50"> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" width="540" height="70"> </td>
</tr>
<tr>
<td colspan="3">
<font face="'Source Sans Pro', Arial, Helvetica, sans-serif">
<h2>Make Life Easier for You<br />and Your Company</h2>
<p>When I Work is offering an extended free trial to<br />Snagajob customers for a limited time.</p>
<p class="light">Click below to begin receiving applications today!</p>
</font>
</td>
</tr>
<tr>
<td colspan="2" height="20"> </td>
</tr>
<tr>
<td width="110"> </td>
<td>
<table class="btn single green" style="width: 320px">
<tr>
<td valign="middle" height="65"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif">Schedule My Employees</font></td>
</tr>
</table>
</td>
<td width="110"> </td>
</tr>
<tr>
<td colspan="2" height="60"> </td>
</tr>
</table>
</td>
<td width="50"> </td>
</tr>
</table>
<br />
<div class="unsubscribe"><font face="'Source Sans Pro', Arial, Helvetica, sans-serif">If you are no longer interested you can <unsubscribe>unsubscribe</unsubscribe> instantly.</font></div>
</center>
</body>
</html>
Its working in most of my email clients but looks awful in gmail. Do they not support something I'm doing? I know I had some trouble with gmail and margin in previous emails that we have done. Not really sure how I should reformat it from here?
Gmail strips out anything inside style tags, so you need to make sure all your styles are inline.
Here is a CSS Inliner tool tool from Zurb.