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">
Related
I've tried several options to do this, but none have worked. Just trying to remove the padding around the images and tighten up the table. I'm thinking there must be some inline style I can use, but I'm too much of a novice to figure this out just yet. Any help would be greatly appreciated.
Here is the html generated from photoshop.
<table id="Table_01" class=" alignleft" style="height: 291px" border="0" width="570" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"> <img src="http://oceanleadership.org/wp-content/uploads/BOEM-Logo.jpg" alt="http://www.boem.gov/" width="297" height="115" border="0" /></td>
<td colspan="2"> <img src="http://oceanleadership.org/wp-content/uploads/JASCO-Logo.jpg" alt="http://www.jasco.com/" width="273" height="115" border="0" /></td>
</tr>
<tr>
<td> <img src="http://oceanleadership.org/wp-content/uploads/CSA-Ocean-Sciences-Inc.-Logo.jpg" alt="https://www.csaocean.com/" width="152" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/IFAW-Logo.jpg" alt="http://www.ifaw.org/united-states" width="145" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/MBARI-Logo.jpg" alt="http://www.mbari.org/" width="125" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Schmidt-Ocean-Institute-Logo.jpg" alt="https://schmidtocean.org/" width="148" height="96" border="0" /></td>
</tr>
<tr>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Teledyne-Marine-Logo.jpg" alt="http://www.teledynemarine.com/SitePages/HomePage.aspx" width="152" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Ocean-Sonics-Logo.png" alt="http://oceansonics.com/" width="145" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/L3-Maripro-Logo.jpg" alt="http://www.l-3mps.com/maripro/" width="125" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Sea-Bird-Scientific-Logo.png" alt="https://sea-birdscientific.com/" width="148" height="80" border="0" /></td>
</tr>
</tbody>
</table>
<br />
Using an inline style isn't a great idea, but including the attribute style='padding: 0px, margin: 0px' inline in your img tags would ensure the browser isn't rendering any extra space around the images themselves. A better option would be to include a .css file with the rule:
td img {
padding: 0px;
margin: 0px
}
That rule should automatically assign the styling to all img tags within your table.
Its Problem with Image I removed your style still its having white space its because of your images.
You can see below
your code
<table id="Table_01" class=" alignleft" style="height: 291px" border="0" width="570" cellspacing="0" cellpadding="0">
I removed this style and tried here
Demo
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.
I am trying to create a "cool" email signature for my company using only text and html with NO images whatsoever. I am trying to recreate our company's logo using only tables since it is basically a four cell table with different bg colors. What seemed easy at first has become quite a nuisance. It obviously looks good in browsers but once I paste it into Outlook 2013 the cells don't retain their height and width values. Any suggestions on how to make this work across most current email clients??
http://codepen.io/anon/pen/wqaLm
Firstly, a good technique is to style your cells inline like:
<td style="width:10px; height:10px;">
Secondly: have a look at this article: "A complete breakdown of the CSS support for every popular mobile, web and desktop email client"
Here is a basic example. Not sure exactly what the logo looks like, so here are a few versions. If you want to have the gap between the cells smaller than 20px, you need to use the 3rd technique. This is because Outlook has a min-height on cells of around 19px which will create a larger gap between the rows.
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50" bgcolor="#333333">
</td>
<td width="50" height="50" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="50" height="50" bgcolor="#444444">
</td>
<td width="50" height="50" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40" height="40" bgcolor="#333333">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="40" height="20">
</td>
<td width="20" height="20">
</td>
<td width="40" height="20">
</td>
</tr>
<tr>
<td width="40" height="40" bgcolor="#444444">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30" height="30" align="left" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#333333">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#555555">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30" height="30" align="left" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#444444">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#666666">
</td>
</tr>
</table>
</td>
</tr>
</table>
<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 width="33%" border="0" border-spacing: 0px; cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="01.png" width="619" height="143" " /></td>
</tr>
<tr>
<td height="13" valign="top"><img 02.png" width="75" height="13" /></td>
<td width="32%" valign="top"><img src="03.png" width="200" height="13" /></td>
<td width="56%" colspan="2" valign="top"><04.png" width="344" height="13" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><img 05.png" width="619" height="150" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="85%"><img src="06.png" width="474" height="28" /></td>
<td width="11%"><img src="07.png" width="71" height="28" /></td>
<td width="4%"><img src="08.png" width="74" height="28" /></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4" valign="top"><img src="09.png" width="619" height="144" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="76%" height="32"><img src="10.png" width="474" height="32"/></td>
<td width="12%"><img src="11.png" width="71" height="32"/></td>
<td width="12%"><img src="12.png" width="74" height="32"/></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4" valign="top"><img src="13.png" width="619" height="140" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="99%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="76%"><img src="14.png" width="474" height="36"/></td>
<td width="12%"><img src="15.png" width="71" height="36" /></td>
<td width="12%"><img src="16.png" width="74" height="36"/></td>
</tr>
</table></td>
</tr>
<tr>
<td height="109" colspan="4" rowspan="2" valign="top"><img 19.png" width="619" /></td>
</tr>
</table>
I have this code in my email template. When I compile it on my local page, it works fine, but when I send it though email, gaps are appearing in between the lines and tables. I tried this also
<style>
table { border-spacing: 0px; }
</style>
But not worked. Anybody know about this issue?
Or how I should print it in php? so that it sends as an image in email. Because after receiving an email, when I forward it, then its shows me correct because it become an image. So I am thinking to make it as an image before shooting email in the script. But how can I print this html in php?
<table ... border-spacing: 0px; ...>
This isn't valid markup. border-spacing would be put within a style property:
<table ... style="border-spacing: 0px;" ...>
To remove the spacing, you'd simply add:
table {
border-collapse: collapse;
}
try this
<table cellspacing="0" cellpadding="0">
</table>