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 ...>
Related
I know there is a forum specifically for sharepoint, but my problem is more related to general CSS & HTML rather than sharepoint.
now i created an aspx page inside a sharepoint site, and i want to show a number of images underneath each other, and i chose to show the images inside a table to guarantee that i will always get 3 images per line, regardless of the end user screen size.
But the problem is that the images will have extra spaces between them as follow:-
although i defined the images width x height to be (60px X 59px) + the table width to be 17%, which is the minimum table width i can get. as if i decrement the width to be less than 17% nothing will be minimized. here are the settings for the images and the table:-
here is the markup for my table which contain images:-
<table class="ms-rteTable-0" cellspacing="0" style="width: 17%; height: 364px;">
<tbody>
<tr class="ms-rteTableEvenRow-0">
<td class="ms-rteTableEvenCol-0" style="width: 30px; height: 81px;"><a title="X" href="***" target="_blank"><img alt="" src="/Resources/***.png" style="margin: 0px; width: 60px;"/></a></td>
<td class="ms-rteTableOddCol-0" style="width: 30px; height: 81px;"><a title="" href="*****" target="_blank"><img alt="" src="/Resources/****.png" style="margin: 0px; width: 60px;"/></a></td>
<td class="ms-rteTableEvenCol-0" style="width: 30px; height: 81px;"><a name="******" title="" href="***"><img alt="" src="/Resources/Smart%20Support%20Logo.png" style="margin: 0px; width: 60px;"/></a></td>
</tr>
<tr class="ms-rteTableOddRow-0">
<td class="ms-rteTableEvenCol-0" style="width: 30px;"><a title="t" href="*****" target="_blank"><img alt="" src="/Resources/****.png" _moz_resizing="true" style="margin: 0px; width: 60px;"/></a></td>
<td class="ms-rteTableOddCol-0" style="width: 30px;"><a title="" href="h*****" target="_blank"><img alt="" src="/Resources/***.png" style="margin: 0px; width: 60px;"/></a></td>
<td class="ms-rteTableEvenCol-0" style="width: 30px;"><a title="" href="****" target="_blank"><img alt="" src="/Resources/***.png" style="margin: 0px; width: 60px;"/></a></td>
</tr>
so can anyone advice how i can minimize the space between the images? as seems inside the available UI options this is not possible.
Thanks
You may want to add cellpadding=0 and/or cellspacing=0 on your table in the mark-up:
<table cellpadding=0 cellspacing=0>
<tbody>
<tr class="ms-rteTableEvenRow-0">
<td class="ms-rteTableEvenCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
<td class="ms-rteTableOddCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
<td class="ms-rteTableEvenCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
</tr>
<tr class="ms-rteTableOddRow-0">
<td class="ms-rteTableEvenCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
<td class="ms-rteTableOddCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
<td class="ms-rteTableEvenCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
</tr>
</tbody>
</table>
⋅
⋅
⋅
Or, using CSS:
table {
border-collapse: collapse;
}
table td {
margin: 0;
padding: 0;
}
<table>
<tbody>
<tr class="ms-rteTableEvenRow-0">
<td class="ms-rteTableEvenCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
<td class="ms-rteTableOddCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
<td class="ms-rteTableEvenCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
</tr>
<tr class="ms-rteTableOddRow-0">
<td class="ms-rteTableEvenCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
<td class="ms-rteTableOddCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
<td class="ms-rteTableEvenCol-0">
<a><img alt="" src="http://placekitten.com/60/60" /></a>
</td>
</tr>
</tbody>
</table>
Hope it helps.
I've visited frequently for answers to my HTML problems, but this one has me stumped. I have tested the email backwards and forwards in Litmus, and it looks great in everything, but I had one colleague say that a copy that she received in her personal Gmail (using Chrome) always has a 1 pixel line between slices 2 + 3. I've picked apart the HTML character by character and cannot find a difference that would cause this line to only insert itself between these two slices, and none of the others.
A sample is posted below;
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://Events_02.jpg" width="600" height="155" alt="Text1" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://Events_03.jpg" width="600" height="146" alt="Text2" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://Events_04.jpg" width="600" height="177" alt="Text3" style="display:block;" border="0"/>
</a>
</td>
</tr>
please have a look on the snippet i have created , this may help you.
Thanks
<html>
<head>
<title></title>
<style type="text/css">
body,table {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://placehold.it/600x155" width="600" height="155" alt="Text1" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://placehold.it/600x155" width="600" height="146" alt="Text2" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://placehold.it/600x155" width="600" height="177" alt="Text3" style="display:block;" border="0"/>
</a>
</td>
</tr>
</table>
</body>
</html>
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.
I am creating an email signature which is made up of a sliced image. Here is how the image should fit together:
Below is the code:
<table width="406" height="136" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td colspan="4" height="82">
<img src="img/Rectangle_1.png" width="406" height="82" alt="" style="display: block;"></td>
</tr>
<tr>
<td rowspan="2" height="54">
<img src="img/Rectangle_2.png" width="25" height="54" alt="" style="display: block;"></td>
<td height="40">
<img src="img/Rectangle_3.png" width="134" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td>
<td height="40">
<img src="img/Rectangle_4.png" width="125" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td>
<td rowspan="2" height="54">
<img src="img/Rectangle_5.png" width="122" height="54" alt="" style="display: block;"></td>
</tr>
<tr>
<td colspan="2" height="14" style="line-height: 14px;">
<img src="img/Rectangle_6.png" width="259" height="14" alt="" style="display: block;"></td>
</tr>
</table>
This renders perfectly in nearly all mail clients apart from Office365 (in any browser). View screenshots for all clients/browsers https://www.emailonacid.com/app/acidtest/viewresult/tUjH3Kk7JSzaD5D0F6X2agbPFHRkUvVfkGetyDv2hMgll. The below screenshot shows Office365 in IE11.
I can not seem to fix this whitespace issue nor the outline around the linked images. I have tried both the fixes listed here http://www.emailonacid.com/blog/details/C13/two_fixes_for_image_spacing_in_outlook_web_app_owa but neither of them have worked. align="left" fixed it in Office365 in both Chrome and Firefox but it remained broken in other browsers moreover it broke the layout in many other clients. It was a similar story for the div fix. See screenshots for all clients/browsers with align left 'fix' here https://www.emailonacid.com/app/acidtest/viewresult/SyapFGGm5JKUgTdZEs6L7oqlmHLOuQqMcFQGM307uA7LH
Does anyone know how to resolve this issue without causing issues for the other clients/browsers?
Many Thanks
when using images you need to also use the align = rule to remove the spaces in owa
It is a huge pain
<img src="img/Rectangle_2.png" width="25" height="54" alt="" align="center" style="display: block;">
if it is just solid colors you should stick to background color for tables
I was able to replicate your issue. To fix it, remove all the hard returns in your code; it looks like the signature html editor adds in multiple non-breaking spaces ( ) that causes the image alignment issues. Note how all the code appears on one line below; it will wrap as necessary in the html editor.
<table width="406" height="136" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <tr> <td colspan="4" height="82"> <img src="img/Rectangle_1.png" width="406" height="82" alt="" style="display: block;"></td></tr><tr> <td rowspan="2" height="54"> <img src="img/Rectangle_2.png" width="25" height="54" alt="" style="display: block;"></td><td height="40"> <img src="img/Rectangle_3.png" width="134" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td><td height="40"> <img src="img/Rectangle_4.png" width="125" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td><td rowspan="2" height="54"> <img src="img/Rectangle_5.png" width="122" height="54" alt="" style="display: block;"></td></tr><tr> <td colspan="2" height="14" style="line-height: 14px;"> <img src="img/Rectangle_6.png" width="259" height="14" alt="" style="display: block;"></td></tr></table>
One other thing - the images that are hyperlinked (inside <a> tags) need a border attribute set to zero instead of setting it via inline CSS.
<a href=""><img src="" width="" alt="" border="0" style="display:block;"/>
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>