I'm trying to create an embedded table with three tables for an email. The reason why I'm using tables is because I want the tables to stack one on top of another when the email renders on a smaller screen. Not all email clients read CSS well, so I'm looking for inline HTML coding, not a CSS solution.
The content table in total is 600px wide. And within that, Table 1 is 299px wide, table 2 is 2px wide, and table 3 is 299 px wide.
The first challenge I had was the row height on table 2 wasn't 100% with tables 1 and 3. I fixed that by changing the row height to 100% on the content table and in table 2. That seems to fix the row height for table 2, but then table three gets pushed down.
Here is the jsfiddle: https://jsfiddle.net/robertschlotzhauer/snk6pjb9/
<table border="0" cellpadding="0" cellspacing="0" width="600" height="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="299">
<tbody>
<tr>
<td style="padding:10px 15px 10px 15px;line-height:18px">
<div align="center">
<font style="font-family:Arial;font-size:16px;">
<b>
Text
</b>
</font>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#8C231C" border="0" cellpadding="0" cellspacing="0" height="100%">
<tbody>
<tr>
<td style="line-height:2px" bgcolor="#8C231C" width="2px">
<font style="font-size:2px">
</font>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="299" valign="top" align="right">
<tbody>
<tr>
<td style="padding:10px 20px 0px 20px;line-height:18px">
<div align="center">
<font style="font-size:16px;" face="arial">
<b>
Text text text
</b>
</font>
<br>
<br>
<font style="font-size:12px;" face="arial">
Text text text
</font>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Any recommendations on cleaning this up would be helpful.
You will need to do CSS. There is no raw html way to really do it. You can do mostly through inline, but there will be some backup media query necessary. see below code snippet:
.contenttable {width:600px;}
.big {width:299px;}
#media only screen and (max-width: 600px) {
table {width:100% !important; max-width:none !important;}
td {border-collapse:collapse !important; padding-left:0 !important; padding-right:0 !important;}
}
<body>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="299" align="left">
<![endif]-->
<table class="contenttable" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tbody>
<tr>
<td style="font-size:1px; mso-line-height-rule:exactly; line-height:5px" bgcolor="#8C231C" height="5"> </td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr height="100%">
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:299px;" class="big">
<tbody>
<tr>
<td align="center" style="font-family:Arial;font-size:16px; padding-left:10px; padding-bottom:15px; padding-right:10px; padding-top:15px; line-height:18px"><b>In This Issue</b></td>
</tr>
<tr>
<td align="center">
<table align="center" width="299" cellpadding="0" cellspacing="0" border="0" style="width:299px !important;">
<tr>
<td align="left" style="font-family:Arial;font-size:12px">
<ol>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
</ol>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td align="right" width="299">
<![endif]-->
<table align="right" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:299px;" class="big">
<tbody>
<tr>
<td align="center" style="padding-left:10px; padding-bottom:10px; padding-top:20px; font-size:16px; font-family:Arial; line-height:18px"><b>Text text text</b></td>
</tr>
<tr>
<td align="center" style="padding-left:10px; padding-bottom:20px; font-size:12px; font-family:Arial; line-height:15px">Text text text</td>
</tr>
<tr>
<td align="center" style="padding-left:10px; padding-bottom:10px;"><img style="width:150px;height:50px;" src="http://img.en25.com/EloquaImages/clients/LaurelSpringsSchool/{b3492627-ee05-4126-9344-9e00be069cd3}_P7-1314_RegisterNowRed__Button.jpg"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:1px; mso-line-height-rule:exactly; line-height:5px" bgcolor="#8C231C" height="5"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
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.
I've got an image within a relatively complex table structure and inside a td tag. I'm trying to make the image response so that when the page is viewed on mobile, the image is slightly scaled down vs. when viewed on a desktop i.e. ideally, I want it to be 50% of the width page.
I've tried adding a max-width on the img tag as well as the tg tag outside it and neither appeared to work.
My code:
<html>
<table bgcolor="#efefef" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0" style="padding-bottom:10px">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0" style="padding-bottom:10px">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="middle" style="font-family:Helvetica, Arial, sans-serif; font-size: 12px; color: #353535; padding:3%; padding-top:5px; padding-bottom:5px;">
.........
</td>
</tr>
<tr>
<td align="center" valign="middle" style="padding:1%; padding-top:10px; padding-bottom:5px;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50%"></img></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</html>
You can try display:inline-block for every column in your table. It will make the columns shift below each column when width of the screen decreases and make tr text-align: center;
I am trying to create a responsive HTML email. The two columns should be equal height and they currently stack on mobile. Everything works properly until there is a lot of text as the Billing Information or Shipping Information. It's an unlikely case that the text will ever look like this, but I must handle all possibilities without the email breaking. How can I make my td stretch vertically instead of horizontally? I cannot use a fixed width as it will break the responsiveness of my table.
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnTextBlock" width="100%">
<tbody class="mcnTextBlockOuter">
<tr>
<td valign="top" width="100%" class="mcnTextBlockInner" style="padding-top:9px; padding-right:18px; padding-left: 18px; padding-bottom: 15px;">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" bgcolor="white" border="0" cellpadding="5" cellspacing="0" style="max-width:100%; min-width:100%;" width="100%" class="mcnTextContentContainer">
<tbody>
<tr>
<td valign="top" width="50%" class=" templateColumnContainer"">
<!--<td valign="top" width="300" class="mcnTextBlockInner" style="padding-top:9px;padding-right:18px;padding-left:18px;padding-bottom:15px;"> -->
<table border="0" cellpadding="5" cellspacing="0" width="100%" style="max-width:100%; min-width:100%;" class="mcnTextContentContainer">
<tr>
<td valign="top" align="center" class="leftColumnContent" style="text-align: center;" >
<span style="color:#000000; font-size:18px; display: block; width:100%; height:auto;"><strong>Billing Information</strong></span>
</td>
</tr>
<tr>
<td valign="middle" class="leftColumnContent" style="text-align: center;">
<span style="font-size:14px; color: #000000!important;">{{ receipt.order.get_billing_html|safe }}</span>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent" style="text-align: center;">
<span style="font-size:18px; color:#000000; text-align:center; display: block; width:100%; height:auto;"><strong>Shipping Information</strong></span>
</td>
</tr>
<tr>
<td valign="middle" class="rightColumnContent" style="text-align: center;">
<span>
Shipping Address
</span>
<br><span style="font-size:14px; color: #000000!important;">Shipping speed description
{% endif %}
{% if receipt.order.shipper_tracking_number %}
<br><strong style="color: #000000;!important">Tracking: </strong>Shipper Name</span><br>
<a href="shipping tracking number" target="_blank" style="color: #000000; font-size: 14px;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Found the answer in post: HTML CSS How to stop a table cell from expanding
Using style="overflow-wrap: break-word;" on the <td> solved my problem. It is compatible across Gmail, Apple Mail, Yahoo, latest Outlook.
I am coding a menubar for an e-mail - therefore the messy tables. I need the two menuoptions "Point" and "My profile" to be aligned in the right side of the table:
<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
<tbody>
<tr>
<td style="padding:10px 0px 10px 0px" align="center" valign="top">
<table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
<tbody>
<tr>
<td align="left" width="35" valign="top"> </td>
<td align="center" width="590" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
<tbody>
<tr>
<td style="padding:7px 0px 7px 0px" align="center" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8" align="center" valign="top">
Book
<span> </span>
Gift
<span> </span>
Voucher
<span> </span>
<span> </span>
<b>Point:</b>
<span> </span>
<b>My profile</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="35" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JSFIDDLE
I have tried to set a text-align:right; on the a tag, the td tag, but I cannot get the two options to align right.
I can align them right if I set the text-align on the table. But then all the text are aligned right.
Does anybody have an idea what I am doing wrong here?
I think this will work for you -
I have put the inner table width to 100% and split you <a> tag to two <td> and gave them float.
<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
<tbody>
<tr>
<td style="padding:10px 0px 10px 0px" align="center" valign="top">
<table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
<tbody>
<tr>
<td align="left" width="35" valign="top"> </td>
<td align="center" width="590" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
<tbody>
<tr>
<td style="padding:7px 0px 7px 0px" align="center" valign="middle">
<table style="border-collapse:collapse;width:100%" cellspacing="0" cellpadding="0" border="0" align="left" width: "100%">
<tr>
<td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8;float:left" align="center" valign="top">
Book
<span> </span>
Gift
<span> </span>
Voucher
<span> </span>
<span> </span>
</td>
<td style="float:right">
<b>Point:</b>
<span> </span>
<b>My profile</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="35" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Hope this is helpfull for you.
try this snippet:
<a href="http://example.com"
style=
"color:#004b60;
text-decoration:none;
background-color: red;
padding: 5px 10px 5px 10px;
margin-left:250px;"
target="_blank"><b>Point:</b>
</a>
use margin-left:250px; instead of text-align: right;
check the fiddle: https://jsfiddle.net/hfsd62eg/1/
I am facing alignment issue in outlook. I am sending following HTML code in mail.
<strong>Test Summury</strong><br>
<table border=0>
<tr style='width:100%;display:block'>
<td valign="middle" style='white-space:nowrap;width:100%;display:block;font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;width:100%'>
<img src='https://ci5.googleusercontent.com/proxy/8S3emk_N9__9dGjV9Sj9qnYVQWLj6dp4ukTDwGoDq3esYAjOleQ_g8PNqrI8-a_FCVltErovcE0AhZwr6L-I_lutmAu8RgE3oi38y-8=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Duration.png' style='display:inline;margin:5px 0 0 0'>
<p style='display:inline-block;width:15%;margin-left:5px'><b>2 min</b><br>Duration</p>
<img src='https://ci6.googleusercontent.com/proxy/J9_xwl9q8wAIQw7DMq1CkOAKmMhDK9padlPL1jlpzwruQ9lquwQs-sl9g0gfSUdSo0UHny5IQC0VaqxliEL3QZHgdaT1mt4mkAA=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/users.png' style='display:inline;margin:10px 0 0 0'>
<p style='width:13%;margin-left:11px;display:inline-block'><b>12 vu</b><br>Max Users</p>
<img src='https://ci5.googleusercontent.com/proxy/G05_y_qOOgjUTuvc3Jnllh_DnglVGpp86Sp9BhTi0cCV7-BJUjht8APtujeMwTL-pMEh7WQkH_PyY1L5UyTtxaFWyWasJiUfBQ=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Hits.png' style='display:inline;margin:10px 0 5px 20px'>
<p style='width:20%;margin-left:11px;display:inline-block'><b>13 Hits/s</b><br>Avg Throughput</p>
<img src='https://ci5.googleusercontent.com/proxy/uzImvaoO6Qkxx3A9uC7cV6rZ6qndIo6LRux-l2MylOkfvLU1VflPp_wNdQFdhjDTsZb2cGCfOSe9pXaMbasIq2nS6lS9BrM_3f7b=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Errors.png' style='display:inline;margin:5px 0 5px 20px'>
<p style='width:11%;display:inline-block;margin-left:11px'><b>100%</b><br>Error</p>
</td></tr></table>
In gmail, it is aligned as I needed,
however in outlook email it gets distorted.
As the other guy said you code needs a lot of work. Below is what i did with your code. I placed your images and paragraph tags into a table sitting side a div. You will notice outlook conditional statements, these will be ready by outlook only.
This method of coding is called ghost columns and is part of hybrid coding.
<table width="100%" border=0 cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/8S3emk_N9__9dGjV9Sj9qnYVQWLj6dp4ukTDwGoDq3esYAjOleQ_g8PNqrI8-a_FCVltErovcE0AhZwr6L-I_lutmAu8RgE3oi38y-8=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Duration.png' style='display:inline;margin:5px 0 0 0'></td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>2 min</b><br>Duration</p></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</td>
<td width="25%">
<![endif]-->
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci6.googleusercontent.com/proxy/J9_xwl9q8wAIQw7DMq1CkOAKmMhDK9padlPL1jlpzwruQ9lquwQs-sl9g0gfSUdSo0UHny5IQC0VaqxliEL3QZHgdaT1mt4mkAA=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/users.png' style='display:inline;margin:10px 0 0 0'> </td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>12 vu</b><br>Max Users</p></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</td>
<td width="25%">
<![endif]-->
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/G05_y_qOOgjUTuvc3Jnllh_DnglVGpp86Sp9BhTi0cCV7-BJUjht8APtujeMwTL-pMEh7WQkH_PyY1L5UyTtxaFWyWasJiUfBQ=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Hits.png' style='display:inline;margin:10px 0 5px 20px'> </td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>13 Hits/s</b><br>Avg Throughput</p></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</td>
<td width="25%">
<![endif]-->
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/uzImvaoO6Qkxx3A9uC7cV6rZ6qndIo6LRux-l2MylOkfvLU1VflPp_wNdQFdhjDTsZb2cGCfOSe9pXaMbasIq2nS6lS9BrM_3f7b=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Errors.png' style='display:inline;margin:5px 0 5px 20px'> </td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>100%</b><br>Error</p></td>
</tr>
</table>
</div>
</td></tr></table>
Let me know if this is the answer you were after.