I have a table defined as
<table width="600" cellspacing="0" cellpadding="0">
<table border="0" cellspacing="0" cellpadding="25" width="600">
<tr>
<td width="160" bgcolor="#efefef">Text</td>
<td width="340" bgcolor="#ffffff">Text</td>
</tr>
</table>
<tr>
<td colspan="2"><img src="image.jpg"></td>
</tr>
</table>
Here for the image I have a gray shaded area of width 210px and the rest is white.
Now this should get aliged with the first cell since it has width 160px + 50px (cellpadding) = 210px (in total)
However, outlook 2007 does not pick up this cellpadding. How can I get this to align in outlook 2007?
first of all I think your code should change
<table width="600" cellspacing="0" cellpadding="0">
<tr><td>
<table border="0" cellspacing="0" cellpadding="25" width="600">
<tr>
<td width="160" bgcolor="#efefef">Text</td>
<td width="340" bgcolor="#ffffff">Text</td>
</tr>
</table>
</td></tr>
<tr>
<td colspan="2"><img src="image.jpg"></td>
</tr>
</table>
Related
I am creating an email template and the header section of the email is a code block I took from another site.
The said header code block contains a logo and few text next to it. Here is an image of it.
In the editor of the Email Service Provider I use, the code block is fully visible but when I click on preview, the text dissapears and only the logo is visible like this
Does anyone know why is that.
Here is the code
`
<td class="esd-stripe" align="center">
<table class="es-header-body" align="center" cellpadding="0" cellspacing="0" width="550" style="background-color: #f6f3f0;" bgcolor="#f6f3f0">
<tbody>
<tr>
<td class="esd-structure es-p20" align="left">
<!--[if mso]><table width="560" cellpadding="0"
cellspacing="0"><tr><td width="98" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left">
<tbody>
<tr>
<td width="98" class="es-m-p0r es-m-p20b esd-container-frame" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-image es-m-txt-c" style="font-size: 0px;"><a target="_blank" href="https://viewstripo.email"><img src="https://ychxix.stripocdn.email/content/guids/CABINET_d3bb686276c9132ac5465c69a2399624/images/carla_logo.png" alt style="display: block;" width="65"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="20"></td><td width="442" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" align="right">
<tbody>
<tr>
<td width="442" align="left" class="esd-container-frame">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="esd-mobile-hidden">
<td align="center" class="esd-block-spacer" height="16"></td>
</tr>
<tr>
<td class="esd-block-menu" esd-tmp-menu-color="#2d0824">
<table cellpadding="0" cellspacing="0" width="100%" class="es-menu">
<tbody>
<tr class="links">
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/" style="color: #169179;"><b>Home<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/contact" style="color: #169179;"><b>About<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/about" style="color: #169179;"><b>Contact<b></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
`
I tried to change the font color and backround color to see if that was overlapping the text, but it didnt work.
http://imgur.com/a/fKv2H
I need banner with height 100px. and img inside it with height 120px. So the picture comeee out my banner for 20px;
Its for emails.
Also i need text column right before picture, so that text in column with background f4f4f4
<table>
<tr>
<td>
<img src="" style="margin-top:-20px;" />
</td>
<td>
banner text here
</td>
</tr>
</table>
You can do this two ways, one involved slicing the image into two and the other is using two more tables. I have added the code below for you to decide which one you want to go with.
Option 1:
This option has the image as one piece sitting in an outer table with 3 columns. The outer two columns have a table with white background to cater for the heads/hats popping out of the grey area. I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
<td width="171" valign="top"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Option 2
For this option, you will need to slice the top part of the image (with white background) and place both the images in one table with two rows. Both images are centered and I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#ffffff"><img src="http://i64.tinypic.com/lz7f6.png" style="display: block;">
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#f4f4f4"><img src="http://i68.tinypic.com/4qo1mu.png" style="display: block;"></td>
</tr>
</tbody>
</table>
The final outcome for both codes should look like this:
Let me know which option best suits you.
** UPDATE **
Your question asked if you can have option 1 with image to the left and text on the right, here is the example:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="171" valign="top" style="padding-left:20px;"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
<tr>
<td style="font-family:Arial; font-size:12px; color:#000000; padding:5px 10px;">This is some text for your email</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I added colors so you could see that it was outside the table. I gave the image a height of 120px, width of auto. Made the td's have a max-height of 100px; And I left your -20px margin on the image.
<body style="background-color:pink">
<table style="background-color:orange;">
<tr>
<td style="max-height:100px; overflow-y:initial;">
<img src="https://i.imgur.com/ZESO4DT.png" style="margin-top:-20px; height:120px; width:auto;" />
</td>
<td style="max-height:100px;overflow-y:initial;">
banner text here
</td>
</tr>
</table>
</body>
Having a little trouble with a HTML email on older versions of IOS in that tables will not align next to eachother. I am creating a responsive email layout for a client and have a need to use align="left" to float tables. ( sample code below )
I have tested on every client i can think of and it is only old IOS versions with this issue.
Sample code: ( this isnt the actual code i am using but same princible )
<table cellspacing="0" cellpadding="0" width="600" border="0" class="full-width">
<tr>
<td width="600" class="full-width">
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 1</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 2</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 3</td>
</tr>
</table>
</td>
</tr>
</table>
Here is an image of whats happening with IOS 5 (Incorrect) and IOS 6 (correct):
Image of IOS 5 and 6 respectively with table included
Any assistance would be greatly appreciated. If you need further info let me know.
You have align="200" on your table cells - not sure if it is just a typo in the sample code, but that could possibly be messing things up. Otherwise, it looks good to me, maybe try adding float:left; to the aligned tables as a fallback to see if it helps.
Also set the width of your table cells to 100% or 200 to make sure they are behaving as expected and check that your full-width class or other css isn't doing anything funky.
Right, after hours of playing around with the code the answer is... :
Make sure the container TD also as align="left" so the code would become:
<table cellspacing="0" cellpadding="0" width="600" border="0" class="full-width">
<tr>
<td width="600" class="full-width" align="left">
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 1</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 2</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 3</td>
</tr>
</table>
</td>
</tr>
I've got a HTML table with several cells inside, the border=0 property is set yet the border does not go away, what am I doing wrong?
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td>
<br><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
Change the first cell spacing to 0
So here's the code:
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0"
bgcolor="#CCCCCC">
<tr>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td><br>
<br></td>
</tr>
</table>
</td>
</tr>
</table>
Wondering if it is possible to somehow specify a table cell's width in the form of a percentage less than 1%. In XHTML 1.0 strict, without the use of CSS.
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td width="70%">..</td>
<td width="0.5%"></td>
<td width="0.5%"></td>
<td width="29%">..</td>
</tr>
</table>
Is this possible? Is it valid? Does it work cross-platform? Anyone know of a way? When I attempt to use the code above, it appears to interpret 5% and not a half percent.
The template will be for consumption in email clients, not a web browser.
You could try taking the middle two at 0.5% and making a single TD at 1%. Then put a table inside at 100% and have two TD's each at 50%.
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td width="70%">..</td>
<td width="1%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr valign="middle">
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
</td>
<td width="29%">..</td>
</tr>
</table>
Use CSS.....
Try this!
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td style="width:70%">..</td>
<td style="width:0.5%"></td>
<td style="width:0.5%"></td>
<td style="width:29%">..</td>
</tr>
</table>