This is my snippet of code:
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="580" class="email-container">
<tr>
<td><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Facebook.jpg" width="194" height="50" alt="Follow us on Facebook!" style="display:block"/></td>
<td><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Twitter.jpg" width="194" height="50" alt="Follow us on Twittter!" style="display:block"/></td>
<td><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Insta.jpg" width="194" height="50" alt="Follow us on Instagram!" style="display:block"/></td>
</tr>
<tr>
<td><img src="http://classicstage.org/wp-content/uploads/2018/07/footer.jpg" width="580" height="175" alt="#ClassicStage #CSCCarmenJones, www.classicstage.com, 136 E 13th St New York NY 10003" style="display:block"/>
</td>
</tr>
</table>
Why does it look like this in Dreamweaver:
But like this in Gmail:
In a table every table should have the same number of rows or colspan can be used to span a table across multiple columns. It is not recommended to use colspan as different email clients start having hicups.
Table inside a table column
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="580" class="email-container">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="580" class="email-container">
<tr>
<td><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Facebook.jpg" width="194" height="50" alt="Follow us on Facebook!" style="display:block"/></td>
<td><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Twitter.jpg" width="194" height="50" alt="Follow us on Twittter!" style="display:block"/></td>
<td><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Insta.jpg" width="194" height="50" alt="Follow us on Instagram!" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="http://classicstage.org/wp-content/uploads/2018/07/footer.jpg" width="580" height="175" alt="#ClassicStage #CSCCarmenJones, www.classicstage.com, 136 E 13th St New York NY 10003" style="display:block"/>
</td>
</tr>
</table>
The colspan method (for you to understand how it works)
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="580" class="email-container">
<tr>
<td><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Facebook.jpg" width="194" height="50" alt="Follow us on Facebook!" style="display:block"/></td>
<td><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Twitter.jpg" width="194" height="50" alt="Follow us on Twittter!" style="display:block"/></td>
<td><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Insta.jpg" width="194" height="50" alt="Follow us on Instagram!" style="display:block"/></td>
</tr>
<tr>
<td colspan="3"><img src="http://classicstage.org/wp-content/uploads/2018/07/footer.jpg" width="580" height="175" alt="#ClassicStage #CSCCarmenJones, www.classicstage.com, 136 E 13th St New York NY 10003" style="display:block"/>
</td>
</tr>
</table>
Try the first one (it will work).
Cheers
Related
I'm making a mailing html page and my social buttons keep having some kind of margin that I can't work away. I posted my code and a fiddle below so you can see where I'm stuck.
https://jsfiddle.net/zh78uc9s/
CODE:
<td rowspan="10" style="text-align: left" valign="top" width="auto" border="0" cellspacing="0" cellpadding="0">
<!--Social media knopkes en links-->
<table width="25px" height="100px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="25" height="25"><img src="elementen/Spacer25.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="spacerke" /></td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/facebook.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="facebook" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/youtube.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="youtube" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/linkedin.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="linkedin" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/twitter.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="twitter" />
</td>
</tr>
</tbody>
</table>
</td>
The margin between each social buttons seams a td's style setting, try with
td {
display: inline-block;
}
JsFiddle
I am trying to do the following design
So my outer table will have 2 table rows.
The first table row will have 3 td's which will each contain their own inner table (tables represented by colour shading in the design).
So my first table rows tds look like this
<table width="650" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="image1.jpg" alt="" width="186" height="20" border="0" style="display: block;"></td>
</tr>
<tr>
<td><img src="image4.jpg" alt="" width="34" height="66" border="0" style="display: block;"></td>
<td><img src="image5.jpg" alt="" width="120" height="66" border="0" style="display: block;"></td>
<td><img src="image6.jpg" alt="" width="32" height="66" border="0" style="display: block;"></td>
</tr>
<tr>
<td colspan="3"><img src="image12.jpg" alt="" width="186" height="20" border="0" style="display: block;"></td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="image2.jpg" alt="" width="67" height="106" border="0" style="display: block;"></td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="image3.jpg" alt="" width="397" height="26" border="0" style="display: block;"></td>
</tr>
<tr>
<td><img src="image7.jpg" alt="" width="178" height="25" border="0" style="display: block;"></td>
<td><img src="image8.jpg" alt="" width="83" height="25" border="0" style="display: block;"></td>
<td><img src="image9.jpg" alt="" width="15" height="25" border="0" style="display: block;"></td>
<td><img src="image10.jpg" alt="" width="121" height="25" border="0" style="display: block;"></td>
</tr>
<tr>
<td colspan="4"><img src="image11.jpg" alt="" width="397" height="55" border="0" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
Now everything looks fine, just how it should do. I am not too sure if I have done the colspans correctly though?
Anyways, moving onto the second table row, I have the following
<table width="650" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
//first table row data
</tr>
<tr>
<td colspan="4">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="image13.jpg" alt="" width="33" height="122" border="0" style="display: block;"></td>
<td><img src="image14.jpg" alt="" width="255" height="122" border="0" style="display: block;"></td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="image15.jpg" alt="" width="362" height="122" border="0" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
As soon as I add the second row, my design messes up. Essentially, I end up with my design looking something like the following
How can I avoid this from happening? I think it may be to do with my colspans, not too sure though.
Thanks
A couple huge things..
Where is this appearing? Outlook I presume, what version(s)?
define inline widths and max-width for each element where width is a concern, do it inline within table HTML. Maintain outer table wrapping all elements within. If main outer table element is ignored. Nest a few tables as wrappers until elements are contained to desired layout. Use CSS but do it inline.
Read this article.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" height="131" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="570" height="131">
<img title="header_agado_zg_lv.jpg" alt="header_agado_zg_lv.jpg" border="0" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_lv.jpg" width="570" height="131">
</td>
<td>
<table width="130" height="131" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img title="header_agado_zg_ds1.jpg" alt="header_agado_zg_ds1.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds1.jpg" width="130" height="19" border="0"></td>
</tr>
<tr style="height: 25px;">
<td style="height: 25px;"><img src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds2.jpg" width="130" height="25" border="0"></td>
</tr>
<tr>
<td><img title="header_agado_zg_ds3.jpg" alt="header_agado_zg_ds3.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds3.jpg" width="130" height="12" border="0"></td>
</tr>
<tr>
<td><img src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds4.jpg" width="130" height="25" border="0"></td>
</tr>
<tr>
<td><img title="header_agado_zg_ds5.jpg" alt="header_agado_zg_ds5.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds5.jpg" width="130" height="12" border="0"></td>
</tr>
<tr>
<td><img src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds6.jpg" width="130" height="25" border="0"></td>
</tr>
<tr>
<td><img title="header_agado_zg_ds7.jpg" alt="header_agado_zg_ds7.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds7.jpg" width="130" height="13" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img title="header_agado_sp.jpg" alt="header_agado_sp.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_sp.jpg" width="700" height="152"></td>
</tr>
</table>
</tr>
</table>!
Gmail:
Browser:
Why does the page appear different in Gmail to how it appears in a browser? How can I solve this problem?
Add Inline style to each image tag in email :
For example:
<img title="header_agado_zg_lv.jpg" alt="header_agado_zg_lv.jpg" border="0" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_lv.jpg" width="570" height="131" style='border: none; display:block;' />
In short style='border: none; display:block;'
Table cell widths are staggered in iPhone Gmail.
Is there a way to force Gmail for iPhone to render table cells at their designated widths? Oddly, the multi-slice rows expand to the set 'width:650'. The single slice rows are narrower although they are also set to 'width:650'.
As far as I can tell, my emails look perfect in all desktop email clients - even Outlook! It also looks fine in Mail for iPhone.
I've tried using 'border-collapse:collapse', 'width:100%' on the tables and td's, and finally 'table-layout:fixed'.
This is the HTML:
`
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</title>
</head>
<body>
<img border="0" style="display:block;" src="spacer.gif" width="1" height="1" />
<table bgcolor="#fff" border="0" align="center" cellpadding="0" cellspacing="0" style="table-layout:fixed;width:650px;">
<tbody>
<tr>
<!--/*************** BEGIN LEAD ***************/ -->
<td align="left" valign="top" bgcolor="#fff" width="650"><span id="part1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
<!-- /*************** END LEAD ***************/ -->
</tr>
<!-- /*************** BEGIN HEADER INC ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="650"><span style="font-family: Arial, Helvetica, sans-serif; font-size:10px; color:#666; line-height:13px;margin-top:2px;"><a style="color:#666; text-decoration:underline;line-height:13px;" href="">XXXXXXXXXXXXXX</a> iXXXXXXXXXXXXXXXXXXX<a style="color:#666; text-decoration:underline;font-size:10px;line-height:13px;" href=""> XXXXXXXXXXXX</a>XXXXXXXXXXXXXXXXX<br />
<span style="font-weight:bold;">XXXXXXXXXXXXXXXXX</span> XXXXXXXXXXXXXXXX</span></td>
</tr>
<tr>
<td width="650"><img src="spacer.gif" width="650" height="46" border="0" style="display: block;" /></td>
</tr>
<tr>
<td><table id="Table_01" width="650" height="47" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="280"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_01.gif" width="280" height="47" alt="Territory Ahead"> </td>
<td width="370"><img border="0" style="display:block;margin:0;padding:0;" src="spacer3_02.gif" width="370" height="47" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td><table id="Table_01" width="650" height="31" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="97"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_03.gif" width="97" height="31" alt="Men's"> </td>
<td width="90"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_04.gif" width="90" height="31" alt="Women's"> </td>
<td width="93"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_05.gif" width="93" height="31" alt="Isabella Bird"> </td>
<td width="132"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_06.gif" width="132" height="31" alt="Men's Clearance"> </td>
<td width="83"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_07.gif" width="83" height="31" alt="Women's Clearance"> </td>
<td width="155"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_08.gif" width="155" height="31" alt="eGift Cards"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-top: solid 1px #b69358;" width="650">
<tr>
<td width="650" style="height:8px;" ></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- /*************** END HEADER INC ***************/ -->
<!-- /*************** BEGIN PROMO ***************/ -->
<!-- /*************** END PROMO ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><!-- /*************** BEGIN MAIN ***************/ -->
<table id="Table_01" width="650" height="1595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="650" height="352" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.jpg" width="650" height="405" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.jpg" width="650" height="408" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_04.jpg" width="650" height="430" alt=""></td>
</tr>
</table>
<!-- /*************** END MAIN ***************/ --></td>
</tr>
<!-- /*************** BEGIN FOOTER INC ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><table width="650" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="650"><table id="Table_01" width="650" height="32" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="125"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="125" height="32" alt=""></td>
<td width="88"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.gif" width="88" height="32" alt=""></td>
<td width="158"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.gif" width="158" height="32" alt=""></td>
<td width="105"><img border="0" style="display:block;" src="spacer_04.gif" width="105" height="32" alt=""></td>
<td width="31"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_05.gif" width="31" height="32" alt=""></td>
<td width="31"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_06.gif" width="31" height="32" alt=""></td>
<td width="112"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_07.gif" width="112" height="32" alt=""></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td align="center" style="padding-top:20px;" width="650"><span style="font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#666; line-height:13px;"><a style="font-size:10px;color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXXX</a> | <a style="font-size:10px; color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXX</a><br />
<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
</tr>
<tr>
<td width="650"><span style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000;"><img src="spacer.gif" width="650" height="49" border="0" style="display: block;margin:0;padding:0;"></span></td>
</tr>
</tbody>
</table></td>
</tr>
<!-- /*************** END FOOTER INC ***************/ -->
<!-- /*************** BEGIN DISC ***************/ -->
<tr>
<td align="left" valign="top" bgcolor="#fff" width="650"><span style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
</tr>
<!-- /*************** END DISC ***************/ -->
</tbody>
</table>
</body>
</html>
`
Finally found the solution! For an image to render at full width in the Gmail mobile app, the img tag must contain the style property set to style="display:block;min-width:650px;. This forces the content to full width as the Gmail mobile app is programmed to 'auto-adjust' the size of elements within the email. Thanks for your help on this Jon!
In the sliced rows, you don't have width="" set in your <td> tags. I know it is in the image tags, but it might make a difference.
Also try using style="margin: 0; border: 0; padding: 0; display: block;" on your images, it may help.
Try those 2 things - if they don't help, update and re-post the code so we can eliminate those potential issues. A screenshot/image of the error might also help.
I have a couple of images inside of a table (it's for an email so I've had to use tables) that are not aligning even once I have used cellpadding=0. Any ideas?
<table>
<tbody>
<tr>
<td cellpadding="0" colspan="5"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_01.gif" alt="" width="444" height="43" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0" rowspan="4"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_02.gif" alt="" width="46" height="252" /></td>
<td cellpadding="0" colspan="3"><img src="http://www.tradetech.net/images/Holidayemail/boxes.gif" alt="" width="296" height="142" /></td>
<td cellpadding="0" rowspan="4"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_04.gif" alt="" width="102" height="252" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0" colspan="3"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_05.gif" alt="" width="296" height="33" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0" rowspan="2"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_06.gif" alt="" width="32" height="77" /></td>
<td cellpadding="0"><img src="http://www.tradetech.net/images/Holidayemail/greeting.gif" alt="" width="151" height="29" /></td>
<td cellpadding="0" rowspan="2"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_08.gif" alt="" width="113" height="77" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_09.gif" alt="" width="151" height="48" /></td>
</tr>
</tbody>
</table>
cellpadding="0" belongs inside the <table> tag, not the <td> tag or the <tr> tag.
Cellpadding does not do anything on the tag as stated above, since you are creating a HTML e-mail you need to set the width on the tags to not allow any room to move around. Just adding images doesn't help.
I've created a fiddle where the images in your layout line up perfectly: http://jsfiddle.net/Scopestyle/6Qva2/
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<table width="444" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img style="display: block;" src="http://placehold.it/444x43" alt="" width="444" height="43" /></td>
</tr>
<tr>
<td width="46" rowspan="3" valign="top"><img style="display: block;" src="http://placehold.it/46x252" alt="" width="46" height="252" /></td>
<td width="296"><img style="display: block;" src="http://placehold.it/296x142" alt="" width="296" height="142" /></td>
<td width="102" rowspan="3" valign="top"><img style="display: block;" src="http://placehold.it/102x252" alt="" width="102" height="252" /></td>
</tr>
<tr>
<td><img style="display: block;" src="http://placehold.it/296x33" alt="" width="296" height="33" /></td>
</tr>
<tr>
<td width="296" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32" rowspan="2"><img style="display: block;" src="http://placehold.it/32x77" alt="" width="32" height="77" /></td>
<td width="151"><img style="display: block;" src="http://placehold.it/151x29" alt="" width="151" height="29" /></td>
<td width="113" rowspan="2"><img style="display: block;" src="http://placehold.it/113x77" alt="" width="113" height="77" /></td>
</tr>
<tr>
<td width="151"><img style="display: block;" src="http://placehold.it/151x48" alt="" width="151" height="48" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
If you look at the code notice a few tricks I've used to make it work:
The HTML is nested in tables. This makes complicated cell layouts easier to manage and less likely to break.
All cells have the width of the images, so we don't allow gaps between the cells.
The images have inline styles with the display: block; attribute. This neutralizes any gaps below the image that could occur in different browsers and e-mail clients.
When testing your e-mail code, putsmail.com is a handy tool to see what it looks like in your inbox. When debugging different e-mail clients take a look at emailology.org for interesting tips.
wow I can't even imagine what you're trying to do but to remove most of the spacing add this to the <table> tag:
<table cellpadding="0" cellspacing="0" border="0">