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.
Related
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 a button that in order for it to work in Outlook 2007/10 (!) I have to put the three elements - left image, middle text, right image - in their own nested tables within a larger table. However, this causes the oft-quoted issue in Outlook 2007/10 which has the gaps between the tables.
Below is the code for the button. Obviously, there's the html head body etc above it.
I've tried display attributes, widths, align, border/padding/margin = 0 on img and tables alike... I've tried every solution I could find online and nothing is fixing it!
Any ideas for what else to try gratefully received!!
Note: this is happening across the board in Outlook, not just one of them.
<tr>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
<td align="center" valign="middle">
<table align="center" cellpadding="0" cellspacing="0" height="40" width="243" border="0" style="margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; background-color: #f2f2f2;" valign="middle">
<tbody valign="middle">
<tr height="40">
<td height="40">
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="22" style="margin: 0; border: 0; padding: 0; width: 22px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="22" style="background-color: #f2f2f2;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img align="right" height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="22" /></a></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; border-left: 1px solid #ec6608;" valign="middle">
<tbody>
<tr style="background-color: #ec6608;">
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">Text goes here</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="36" style="margin: 0; border: 0; padding: 0; width: 36px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="36" style="background-color: #f2f2f2;"><img align="right" height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
This one was surprisingly tough! I found that part of the issue was caused by the align="center" on the outer table, causing a 3px gap in Outlook 2003 and Live Mail. If you still need it to align to the center, I would wrap this code in another table with that attribute. To solve the rest of it I removed extra tables and added align to your TDs. I also added "border-collapse: collapse;" to your tables. You should see no spacing in desktop Outlook clients now.
<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
<tr>
<td height="40" width="22" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
</a>
</p>
</td>
<td height="40" width="180" align="left">
<table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
<tbody>
<tr>
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
Text goes here
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td height="40" width="36" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" target="_blank">
<img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
</a>
</p>
</td>
</tr>
</tbody>
You need to specify table-layout in <table> tags. If this still not working, you need to change your table layout to a float / display layout.
<table style="table-layout: fixed; [.....]">
The float layout is like this:
<a href="..." style="float:left;"><img ....>
I feel your pain! been making email templates and having these battles with Outlook for years now. The answer is that you need to do everything in your power to make the simplest little section work. I would make the background-color of each cell the orange, and align the left image to the left, and the right to the right https://jsfiddle.net/0gncaogm/.
I've also added classes (to accompany your inline widths) to make the cells a max-width with overflow-x:hidden...
img{
display:inline-block;
margin-top:0;
margin-right:0;
margin-left:0;
margin-bottom:0;
}
.leftedge{
max-width:15px;
overflow-x:hidden;
}
.rightedge{
max-width:36px;
overflow-x:hidden;
}
In the HTML...
<td height="40" width="36" style="background-color: #e76823;" align="right>
<a href="#" target="_blank">
<img align="right" height="40" src="http://www.tonytansley.co.uk/so/right.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" />
</a>
</td>
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.
I'm trying to create four evenly-spaced <table> cells but for some reason, I am having a little difficulty doing this (even though I have set certain widths for them).
An example can be seen below, where the second cell appears larger than the others:
<tr>
<td style="width: 100%; padding: 0px 20px 0px 20px;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">
<table style="width: 600px; border-collapse: collapse; border: 1px solid orange;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">
<tbody cellspacing="0" cellpadding="0" border="0" colspan="12" align="center" style="width: 100%;" width="100%">
<tr cellspacing="0" cellpadding="0" border="0" colspan="12" align="center" style="width: 100%;" width="100%">
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Bullhorn Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Dolorla ti <br />amet silio</p>
</td>
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Lab Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Adipiscing <br />consecteture</p>
</td>
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Atom Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Facili elit <br />torem</p>
</td>
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="File Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Ipsum sit <br />sepida colt</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
JSFiddle
How do I create four evenly-spaced table cells?
You need to use the table-layout propertie.
http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
In your case:
<table style="width: 600px; border-collapse: collapse; border: 1px solid orange;table-layout:fixed;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">
DEMO
As you will notice, when you inspect the parsed content in some devoloper tools, like in Chrome, your <td>'s width: 148px is overruled, and replaced with a computed width like 103.8546546px and so on. Simply add
table {
table-layout: fixed;
}
to your CSS or as inline style., and you will get what you want.
forked fiddle -> http://jsfiddle.net/CaVpC/
Hi I am having problem with outlook not centering my table part.
it consists of two columns which are left aligned.They are centering in gmail and outlook on desktop but not on mobile.I guess that align left in two columns is giving me an issue.Please help me out.
<table border="0" cellpadding="0" cellspacing="0" align="center" style="padding:0 0 0 10px;">
<tr>
<td align="center" class="middle">
<div align="center">
<center>
<!--[if mso]>
<table style="width: 300px;"><tr><td>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" height="158" bgcolor="#006699"><tr>
<td style="padding: 0;" align="left" class="responsive-image middle">
<img src="http://www.eruditus.com/emailer/0418_responsive_columbia/bg.jpg" style="display: block; margin: 0; padding: 0;">
</td>
</tr></table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" bgcolor="#0093d4" height="158px"><tr>
<td width="" style="padding: 0 0 0 0; background-color: #0093d4; vertical-align: top;" bgcolor="#0093d4" valign="top">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#0093d4">
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
<tr>
<td width="56" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0 10px;" bgcolor="#0093d4" valign="top">Email: </td>
<td width="273" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top">EPM_columbia#eruditus.com</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0 0 0 10px;" bgcolor="#0093d4" valign="top">Phone: </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0px; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+91 22 6162 3112(India)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+971 044302011(Dubai)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+1 862 252 5823(USA)</span></td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
</table>
</td> </tr>
</table>
</center>
</div>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="600" class="content" style="border-collapse: collapse; width: 100%; max-width: 600px;">
<tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
</tr>
<tr><td style="font-family:Arial, Helvetica, sans-serif; color: #666666; padding: 0;" align="center" class="responsive-image">
<a href="http://www.eruditus.com/programmes/columbia/columbia-mc.html" style="display: block; margin: 0 auto;" target="_blank">
<img src="http://www.eruditus.com/emailer/0419_columbia/clickhere.png" align="middle" width="277" height="58" alt="click_program" style="display: block; max-width: none !important; margin: 0 auto;" /></a>
</td>
</tr></table></td>
</tr><tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
</tr></table><!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
What you'll want to do is use a Media Query to check whether the screen size is less than a certain size to display responsive layouts. e.g:
#media only screen and (max-width: 500px;) {
//Responsive CSS styling
}
Using this you can center those tables as you would with a normal webpage. e.g:
#media only screen and (max-width: 500px;) {
td[class="responsive-align"] {
margin: 0 auto !important;
float: none !important;
align: center !important; //If this line centers your text, remove it.
}
}
Email clients are very pedantic, and take a long time to understand what you can do with each one, and what their limits are.
From my experience with responsive designs and Outlook especially you need to lay out your tables like this for them to drop down effectively:
<table align="left">
<tr>
<td>
</td>
</tr>
</table>
<table align="right">
<tr>
<td>
</td>
</tr>
</table>
With Outlook, it's best to make sure you have 5px or larger in between the two tables so that it can add it's own spacing in (That you can't do anything about). So, for a table of 600px width, you'd have each of your tables with a width of 295px for a good enough amount of spacing.
Hope this helps :)