I am working on a html email signature but I would like to change an td its height and width here is the code:
<tr bgcolor="#ffd668" style="height: 50px;">
<td colspan="10" style="border-radius: 5px;">
<table>
<tbody><tr>
<td width="5"></td>
<td width="200" height="30" align="left" style="line-height: 0" colspan="2">
<a style="border: 0;" href="https://www.fingerspitz.nl" target="_blank">
<img width="128" height="22" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Fingerspitz_logo.png">
</a>
</td>
<td width="190" align="right">
<table style="width:100%;">
<tbody><tr>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.facebook.com/Fingerspitz" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/LinkedIn.png\">
</a>
</td>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://twitter.com/fingerspitzNL/" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/Twitter.png">
</a>
</td>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.linkedin.com/company/fingerspitz" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/LinkedIn.png">
</a>
</td>
<td width="40" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.youtube.com/channel/UCpovXRL4rEF8skjhle2z25Q" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/YouTube.png">
</a>
</td>
<td width="0.2" height="20" bgcolor="#00000"></td>
<td width="40" height="30" align="right">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.google.nl/maps/place/Fingerspitz+Online+Marketing/#51.5904415,4.7595442,17z/data=!4m5!3m4!1s0x47c69f8ba6d2e709:0xbbf458d8e81294cb!8m2!3d51.5904382!4d4.7617329" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/Maps.png">
</a>
</td>
<td width="15" height="30"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
Here is the html code in a fiddle
So basically what I would like to achieve is that the vertical black stripe between the youtube and googlemaps icon is a little bit thinner and the height is even with the icon image.
Could someone help me out on this?
please check now
<tr bgcolor="#ffd668" style="height: 50px;">
<td colspan="10" style="border-radius: 5px;">
<table>
<tbody><tr>
<td width="5"></td>
<td width="200" height="30" align="left" style="line-height: 0" colspan="2">
<a style="border: 0;" href="https://www.fingerspitz.nl" target="_blank">
<img width="128" height="22" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Fingerspitz_logo.png">
</a>
</td>
<td width="190" align="right">
<table style="width:100%;">
<tbody><tr>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.facebook.com/Fingerspitz" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/LinkedIn.png">
</a>
</td>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://twitter.com/fingerspitzNL/" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/Twitter.png">
</a>
</td>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.linkedin.com/company/fingerspitz" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/LinkedIn.png">
</a>
</td>
<td width="40" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.youtube.com/channel/UCpovXRL4rEF8skjhle2z25Q" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/YouTube.png">
</a>
</td>
<td width="0.2" height="30" ><span style="background-color:#000;height:28px;display:table;width:2px;"></span></td>
<td width="40" height="30" align="right">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.google.nl/maps/place/Fingerspitz+Online+Marketing/#51.5904415,4.7595442,17z/data=!4m5!3m4!1s0x47c69f8ba6d2e709:0xbbf458d8e81294cb!8m2!3d51.5904382!4d4.7617329" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/Maps.png">
</a>
</td>
<td width="15" height="30"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
Related
I am trying to put the social media icones of my website in the page center.
But I couldn't.
This is my code:
https://jsfiddle.net/2ahgL130/1/
CSS:
.table1{
margin:0;
padding:0;
min-width:100%
}
.table2{
font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:1em;
line-height:1.5;
max-width:600px;
padding:0 20px 0 20px;
}
.table3{
padding:20px;
}
.table4{
padding-bottom:20px;
padding-top: 0px;
align-items: center;
}
.table5{
padding-bottom:20px;
}
So please how can I correct my code to get the elements in the page center
You have to update your entire code and use below snippet using flexbox.
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://dummyimage.com/32x32/000/fff" width="32" height="32">
</a>
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://dummyimage.com/32x32/000/fff" alt="" width="32" height="32">
</a>
</div>
You can use this code
body {
margin: 0;
padding: 0;
}
.table1 {
margin: 0;
padding: 0;
min-width: 100%
}
.table2 {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.5;
max-width: 600px;
padding: 0 20px 0 20px;
margin: 0 auto;
}
.table3 {
padding: 20px;
}
.table4 {
padding-bottom: 20px;
padding-top: 0px;
align-items: center;
}
.table5 {
padding-bottom: 20px;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
<div>
<div lang="en" dir="ltr" class="table1">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="table2">
<tbody>
<tr>
<td class="table3">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="table4">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr style="text-align: center;">
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://www.w3schools.com/images/picture.jpg" width="32" height="32">
</a>
</td>
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://www.w3schools.com/images/picture.jpg" width="32" height="32">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="table5">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" alt="" width="136" height="50">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Add Table align:center
<div>
<div lang="en" class="table1">
<table align="center" role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="table2">
<tbody>
<tr>
<td class="table3">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="table4">
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" width="32" height="32" >
</a>
</td>
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" width="32" height="32" >
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="table5" style="text-align:center">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" alt="" width="136" height="50">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
https://jsfiddle.net/lalji1051/f2gs7erq/5/
I am having a problem with my image inside my email signature, what I have tried to export the image as retina with 300dpi. I also doubled the pixel size of the image. How can I make the image sharper than it is now?
<table width="430" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="display: inline-table;">
<tbody>
<tr>
<td width="5" height="1"></td>
<td width="9" height="1"></td>
<td width="182" height="1"></td>
<td width="57" height="1"></td>
<td width="30" height="1"></td>
<td width="98" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="37" height="1"></td>
<td width="9" height="1"></td>
<td width="5" height="1"></td>
<td width="1" height="1"></td>
</tr>
<tr>
<td colspan="13">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;">Met vriendelijke groet,</span>
</td>
<td width="1" height="22"></td>
</tr>
<tr>
<td width="570" height="13" colspan="13"></td>
<td width="1" height="13"></td>
</tr>
<tr>
<td width="248" height="10" colspan="3" style="vertical-align: bottom;">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 12px;">
<strong>Jaap Jacobs</strong>
</span>
</td>
<td width="30" height="66" rowspan="3" colspan="2"></td>
<td width="292" height="22" colspan="7" style="vertical-align: bottom;">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 12px;">+31 (0)76 763 06 00</span>
</td>
<td width="1" height="22"></td>
</tr>
<tr>
<td width="248" height="22" colspan="3">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;">Managing director</span>
</td>
<td width="292" height="22" colspan="7">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;">
<a style="color: #222222; text-decoration: none;" href="mailto:emailtest#email.nl" target="_blank">emailtest#email.nl</a>
</span>
</td>
<td width="1" height="22"></td>
</tr>
<tr>
<td width="570" height="15" colspan="11"></td>
</tr>
<tr bgcolor="#ffd668" style="height: 50px;">
<td colspan="10" style="border-radius: 5px;">
<table>
<tbody><tr>
<td width="5"></td>
<td width="200" height="30" align="left" style="line-height: 0" colspan="2">
<a style="border: 0;" href="https://www.fingerspitz.nl" target="_blank">
<img width="138" height="22" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Fingerspitz.png">
</a>
</td>
<td width="190" align="right">
<table style="width:100%;">
<tbody>
<tr>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.facebook.com/Fingerspitz" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Facebook.png">
</a>
</td>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://twitter.com/fingerspitzNL/" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Twitter.png">
</a>
</td>
<td width="30" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.linkedin.com/company/fingerspitz" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/LinkedIn.png">
</a>
</td>
<td width="40" height="30">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.youtube.com/channel/UCpovXRL4rEF8skjhle2z25Q" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/YouTube.png">
</a>
</td>
<td width="0.2" height="30">
<span style="background-color:#000;height:30px;display:table;width:1px;"></span>
</td>
<td width="40" height="30" align="right">
<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.google.nl/maps/place/Fingerspitz+Online+Marketing/#51.5904415,4.7595442,17z/data=!4m5!3m4!1s0x47c69f8ba6d2e709:0xbbf458d8e81294cb!8m2!3d51.5904382!4d4.7617329" target="_blank">
<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Maps.png">
</a>
</td>
<td width="15" height="30"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="570" height="15" colspan="11"></td>
</tr>
<tr>
<td colspan="10" style="border: 1px solid #e6e6e6; border-radius: 5px;">
<table>
<tbody>
<tr>
<td width="2" height="30"></td>
<td width="30" height="50">
<a href="https://www.fingerspitz.nl/blog/434-fingerspitz-1-tradingdesks-volgens-onderzoek-emerce-100" target="_blank">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 13px;"><img width="40" height="40" alt="Dutch Search Awards" src="https://www.fingerspitz.nl/files/Social_iconen/Emerce_100_2.png"></span>
</a>
</td>
<td width="10" height="30"></td>
<td width="512" height="50">
<span style="color: #222222; font-family: Lucida Grande,Arial,Helvetica,sans-serif; font-size: 12px;">Fingerspitz is #1 Tradingdesk van Nederland volgens Emerce! <b>Lees meer!</b></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Above you see the result the image Fingerspitz is a bit blurry. I'll hope someone could help me out on this.
You're changing the height-to-width ratio slightly. You could remove either the height or width definition, which would keep the ratio to scale.
So this:
<img width="138" height="22" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Fingerspitz.png">
becomes this:
<img width="138" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Retina/Fingerspitz.png">
I am trying to create a HTML Template which I will use to send emails.
In template, I have a single row table which I want to make it either completely horizontal or completely vertical like below depending on screen width.
in laptop or desktop it should look like this
and in mobile devices it should look like this
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}
</style>
<table>
<tr>
<td class="innerpadding borderbottom">
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
<table width="40" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" style="padding: 0 20px 20px 0;">
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</table>
</td>
</tr>
</table>
Have you tried using bootstrap? It would make your life very easier. And would involve less code.
sample :
table { width: 90%; }
td { height: 40px; padding: 0px 20px 20px 0px; border: 1px solid #333; }
#media screen and (max-width: 640px) {
td { display: block; width: 90%; }
}
<html>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
<td>
<img src="http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/mail_2.png" width="40" height="40" border="0" alt="" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have a pre-designed HTML email that i have sliced and coded using Komodo edit. All content is within a table where display: block and border-collapse: collapse; have been added to the tables inline-CSS and also line-height: 0px; to the cells inline-CSS. I have been using EmailonAcid to test my HTML email and what seems to be happening is everything looks fine on every email program except for Outlook. Outlook is addining extra white space to the sliced images causing the surrounding content/images to become out of line.
<table id="Table_01" style="border: 1px solid #D6D6D7; font-family: sans-serif; font-size: 14px; border-collapse: collapse;" width="800" height="1501" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_01.jpg" width="800" height="312" alt=""></td>
</tr>
<tr>
<td colspan="6" style="width: 800; height:199px; padding: 20px 10px 0px 15px;">
<p> ALL MY TEXT GOES HERE</p>
</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_03.jpg" width="800" height="37" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img style="display: block;" src="images/edm_personalised_02_04.jpg" width="180" height="47" alt=""></td>
<td colspan="2" style="width: 135px; height: 47; font-size: 12px; text-transform: uppercase;">
Text here
<br/>
<span style="font-weight: bold;">£#XX.XX#</span>
</td>
<td colspan="2">
<img style="display: block;" src="images/edm_personalised_02_06.jpg" width="485" height="47" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_07.jpg" width="800" height="88" alt=""></td>
</tr>
<tr>
<td colspan="3" style="width: 228px; height: 21px; font-size: 12px; text-transform: uppercase; ">
text here
</td>
<td colspan="3">
<img style="display: block;" src="images/edm_personalised_02_09.jpg" width="572" height="21" alt=""></td>
</tr>
<tr>
<td style="width:" 90px; height: 21px; font-size: 12px;">
<span style="font-weight: bold;">
£#XX.XX#</span> </td>
<td colspan="5">
<img style="display: block;" src="images/edm_personalised_02_11.jpg" width="710" height="21" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_12.jpg" width="800" height="140" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img style="display: block;" src="images/edm_personalised_02_13.jpg" width="605" height="48" alt=""></td>
<td style="width: 195px; height: 48px; font-size: 12px;text-transform: uppercase;">
text here
<br/>
<span style="font-weight: bold; ">£#XX.XX#</span>
</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_15.jpg" width="800" height="66" alt=""></td>
</tr>
<tr>
<td colspan="6" style="width: 800px; height: 145px; font-size: 24px; text-align: center;">
#dealername#
<br/>
#contact_number#</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_17.jpg" width="800" height="329" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_18.jpg" width="800" height="58" alt=""></td>
</tr>
<tr>
<td>
<img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="48" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="87" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="290" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="195" height="1" alt=""></td>
</tr>
Is there anyway of getting rid of the extra spaces?
Try style="line-height: 0px;" on table cells.
Also look carefully if widths and heights on table cells and images are correct and set properly.
The problem is that slicing full layout sometimes creates unnecessary white space for images, as that full layout slicing does not properly justify the trs and tds for the layout. I suggest you need to create a table in dreamweaver and slice only the images that you require and put them manually. This will solve your issue. I have done it practically and it works for me.
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>