I have this code on my print.css:
#header, #tae, #nav, .noprint {display: none;}
width: 100%; margin: 0; float: none;
In order not to display the elements within those div tags. But I don't know with the code below why it isn't cooperating. If I place the div tags on it. And then I hit the print button. I see no output.
Here it is:
<div id="tae">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1">
<tr>
<td class="text1" style="height: 50px;">xd627 information management system</td>
</tr>
<tr>
<td class="bg5"><table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;">
<tr align="center">
<td>Homepage</td>
<td>Database</td>
<td>About</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" class="bg6"> </td>
</tr>
<tr>
<td><table width="780" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="20"> </td>
<td width="297"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" alt="" width="30" height="30" /></td>
</tr>
</tr>
<tr>
<td class="text2">
</div>
<div id="max">
<?php
//some php code in here showing a mysql table.
?>
</div>
What's wrong with my code? Does the php script depend on the one where I put the div tag in?
What do I do? All I want to show up in my page when printed is the mysql table. I'm using
Universal Document Converter to simulate printing.
The HTML in that snippet is broken and the entire document is contained in #tae, thus nothing will print as everything is in a container that is display: none;
Here's a cleaned up version of that markup.
<div id="tae">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1">
<tr>
<td class="text1" style="height: 50px;">xd627 information management system</td>
</tr>
<tr>
<td class="bg5">
<table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;">
<tr align="center">
<td>Homepage</td>
<td>Database</td>
<td>About</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="bg6"> </td>
</tr>
<tr>
<td>
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="20"> </td>
<td width="297">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/spacer.gif" alt="" width="30" height="30" />
</td>
</tr>
<tr>
<td class="text2"></td>
</tr>
<!-- All this is missing, from here... -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- ...to here. -->
<div id="max">
<?php
//some php code in here showing a mysql table.
?>
</div>
Related
I am creating HTML Emailer.
I want to have the td elements to be center in the next tr. if there is 1 td element then it should be center of tr , if there is 2 td elements then also it should be in the center of tr and if there is 3 td elements then it should be in the center of tr.
How can I do so?
I can't use any external CSS or library as I am making HTML Emailer.
I have used the below code.
<table cellspacing="0" cellpadding="0" border="0" style="background:white; text-align:center; margin: 0 auto !important; padding: 0px; width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-family:Arial" >
<tbody>
<tr>
<td >
<table style="width:450px;margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Any help would be great.
I'm not sure I get what you want. But I think you are looking for colspan.
<table>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
</tr>
<tr>
<td colspan="3" style="text-align: center">Centered</td>
</tr>
</table>
Working with colspan and rowspan should also make those nested tables a little more manageable.
Your question is not clear to me ,and also you need to be cautious when nesting tables.
you can use 'colspan'
Your question is not really clear about what you want to do but if you want a pure HTML one then,
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td align="right">Right</td>
</tr>
<tr>
<td>February</td>
<td align="center">Centered</td>
</tr>
<tr>
<td>February</td>
<td align="left">left</td>
</tr>
</table>
</body>
</html>
Another example with colspan,
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr style="text-align:center">
<td>Month</td>
<td>Savings</td>
<td>Gone</td>
</tr>
<tr>
<td colspan="3">
<table style="width:100%">
<tr style="text-align:center;">
<td>
test
</td>
<td>
test2
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You need to make use of colspan and text-align: center. Just remember that if a column has less than the maximum number of TDs in it, then colspan must be set to that. So below the columns with one and two TDs are set to 3 to line up with the one with three. I put the two TDs in an individual table which is also another techniques you can use to have different TDs in a TR. Note that the TD the table is in also has its colspan declared as 3 they must also be equal.
Think of it in an excel sheet, you have column a, b, c and so on. If you want a column to be the centre of three then it has to cross a, b and c.
<table cellspacing="1" cellpadding="0" border="1" style=" width:100%; text-align:center;">
<tr>
<td colspan="3">ipsum</td>
</tr>
<tr>
<td colspan="3">
<table cellspacing="1" cellpadding="0" border="1" style=" width:100%; text-align:center;">
<tr>
<td>ipsum</td>
<td>ipsum</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>ipsum</td>
<td>ipsum</td>
<td>ipsum</td>
</tr>
</table>
I think what you need is the hybrid approach. It requires more code than what you might be used to.
To see the code in action:
Run the code snippet, do full screen and resize your browser.
Hybrid method of coding:
Hybrid coding uses outlook conditional statements to create the columns specifically for outlook while all other email clients read the div tags to create the columns.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="600">
<![endif]-->
<table class="container hundred" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="width:100%; max-width: 600px;">
<tr>
<!-- 5 column starts -->
<td style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 1 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 2 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 3 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 4 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 5 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
<!-- 5 column ends -->
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
Hope this is the answer you were looking for.
Cheers
I'm having this extremely odd problem with creating bulletproof background images, and this thing is driving me nuts.
Issue:
There are two variable content blocks and they include code that makes a background image appear on Outlook 2013 and Windows 10 Mail.
While the background images do show, the v:rect created seems to refuse to take up the 800 px width it's supposed to. See attached for a demonstration of how it looks in Microsoft Outlook 2013.
It shows fine in Outlook 2010.
Code for the first block (which is pretty much suffering the same issue as the 2nd) for brevity:
<!-- // Begin Module: Welcome Block \\ -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper_table" mc:repeatable="layout" mc:variant="Welcome Block" >
<tbody>
<tr>
<td bgcolor="#3b3f40" style="background:rgb(59,63,64) url('https://gallery.mailchimp.com/0728d953751ef38036e722a85/images/0ecfdaa9-07ef-4f83-8e45-ef4ed827bcb0.jpg'); background-repeat:no-repeat; background-position: center top 100% 100%; background-size: 100% 100%; width:800px; max-width:800px;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px; height:340px; mso-position-horizontal:center;">
<v:fill type="frame" src="https://gallery.mailchimp.com/0728d953751ef38036e722a85/images/0ecfdaa9-07ef-4f83-8e45-ef4ed827bcb0.jpg" color="#3b3f40" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]--><div>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="content" style="width:800px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td class="padding" style="width:20px;">
</td>
<td class="content_row" align="center" style="width:760px;">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="mobile_centered_table">
<tbody>
<tr>
<td class="section_h" height="90">
</td>
</tr>
<tr>
<td class="content_row" valign="top" align="center" style="color:#ffffff;font-family:Montserrat, Arial, sans-serif;font-size:36px;font-weight:700;line-height:36px;text-transform:uppercase;width:760px;">
<span class="white_text" mc:edit="welcome_header"> WELCOME TO ULTIMAIL </span>
</td>
</tr>
<tr>
<td height="15" class="space_class" style="font-size:1px;line-height:1px;">
</td>
</tr>
<tr>
<td class="white_text" align="center" style="color:#ffffff;font-family:Montserrat, Arial, sans-serif;font-size:16px;font-weight:400;line-height:24px;width:760px;" mc:hideable mc:edit="welcome_subheader">
Curabitur et ligula. Ut molestie a, ultricies porta urn vestibulum commodo
</td>
</tr>
<tr>
<td height="30" colspan="3">
</td>
</tr>
<tr>
<td valign="middle" align="center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td bgcolor="#0d793d" class="button blue_button" align="center" width="160" height="45" style="border-radius:100px;display:block;background-color:#0d793d;border-color:rgb(57,57,57);border-width:0px;" mc:hideable mc:edit="a9">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="color:#ffffff;font-family:Montserrat, Arial, sans-serif;font-size:14px;font-weight:400;text-align:center;text-transform:uppercase;" align="center">
<a class="white_text" href="#" target="_blank" style="color:#ffffff;display:block;line-height:45px;text-decoration:none;width:100%;">
read more
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="padding" style="width:20px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="40">
</td>
</tr>
<tr>
<td height="45" class="nomobile">
</td>
</tr>
</tbody>
</table></div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!-- // End Module: Welcome Block \\ -->
See it malfunction in Outlook 2013: https://i.stack.imgur.com/mwTKx.png
See it malfunction in Windows Mail 10: https://i.stack.imgur.com/bXczG.png
I am putting together a html based e-mail for distribution to our subscribers. However, when I render it in various clients, it is coming out slightly differently. The major difference that I see is that in some clients the main picture is offset to the left, and the grid boxes may have a different height depending on the number of lines contained. My aim was to reserve enough space for multiple lines so that all boxes would be the same height. Can anyone help me to locate the problem areas? The client in the picture with the problems is Outlook 2003, and the correct one is gmail in Chrome.
Because the html is too long to fit in stackoverflow, I'm including extracts that produce the main item with the offset picture, and the various sized grid box.
Strange offset:
<tr>
<td height="15" style="text-align:center" width="100%"></td></tr><tr>
<td border="0" width="600" style="text-align:center" align="center">
<img alt="" border="0" width="600" height="400" align="top" src="https://ci5.googleusercontent.com/proxy/vTfZfEiq_KN8RAd8D80hICfjyqCddT8oyJJNwnuvZ8D7jg4mbFEbJab51vi_ZiMrHNRitMhAtMu_hSU9Eiy1iNjIEz8YmmlkCx6M6C1lQmBkC6jm7ye1uSoKDMmq8XVo-qD0ZXA=s0-d-e1-ft#https://img.grouponcdn.com/deal/3YewhZBYt2iywAzJsuHy/ZP-960x582/v1/t440x300.jpg" style="width:600px;min-height:400px">
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td>
<table width="100%" border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="23" style="min-height:23px" src="https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png" alt="Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort">
</td>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:right">
<span>$1179</span>
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Branchville, NJ, USA
</td>
</tr>
</tbody>
</table>
</td>
</tr></tbody>
</table>
</td>
</tr>
Various sized boxes:
<tr>
<td align="center" valign="top">
<table align="center" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci4.googleusercontent.com/proxy/2iCMcbaq9UymG0sHx0JXF9wuBHu-8ibBC66U7s1q7i7Lo5zNS83olrIm7NNBuhybni869s64dxK1_5u13bYUudnGh3fh680G2yLGIc9rQ_YFWe2YLdExA4UUO5A2j_7rJlhLmXQ=s0-d-e1-ft#https://img.grouponcdn.com/deal/rHsqnohK7vGd79o7hGUq/VQ-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$285</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Luxury Villas & Gourmet Meals in Puerto
Vallarta</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Puerto Vallarta, Mexico</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci6.googleusercontent.com/proxy/rhQa6yfks-smgpfVft9mFyFjy-buDbxqyC7skH8tBNv-KfX5FspdLl6GpcdipcquRGoQreMi29C5cmhGaXFp8c6kF4P84Duam0ZfHGGqQZUudPbo5dXvcAOmj2qFfCfTB3KnZEg=s0-d-e1-ft#https://img.grouponcdn.com/deal/deYNpeAfGJxahmvmev46/SV-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$99</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Charming Northern Michigan Inn near Lakes</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Denton Township, MI, USA</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
This is a picture of how it should look (gmail):
This is a picture of how it looks in outlook 2003:
Your question is a neverending story.... few suggestions.
reset as much default value, as possible
use tables, but reset cellpadding cellspacing and border values to 0
do not use colspan, rowspan, because a few clients do not support it, and rest of the clients may handle it differently
you need to double/triple declare the css values (always write css inline, and in head style)
no margins, only padding values, and only on TD elements
always give exact width and height for images, (and apply display:block to remove unwanted spaces below)
set font-size 0 on body, and after set font-size on every element where you need, to avoid invisible characters on inline elements.
Height values on TD sometimes works, sometimes not, thats why a lot of ppl use spacer images. I recommend an empty TD with padding-top:30px is much stable....
I'm a frontend developer #EDMdesigner.com
i have made a newsletter in html with inline css and its working fine but when we are seeing it in outlook its not looking good and there are some css missing.its working fine with all other like gmail.
Here is the link for that html template:
http://fashionfad.in/newsletter/april-29/
Outlook is one of the mail services with the poorest support for css styles. Here you have a list of supported styles in different mail clients. I can't find min-height support, but from what I see, min-width and max-width are also not supported.
Min-height is not supported. Instead set your table cell height="" to the minimum and it will stretch larger if needed:
<!-- this has height set to 100, but stretches larger vertically -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td valign="top" height="100">
Table 1<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</td>
</tr>
</table>
<br><br>
<!-- this has height set to 100, faking "min-height" -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td valign="top" height="100">
Table 1<br>...
</td>
</tr>
</table>
Alternatively if you are clever with your table nesting, you can fake min-height. This is better when you don't want to set a specific height on your cells, allowing the height to be controlled by the content instead:
<!-- this has no "min-height" -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td valign="top">
Table 1<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</td>
</tr>
</table>
</td>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td valign="top">
Table 2<br>...<br>...<br>...<br>...
</td>
</tr>
</table>
</td>
</tr>
</table>
<br><br>
<!-- this fakes "min-height" -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td valign="top">
Table 1<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</td>
</tr>
</table>
</td>
<td valign="top" bgcolor="#999999">
Table 2<br>...<br>...<br>...<br>...
</td>
</tr>
</table>
I would like to place two tables next to each other. Since I'm not a big fan of floating or using "css hacks", what approach do you suggest? Is it possible to solve without it, or am I out of luck?
Use table-cell display to get what you are looking for.
For Instance,
The HTML:
<div class="wrap">
<div class="col">ABC</div>
<div class="col">DEF</div>
</div>
The CSS:
.wrap{
width:100%;
display:table;
}
.col{
background:blue;
display:table-cell;
}
WORKING DEMO
EDIT:
If you want to place tables next to each other, here is the solution.
The HTML:
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
WORKING DEMO - 2
If you want to place it vertically next to each other, below is the code.
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
WORKING DEMO - 3
Hope this is what you are looking for.