In order to learn more about HTML, I am designing an HTML newsletter template from scratch. I got everything working properly. However , I have a section where I want to add 4 social media icons, distributed evenly across the table row.
I am trying to do this mostly with HTML and inline css due to the requirements of the various email software but I cant seem to get it to work. I've attached you can see what I mean (I'm building this on a local machine so no real images there). I just need the 4 images spread evenly across the row.
Thanks a lot in advance
<!-- Start Social Media -->
<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591">
<tr>
<td style="font-family: Arial, Verdana, sans-serif; color:#ffffff"> <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span>
<br>
<br>
</td>
</tr>
<tr>"
<td align="center" valign="middle"> <img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;">
</td>
<td align="center" valign="middle"> <img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;">
</td>
<td align="center" valign="middle"> <img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block;">
</td>
<td align="center" valign="middle"> <img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;">
</td>
You need colspan="4" on the "Connect with us" table cell, so that it spans the four columns of the row below.
You are just missing the colspan on the first tr td. Add this and it should work.
You also seem to have some table padding which is causing an offset from the left. I would recommend adding it to the right as well as this will make everything seem off centre.
<!-- Start Social Media -->
<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591">
<tr>
<td style="font-family: Arial, Verdana, sans-serif; color:#ffffff" colspan="4"> <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span>
<br>
<br>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<a href="https://www.facebook.com/" target="blank">
<img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;">
</a>
</td>
<td align="center" valign="middle">
<a href="https://www.twitter.com/" target="blank">
<img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;">
</a>
</td>
<td align="center" valign="middle">
<a href="https://www.youtube.com/" target="blank">
<img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block;">
</a>
</td>
<td align="center" valign="middle">
<a href="#" target="blank">
<img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;">
</a>
</td>
</tr>
</table>
Alternative's can be done in CSS and i would highly recommend learning CSS next on your journey into HTML and web development as CSS will be much more helpful and usable in future work.
You can use attribute valign for td.
<table>
<tr>
<td valign="middle">
<img src="http://logonoid.com/images/stack-overflow-logo.png" height="30px">
</td>
</tr>
</table>
http://codepen.io/anon/pen/azvEPW
If you are talking about centering the image in the table cell,
<td align="center">
or
<td style="text-align: center;">
So basically you add text-align: center; to your style
try this
<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591">
<tr>
<td style="font-family: Arial, Verdana, sans-serif; color:#ffffff"> <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span>
<br>
<br>
</td>
</tr>
<tr>"
<td align="center" valign="middle"> <img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;margin:auto;">
</td>
<td align="center" valign="middle"> <img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;margin:auto;">
</td>
<td align="center" valign="middle"> <img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block; margin:auto;">
</td>
<td align="center" valign="middle"> <img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;margin:auto;">
</td>
You can set static size.
100 / 4 = 25
<td align="center" valign="middle" width="25%">
And that's better to change "padding: 25px 0px 0px 15px" to "padding: 25px 0px 0px 0px" because 15 set on the left of the table and shift all images to right.
Related
I have been asked to create a HTML email signature, all looks fine in Google Chrome. But when viewed in Outlook, everything moves around.
Would anyone be able to shine some light on where I might be going wrong?
Thanks.
<table aria-hidden="false" cellspacing="0px" cellpadding="0px" border="0px" width="350px" style="margin: 0px; max-width: 100%;">
<tr>
<td rowspan="2" align="left" style="vertical-align:center">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Tom_Avatar.png?v=1602754752" width="200px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
<td colspan="2" align="center" style="vertical-align:bottom">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Lixi_Logo_6fa83943-d431-41b8-acd1-4e1180dc1aa1.png?v=1602754752" width="125px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="[https://www.facebook.com/](https://www.facebook.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Face.png?v=1602680973" width="50px" style="padding-left: 15px;" />
</a>
</td>
<td align="center">
<a href="[https://www.instagram.com/](https://www.instagram.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/InstaG.png?v=1602680973" width="50px" style="padding-right: 15px;" />
</a>
</td>
</tr>
<td valign="top">
<p style="font-size: 14px; font-family: Helvetica, sans-serif; color: #464646; margin: 0px; padding-top: 30px; padding-left: 30px;">
<strong>This Guy</strong><br />
<strong>Job title</strong><br /><br />
<strong>e: </strong>thisguy#email.com<br />
<strong>w: </strong>www.bbc.com<br />
</p>
</td>
</table>
The problem is the incomplete structure of the HTML table in your code. To make your table complete, you need to wrap a tr around your last td to create a third row and apply colspan="3"to that last td to make it span the whole row.
Some browsers probably tolerate the missing elements, trying to fix the given code automatically, but others won't, which is what you experienced.
<table aria-hidden="false" cellspacing="0px" cellpadding="0px" border="0px" width="350px" style="margin: 0px; max-width: 100%;">
<tr>
<td rowspan="2" align="left" style="vertical-align:center">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Tom_Avatar.png?v=1602754752" width="200px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
<td colspan="2" align="center" style="vertical-align:bottom">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Lixi_Logo_6fa83943-d431-41b8-acd1-4e1180dc1aa1.png?v=1602754752" width="125px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="[https://www.facebook.com/](https://www.facebook.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Face.png?v=1602680973" width="50px" style="padding-left: 15px;" />
</a>
</td>
<td align="center">
<a href="[https://www.instagram.com/](https://www.instagram.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/InstaG.png?v=1602680973" width="50px" style="padding-right: 15px;" />
</a>
</td>
</tr>
<tr>
<td valign="top" colspan="3">
<p style="font-size: 14px; font-family: Helvetica, sans-serif; color: #464646; margin: 0px; padding-top: 30px; padding-left: 30px;">
<strong>This Guy</strong><br />
<strong>Job title</strong><br /><br />
<strong>e: </strong>thisguy#email.com<br />
<strong>w: </strong>www.bbc.com<br />
</p>
</td>
</tr>
</table>
Your document was not valid
remove deprecated attributes and add the correct CSS in the style tags
last cell was not in a row and was too narrow (colspan)
missing ALT tags on images (not super important)
hyperlinks were not correct (BBCode or markdown)
No need to make all lines "strong" in a set of lines.
<!doctype html>
<html lang="en">
<head>
<title>Title></title>
</head>
<body>
<table aria-hidden="false" style="width:350px; padding: 0; border:0; margin: 0px; max-width: 100%;">
<tr>
<td rowspan="2" style="text-align:left; vertical-align:center">
<a href="https://www.bbc.com/">
<img alt="avatar" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Tom_Avatar.png?v=1602754752" style="width:200px;padding-top: 0px; margin-left: 0px;" />
</a>
</td>
<td colspan="2" style="text-align:center; vertical-align:bottom">
<a href="https://www.bbc.com/">
<img alt="logo" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Lixi_Logo_6fa83943-d431-41b8-acd1-4e1180dc1aa1.png?v=1602754752" style="width:125px; padding-top: 0px; margin-left: 0px;" />
</a>
</td>
</tr>
<tr>
<td style="text-align:center">
<a href="https://www.facebook.com/">
<img alt="facebook" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Face.png?v=1602680973" style="width:50px;padding-left: 15px;" />
</a>
</td>
<td style="text-align:center">
<a href="https://www.instagram.com/">
<img alt="instagram" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/InstaG.png?v=1602680973" style="width:50px;padding-right: 15px;" />
</a>
</td>
</tr>
<tr>
<td colspan="3" style="vertical-align:top">
<p style="font-size: 14px; font-family: Helvetica, sans-serif; color: #464646; margin: 0px; padding-top: 30px; padding-left: 30px;">
<strong>This Guy<br />
Job title<br /><br />
e: </strong>thisguy#email.com<br />
<strong>w: </strong>www.bbc.com<br />
</p>
</td>
</tr>
</table>
</body>
</html>
Putting 5 columns in a row for an html email blast. I have margin and cell spacing at 0, but I'm getting huge amounts of spacing between the 5 images, so I can't figure out what I'm missing. I've been able to do this with 2 columns in a row, but can't figure out what I'm doing wrong now. Any help appreciated
https://jsfiddle.net/baboles/mpbd7b91/
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="5">
<a href="#">
<img src ="#" style= "display: block; width: 600px;">
</a>
</td>
</tr>
<!--Column 1-->
<tr>
<td align="right" colspan="1" width="120">
<a style = "margin: 0px;" href="#">
<img src="#" style="display: block; width: 120px;">
</a>
</td>
<!-- Column 2 -->
<td align="right" colspan="1" width="120">
<a href="#">
<img src="#" width="120px" style="display: block; width: 120px;">
</a>
</td>
<!-- Column 3 -->
<td align="center" colspan="1" width="120">
<a href="#">
<img src="#" width="120px" style="display: block; width: 120px;">
</a>
</td>
<!-- Column 4 -->
<td align="left" colspan="1" width="120">
<a href="#">
<img src="#" width="120px" style="display: block; width: 120px;">
</a>
</td>
<!-- Column 5 -->
<td align="left" colspan="1" width="120">
<a href="#">
<img src="#" width="120px" style="display: block; width: 120px;">
</a>
</td>
</tr>
You have to do the following steps:
1) remove width="100%" in the table tag
2) set the css table-layout of the table to fixed. Like below
<table border="0" cellspacing="0" cellpadding="0" style="table-layout: fixed;margin: 0px auto;">
Notice that there is only space between your images when the table has a lot of horizontal width to fill. You need to fix the width of your table so that it doesn't grow bigger than it needs to.
Alternatively, you could ditch the 5 column table layout and display the images inline-block or float them. When using inline-block, make sure the markup does not have spaces between elements, this can be achieved with comments like so:
<img ...><!--
--><img ...><!--
--><img ...>
My html email layout as below;
HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" align="center">
<tr>
<td align="center" valign="middle">
<table width="602" height="556" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size:0px;" colspan="5">
<a style="line-height:0; font-size:0px;" href="http://www.google.com">
<img src="images/img_01.jpg" alt="" height="91" style="display:block; border:none; line-height:0;" width="602" >
</a>
</td>
</tr>
<tr>
<td style="line-height:0; font-size:0px;" colspan="5">
<img src="images/img_02.jpg" alt="" height="360" style="display:block; border:none; line-height:0;" width="602" >
</td>
</tr>
<tr>
<td style="line-height:0; font-size:0px;">
<a style="line-height:0; font-size:0px;" href="http://www.google.com">
<img src="images/img_03.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="118" >
</a>
</td>
<td style="line-height:0; font-size:0px;">
<a style="line-height:0; font-size:0px;" href="http://www.google.com">
<img src="images/img_04.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="96" >
</a>
</td>
<td style="line-height:0; font-size:0px;">
<img src="images/img_05.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="194" >
</td>
<td style="line-height:0; font-size:0px;">
<a style="line-height:0; font-size:0px;" href="http://www.google.com">
<img src="images/img_06.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="110" >
</a>
</td>
<td style="line-height:0; font-size:0px;">
<img src="images/img_07.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="84" >
</td>
</tr>
<tr>
<td style="line-height:0; font-size:0px;" colspan="3">
<img src="images/img_08.jpg" alt="" height="48" style="display:block; border:none; line-height:0;" width="408" >
</td>
<td style="line-height:0; font-size:0px;">
<a style="line-height:0; font-size:0px;" href="http://www.google.com">
<img src="images/img_09.jpg" alt="" height="48" style="display:block; border:none; line-height:0;" width="110" >
</a>
</td>
<td style="line-height:0; font-size:0px;">
<img src="images/img_10.jpg" alt="" height="48" style="display:block; border:none; line-height:0;" width="84" >
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Above code work fine for gmail, outlook 2007, outlook.com. But if I forward this mail from outlook 2007 to outlook.com, email break as like this;
Outlook adding extra p and span tag to anchor tag for image and gives them style. So my layout, break as above image.
Original Code;
<td style="line-height:0; font-size:0px;" colspan="5">
<a style="line-height:0; font-size:0px;" href="http://www.google.com">
<img src="imagepath" alt="" height="91" style="display:block; border:none; line-height:0;" width="602" >
</a>
</td>
Styled Code (after forwarding mail);
<td colspan="5" style="padding:0cm 0cm 0cm 0cm;">
<p class="ecxMsoNormal" style="line-height:0%;">
<a href="http://www.google.com/" target="_blank" class="">
<span style="font-size:1.0pt;color:blue;text-decoration:none;">
<img border="0" width="602" height="91" id="ecx_x0000_i1034" src="imagepath" class="">
</span>
</a>
<span style="font-size:1.0pt;"></span>
</p>
</td>
JsFiddle
http://jsfiddle.net/zc7nL/
How can I solve this issue?
Unfortunately there is no way to prevent Outlook adding the <p> tags, we just have to find ways to zero them out. Try adding margin: 0; padding: 0; inline to all your image tags and add #outlook a {padding:0;} to your header style tag. Also removing the space between your anchor and image tags may possibly stop the spans from appearing. Not 100% sure, but worth a try.
If none of that works, try targeting .ecxMsoNormal in your style tag as you would for the web. Any styles you apply there should take affect as Outlook reads it (unlike Gmail).
The issue I'm facing is that a TD in my table is inheriting the table's width despite having it's own width explicitly set.
The code is as follows:
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center">
<tr>
<td>
<img src="header.gif" alt="New Releases">
</td>
</tr>
<tr style="font-size: 0;">
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
<td width="85px">
<img src="product1.jpg" width="85" height="85" alt="image" >
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 1</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<img src="view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="10px">
</td>
<td width="85px">
<img src="product2.jpg" width="85" height="85" alt="" >
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 2</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<img src="view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="30px"><img width="30px" height="95px" src="rightsep.gif" alt=""></td>
</tr>
<tr>
<td>
<img src="footer.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
Specifically, the TD being affected is the first in the table:
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
Which is inheriting the table width of 640px instead of the 30px it should be.
It seems regardless of what I change, the issue is still there.. I've tested both locally and in JSFiddle.
I'm by no means experienced in HTML so I'm not sure what the problem is.
Updated Code
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center" style="border-spacing: 0;">
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases.gif" alt="New Releases">
</td>
</tr>
<tr>
<td width="30"><img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-left.gif" alt="" ></td>
<td width="85">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/1/_/1.jpg_14603.jpg" width="85" height="85" alt="image" >
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">Clydie King - Direct Me - Inc Never Like This Before</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="85">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/4/_/4.jpg_14418.jpg" width="85" height="85" alt="" >
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">T.M.V.S. - Don't Be Shy</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product">
</td>
<td width="30">
<img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-right.gif" alt="">
</td>
</tr>
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-bottom.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
I now have a gap above and below the middle row which I can't get rid of.
Every row in a table must have the same number of cells. If you want to use less cells in a row you must explicitly set the colspan attribute to match:
<tr>
<td colspan="9"> <!-- set this to the maximum number of cells there will be in a row -->
<img src="header.gif" alt="New Releases">
</td>
</tr>
You can mix and match the colspan:
<tr>
<td colspan="5">
<img src="header.gif" alt="New Releases">
</td>
<td colspan="4">
<img src="header.gif" alt="New Releases">
</td>
</tr>
but the total must always match the maximum number of cells used in the table.
This process must be repeated for every row in the table.
I believe it should be:
<td width="200">
or
<td style="width: 200px">
You have a table with 3 rows, but different numbers of cells.
If you want a cell to span the whole table, like the header and footer do, you need to specifiy a rowspan on them like this:
<tr>
<td rowspan="9"><img src="header.gif" alt="New Releases"></td>
</tr>
In this case a 9, because your middle row has 9 cells.
Otherwise the browser will render the table wrong.
I'd just like to put in an email a series of 4 social icons centered (horizontally) but they keep being put by gmail and yahoo on the left side!
<body bgcolor="#FFFFFF" style="margin: 0;padding: 0;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;width: 100%;">
<table style="margin: 0;padding: 0;width: 100%;border-collapse: collapse; background-color: #F2F2F2;">
<tr>
<td style="margin: 0 auto; padding: 0;display: block;max-width: 600px;clear: both; align: center; valign: top; background-color:#ffffff ;">
<table width="100%" style="padding:0px 5px 0px 5px;" cellspacing="0" border="0" bgcolor="#ffffff" align="center">
<tbody>
<tr>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px; margin-bottom: 30px;">
<a rel="nofollow" target="_blank" href="<%= t("social_urls.facebook_page_url") %>">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/facebook_icon.png" alt="Facebook">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/twitter_icon.png" alt="Twitter">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/pinterest_icon.png" alt="Pinterest">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/tumblr_icon.png" alt="Tumblr">
</a>
</td>
<td style="float:left;margin-left:6px;margin-right:6px;margin-top:10px;">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/instagram_icon.png" alt="Instagram">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
Here is a jsfiddle.
I want them not split over the whole line but quite "concentrated" as you see each icon must only have a few pixels horizontally between them (6px left, 6px right)
I believe that should be text-align: center instead of just align: center in your main table data cell (because you're calling it as a css style parameter). Also, vertical-align instead of valign.
If that doesn't do it, try adding text-align: center; to the table style, then switch out the float:left on each td so they're display: inline-block; instead.
Good luck!
EDIT---------------------------------------------------------------------------
How about this approach using only tables?
Check the new Fiddle
HTML
<table style="margin: 0;padding: 0;width: 100%;border-collapse: collapse; background-color: #F2F2F2;">
<colgroup>
<col width="20%" />
<col width="60%" />
<col width="20%" />
</colgroup>
<tr>
<td>
</td>
<td style="text-align:center">
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/facebook_icon.png" alt="Facebook" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/twitter_icon.png" alt="Twitter" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/pinterest_icon.png" alt="Pinterest" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/tumblr_icon.png" alt="Tumblr" />
</a>
<a rel="nofollow" target="_blank" href="#">
<img src="http://d2vsjqr9p2w23h.cloudfront.net/email-images/instagram_icon.png" alt="Instagram /" />
</a>
</td>
<td>
</td>
</tr>
</table>
In email always use align="left|center|right" for horizontal alignment and valign="top|middle|bottom" for vertical. Apply this to your table cells <td align="center"> in your case.
Here is the jsfiddle with two methods that will work
Here is a very basic example of both align and valign:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#252525">
<tr>
<td align="center" valign="middle" height="100">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
<img style="margin: 0; border: 0; padding: 0;" src="" width="30" height="30" alt="">
</td>
</tr>
</table>