I have a HTML table with each td having a rounded corner image i put the images together and manage to get table with rounded corners .
Here's how it looks,
Here's the HTML for the below along with the css
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" frame="void"
style="width: 100%;">
<tr>
<td width="1%">
<img alt="" src="Images/frame_top_left.jpg" />
</td>
<td class="top_frame">
</td>
<td width="1%" align="right">
<img alt="" src="Images/frame_top_right.jpg" />
</td>
</tr>
<tr>
<td>
<img alt="" src="Images/frame_bottom_left.jpg" />
</td>
<td class="bottom_frame">
</td>
<td align="right">
<img alt="" src="Images/frame_bottom_right.jpg" />
</td>
</tr>
</table>
And heres the css
Now data is placed dynamically in the td with the css class "bottom_frame" whenever there's data placed the whole table gets changed heres how it looks when data is placed
heres the image of the HTML data inserted.
How do i let my table be maintained with any loss to it ????
Thanks & Regards,
Francis P.
You'd better add one more row to your table to put a content in it. Something like this:
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" frame="void"
style="width: 100%;">
<tr>
<td width="1%">
<img alt="" src="Images/frame_top_left.jpg" />
</td>
<td class="top_frame">
</td>
<td width="1%" align="right">
<img alt="" src="Images/frame_top_right.jpg" />
</td>
</tr>
<tr>
<td colspan="3" class="middle_frame">
-- Put your content right here --
</td>
</tr>
<tr>
<td>
<img alt="" src="Images/frame_bottom_left.jpg" />
</td>
<td class="bottom_frame">
</td>
<td align="right">
<img alt="" src="Images/frame_bottom_right.jpg" />
</td>
</tr>
</table>
Related
I had to create an emailing html and I can say it is definitely a hard thing to do. Now, making sure it is responsive is beyond obnoxious.
I'm stuck right now on a seemingly unsolvable problem.
Here is the problem : I have a table with 3 columns (column 1 is a table, column 2 a spacer colum, column 3 is a table).
When I go mobile, I want the third column to go under the column 1. But no matter what I try I cant do it.
Please note that the display parameter CANT be used. That's very important. Google mail doesnt know what display means (...)
The only thing that seem ok to use are : float and align.
Here is my jsfiddle
https://jsfiddle.net/cnw0o3wy/
the follow us and contact us cells are in the same table; that table must go under the first table. I fail to achieve that effect for now
<tr>
<td>
<table align="center">
<tr>
<td class="align-top grey responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307">
<tbody>
<tr class="grey">
<td class="align-top"colspan="3"><img alt="" src="images/mobile.png" /></td>
</tr>
<tr class="grey">
<td width="113" class="w113"> </td>
<td>
<img src="images/appstore.png" title="Apple Store" />
</td>
<td>
<img src="images/googleplay.png" title="Google Play" />
</td>
</tr>
</tbody>
</table>
</td>
<td width="4"class="responsive">
</td>
<td class="responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307" class="w307">
<tbody class="grey">
<tr class="grey">
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="t-gris px12 bold align-top">Follow us !</td>
</tr>
<!-- 32 PX SPACING -->
<tr>
<td height="36" width="151" class="w151"><img src="images/shim.png" alt="" height="31" /> </td>
</tr>
<tr class="align-center">
<td>
<img class="social" src="images/fb.png" alt="Facebook" />
<img class="social" src="images/twitter.png" alt="Twitter" />
<img class="social" src="images/mail.png" alt="Mail" />
</td>
</tr>
</tbody>
</table>
</td>
<td class="white">
<img alt="" src="images/shim.png" width="4" />
</td>
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px12 bold t-gris align-top">Contact us !</td>
</tr>
<tr>
<td><img alt="" src="images/logo2.png" /></td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px10 t-gris bold">
50/54 <br/>92100 <br/>+33 1 49 00 00 00 www.mail.fr
<span style="text-decoration: underline;">
courrier#mail.fr
</span>
</td>
</tr>
<tr>
<td style="line-height:7px;"height="7" width="151" class="w151"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
solved my problem with the following lines :
td[class="responsive-grey"],
td[class="responsive-grey responsive-grey-spacing"],
td[class="align-top grey responsive-grey"] {
float: left; width:100%;
}
basically float left on all three columns
I am creating an HTML Email and am struggling getting images to render in Outlook and Gmail. I have the usual problem of extra space being added between table rows in Gmail however assigning block to the display style of the images like this:
style="display:block;"
does not work. The only fix I managed to find was to set line height to zero on all the td elements:
<td style="line-height=0">
but when I do this Outlook then cuts off all the tops of my images! Are there any other fixes I could use ??
----EDIT------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
img
{
display:block;
}
</style>
</head>
<body style:"margin:0; padding:0;">
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="border-spacing:0;border:0">
<table align="center" cellpadding="0" cellspacing="0" width="200"
border="0" style="border-collapse:collapse;background-color:black;padding:0;border-spacing:0;">
<tr style="display:block;">
<td style="padding:0;border:0;border-collapse:collapse;width:20%;margin:0;">
<img src="http://test..co.za/Custom//images/EMail_logocrop.png" style="display:block;"/>
</td>
<td style="color:White;">
If you are having trouble viewing this email click here
</td>
</tr>
<tr style="display:block;line-height:0;">
<td colspan="2">
<img src="http://test..co.za/Custom//images/EMail_logo.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_bet.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_stand.jpg" style="display:block;">
</td>
</tr>
<tr>
<td colspan="2" style="width:100%;line-height:0;">
<img src="http://test..co.za/Custom//images/EMail_games.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_grasscrop.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0;" >
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop2.png" style="display:block;" />
</td>
<td>
<img src="http://test..co.za/Custom//images/EMail_pslcrop.png"/ style="display:block;">
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop3.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_chelseacrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop4.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_cricketcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop5.png" style="display:block;"/>
</td>
</tr>
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop6.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscroppsl.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop7.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropchelsea.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop8.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropt20.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop9.png" style="display:block;"/>
</td>
</tr>
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop10.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_sharkcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop11.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_arsenalcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop12.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_ligacrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop13.png" style="display:block;"/>
</td>
</tr>
<tr style="padding:0px;">
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop14.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropshark.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop15.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscroparsenal.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop16.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropliga.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop17.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="7" >
<img src="http://test..co.za/Custom//images/EMail_grasscrop18.png" style="display:block;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left:10px;">
<img src="http://test..co.za/Custom//images/EMail_footer.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2">
<img src="http://test..co.za/Custom//images/EMail_grasscropbottom.png" style="display:block;"/>
</td>
</tr>
</table>
</table>
Use this for your images:
style="margin: 0; border: 0; padding: 0; display: block;"
That will prevent any spacing around them. If the spacing persists, it is because of the table itself, and in particular the extra (bad word here) Microsoft inserts.
Are you sending/forwarding from Outlook to Gmail? The gaps are unavoidable if that is the case. See similar question here. Note that tables next to tables (in the code, but stacked on page) make bigger gaps than table rows, and by setting the color on a wrapping parent element, you can hide the 'line' created when they separate.
You have a bunch of extra stuff in your code you don't really need. Just put table td {border-collapse: collapse;} in your style tag then all you need is this:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
Just note that table cells need to be a min of about 19px as that is the min-height it can be in Outlook. I prefer to design around that, but some people mess with line-height tricks also.
Have you looked into using http://htmlemailboilerplate.com/ - it helps eliminate many of the problems that you are faced with when building HTML emails.
It will help normalise the email across many clients and just leaves you to do the actual building.
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>
I am trying to figure out how to have a row of a table with two td tags stay on top of another row with only one td tag and align perfectly. I've tried colspan="2" on the bottom row but that doesn't work.
Here is what I have so far:
<table cellpadding="0" cellspacing="0" border="0" width="800"><!--wrapper-->
<table border="1">
<tr>
<td style="width: 50px"><img src="images/img1.jpg" />
</td>
<td><img src="images/img2.jpg" />
</td>
</tr>
<tr colspan="2">
<td><img src="images/img3.jpg" />
</td>
</tr>
</table>
</table>
Change
<tr colspan="2">
<td><img src="images/img3.jpg" />
</td>
to
<tr>
<td colspan="2"><img src="images/img3.jpg" />
</td>
The colspan should be on the td
colspan belongs on the <td> not the <tr>
<table cellpadding="0" cellspacing="0" border="0" width="800">
<!--wrapper-->
<table border="1">
<tr>
<td style="width: 50px">
<img src="images/img1.jpg" />
</td>
<td>
<img src="images/img2.jpg" />
</td>
</tr>
<tr>
<td colspan="2">
<img src="images/img3.jpg" />
</td>
</tr>
</table>
</table>
jsFiddle example
<table width="980" border="0">
<tbody>
<tr>
<td width="25%">
<img width="300" style="overflow: hidden;" alt="" src="1.jpg">
</td>
<td width="75%">
<h1>ttt</h1>
<p>dgggg</p>
</td>
</tr>
<tr>
<td width="25%"><img alt="" src="98.jpg"></td>
<td width="25%"><img alt="" src="57_998.jpg"></td>
<td width="25%"><img alt="" src="7_998.jpg"></td>
<td width="25%"><img alt="" src="98.jpg"></td>
</tr>
</tbody>
</table>
Why is the second row td the same width with the first one(the first row td). the width="25%" doesn't work. how to correct it?
use colspan attribute to achieve this
<table width="980" border="0">
<tbody>
<tr>
<td width="25%"><h1>A</h1></td>
<td width="75%" colspan="3"><h1>B</h1></td>
</tr>
<tr>
<td width="25%">1</td>
<td width="25%">2</td>
<td width="25%">3</td>
<td width="25%">4</td>
</tr>
</tbody>
</table>
A good intro on the colspan attribute can be found here: http://reference.sitepoint.com/html/td/colspan
Here's a quick example similar to what you tried to achieve
http://jsbin.com/egahey/1/
by default in html, the column in a row takes the inherited width of the column in the preceding row ,
for achieving desired you have to use col span.
<table width="980" border="0">
<tbody>
<tr>
<td width="25%"><img width="300" src="1.jpg"></td>
<td width="75%" colspan="3"><h1>ttt</h1><p>dgggg</p></td>
</tr>
<tr>
<td width="25%"><img alt="" src="98.jpg"></td>
<td width="25%"><img alt="" src="57_998.jpg"></td>
<td width="25%"><img alt="" src="7_998.jpg"></td>
<td width="25%"><img alt="" src="98.jpg"></td>
</tr>
</tbody>
</table>
Imagine a table as an excel worksheet. All the rows in the same column must be the same width (of course, you can combine them just like excel too).
As for your question, you need to split the table into 2 tables to achieve different width:
<table width="980" border="0">
<tbody>
<tr>
<td width="25%"><img width="300" style="overflow: hidden;" alt="" src="1.jpg"></td>
<td width="75%"><h1>ttt</h1><p>dgggg</p></td>
</tr>
</tbody>
</table>
<table width="980" border="0">
<tbody>
<tr>
<td width="25%"><img alt="" src="98.jpg"></td>
<td width="25%"><img alt="" src="57_998.jpg"></td>
<td width="25%"><img alt="" src="7_998.jpg"></td>
<td width="25%"><img alt="" src="98.jpg"></td>
</tr>
</tbody>
</table>