I am currently creating a HTML email template. I have a table with 3 columns for the following:
[[logo] [text content ] [date]]
So the logo should be left aligned, and the date right aligned. However in outlook it doesn't look like the float is being accepted. this is how it currently looks.
Here is my current code:
<table cellspacing="0" cellpadding="0" border="0" style="display:flex; flex-wrap: wrap; margin-bottom:10px; width:100%;">
<tbody>
<tr>
<td width="6%"> <img style="float:left; margin-right:10px;" height="24px" width="30px" src="{{imageUrl}}">
</td>
<td width="63%;">
{{this.notificationMessage}}
</td>
<td width="30%" style="text-align:right; margin-left:6px;">{{this.date}}
</td>
</tr>
</tbody>
</table>
I have been stuck with this issue for sometime, any help is much appreiacted
HTML should be coded as if it's the year 1999.
Tables should be used for layout and the use of modern HTML and CSS is best avoided where possible.
In your case above you should just use the align attribute on the table cell e.g.
<td align=left"></td>
<td align=right"></td>
If that doesn't work then try using CSS e.g.
<td style="text-align: left;"></td>
Here's a good guide to creating HTML email template from Mailchimp:
https://templates.mailchimp.com/getting-started/html-email-basics/
you can use Float: right and i think you should omit anything about flex ( i mean: display:flex; flex-wrap: wrap;).
<html>
<body>
<table cellspacing="0" cellpadding="0" border="0" style=" margin-bottom:10px; width:100%;">
<tbody>
<tr>
<td width="6%"> <img style="float:left; margin-right:10px;" height="24px" width="30px" src="img..">
</td>
<td width="63%;">
aa
</td>
<td width="30%" style="text-align:right;float:right; margin-left:6px;">bb
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can give "text-align: left" for of also instead of "float: left" on
You have to style="text-align:left; " for td.
Use below corrected code.
<table cellspacing="0" cellpadding="0" border="0" style="display:flex; flex-wrap: wrap; margin-bottom:10px; width:100%;">
<tbody>
<tr>
<td width="6%" style="text-align:left;" > <img style="float:left; margin-right:10px;" height="24px" width="30px" src="{{imageUrl}}">
</td>
<td width="63%;" style="text-align:left;" >
Notification message
</td>
<td width="30%" style="text-align:right; margin-left:6px;">date
</td>
</tr>
</tbody>
</table>
Related
I'm doing a text over an image and learning how to do the text size and position so it will look align, and right now I really don't know how to make the gap in between the h3 and p smaller.
I don't want to use CSS if possible I want it to be in HTML only just using the style in the code.
If you have a better way to do text over an image and multiple sentences with adjustable gap size and use each sentence use different font. It will be great.
Image from desktop
<table width="600" cellspacing="0" cellpadding="0" align="center">
<tr bgcolor="#f9c9d5">
<td></td>
<td rowspan=2>
<img src="bimage/box.jpg" alt="box">
</td>
</tr>
<tr>
<td colspan=2>
<h3 align="center" style="font-size:20px"> WELCOME</h3>
<p align="center">Jinho</p>
</td>
</tr>
</table>
you can use line-height property
<table width="600" cellspacing="0" cellpadding="0" align="center">
<tr bgcolor="#f9c9d5">
<td></td>
<td rowspan=2>
<img src="bimage/box.jpg" alt="box">
</td>
</tr>
<tr>
<td colspan=2>
<h3 align="center" style="font-size:20px, line-height:0"> WELCOME</h3>
<p align="center">Jinho</p>
</td>
</tr>
</table>
It is not recommended to use tables and inline styles, but perhaps you meant this?
<table style="width:600px; height:132px; border-spacing: 0; border-collapse: separate;
background-image: url(https://i.stack.imgur.com/B49ut.jpg)">
<tr>
<td style="text-align:center;">
<h3 style="font-size:20px; margin-bottom:0">WELCOME</h3>
<p style="margin-top:0">Jinho</p>
</td>
</tr>
</table>
I tried searching for solutions in stack, but none of the answers I found addressed my issue.
I'm developing an email and I want to have a single cell row that has text with an image in between the text. The cell height is the full height of the image, but I want the text to be vertically centered. The text is now flush on the bottom
Here's my code (there's many inline styles, I apologize in advance). Please note this a single column row that is part of the fluid hybrid approach by Nicole Merlin.
<tr>
<td valign="middle" bgcolor="#e2f4ff" style="padding:0">
<table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td valign="middle" style="vertical-align: middle !important;;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
THE<img src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" /> OF SAFE SLEEP FOR DOGS
</td>
</tr>
</table>
</td>
</tr>
Just vertically align the image.
<table>
<tr>
<td valign="middle" bgcolor="#e2f4ff" style="padding:0">
<table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
THE
<img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" />OF SAFE SLEEP FOR DOGS
</td>
</tr>
</table>
</td>
</tr>
</table>
The best solution that works for all email clients is to push them to consider putting that particular image inline with the other text. That can be done by put the text and the image in many <td> of the same single row <tr>.
This will make you able to define the exact height, width and any other attributes you want of each tag.
Check the following:
<table>
<tr>
<td valign="middle" bgcolor="#e2f4ff" style="padding:0">
<table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td valign="middle">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
THE
</td>
<td valign="middle" style="vertical-align: middle !important;padding:0;">
<img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" />
</td>
<td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;"> OF SAFE SLEEP FOR DOGS
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
I am trying to create an email template like following. I have used table. I am able to do everything except the image is not displayed at proper position. The images should be displayed in middle and on top of the container(see screen 1), but I am not able accomplished it. I have tried to provide negative margin to container, but gmail and other mail services are ignoring the negative margin.
Here's what I was able to accomplishd till so far.
The code is present here. Can anyone please help with this?
Updated answer:
You can't use negative margin in html email. To mimic this, there are 2 ways to do it, the nested tables way and the more complex rowspan way:
<!-- The nested way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="80" bgcolor="#007700">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
<td width="100" height="80" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="80" bgcolor="#FFFFFF">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
<br><br>
<!-- The fancy rowspan way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
<td width="100" height="80" rowspan="2" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td width="200" height="40">
</td>
<td width="200" height="40">
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
Original answer:
For basic positioning:
Horizontally, use align="left|center|right", vertically use valign="top|middle|bottom"
Here is how to place an image center top of a table:
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td height="500" align="center" valign="top">
<img alt="" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
As I said:
If it was me i would make the top border and the image a row. – Alex
Thomas 23 mins ago
Change you top row to:
<td valign="bottom">
<b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;"> </b>
</td>
<td class="text-center" width="64">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png"> </td>
<td valign="bottom">
<b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;"> </b>
</td>
check out the result - http://jsfiddle.net/562ux.
I've not tested this in a email Client, but as #Kheema Pandey says, you should try to use inline styles.
It is a good practice to use inline style while creating newsletter. Also outlook doesn't support margin negative property.
in your case the image is not appear center so you can use a inline style here 'style="text-align:center;"'.
<td style="text-align:center;">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" />
</td>
I'm trying to put together a simple HTML email using old school coding standards and I've hit a brick wall that I didn't foresee. Internet Explorer, even IE 11, renders a simple table differently to every other browser I've tried (Chrome, Firefox, Safari) and I can't figure out why.
In terms of layout, it should look like this (note: colours are for illustration only -- apologies to your eyes!):
But in IE it looks like this:
The HTML is pretty simple:
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
<tr>
<td bgcolor="#ff0000" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
<td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">
Height: 42px
</td>
<td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" rowspan="2">
Height: 116px
</td>
<td bgcolor="#ff00ff" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
</tr>
<tr>
<td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" rowspan="2">
<div>
<div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">
Height: 208px
</div>
</div>
</td>
</tr>
<tr>
<td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
<div>
<div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">
Height: 134px
</div>
</div>
</td>
</tr>
</table>
JSFiddle: http://jsfiddle.net/mCLDh/
Am I doing something wrong, or is IE still messing with me after all these years?
(Note: For the commenters who are unaware, you cannot use floats or absolute positioning in HTML emails. That's why I'm using code that looks like it came from 1998. It's ugly, but it's more supported by email clients.)
What you are experiencing is the rowspan version of the Outlook issue pointed out here.
Nested tables are the logical choice, however, you can get your code working by adding empty cells on the left to enforce the row heights, making Outlook behave as expected.
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
<tr>
<td bgcolor="#ff0000" valign="top" height="42" width='0'><!-- Empty cell for outlook -->
</td>
<td bgcolor="#ff0000" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
<td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">
Height: 42px
</td>
<td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" rowspan="2">
Height: 116px
</td>
<td bgcolor="#ff00ff" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
</tr>
<tr>
<td bgcolor="#ff0000" valign="top" height="74" width='0'><!-- Empty cell for outlook -->
</td>
<td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" rowspan="2">
<div>
<div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">
Height: 208px
</div>
</div>
</td>
</tr>
<tr>
<td bgcolor="#ff0000" valign="top" height="134" width='0'><!-- Empty cell for outlook -->
</td>
<td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
<div>
<div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">
Height: 134px
</div>
</div>
</td>
</tr>
</table>
Your best bet is nested tables
http://jsfiddle.net/3L8qL/1/
like so
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
<tr>
<td bgcolor="#ff0000" valign="top" height="250" width='30'>Height: 250px</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">Height: 42px</td>
</tr>
<tr>
<td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" >
<div>
<div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">Height: 208px</div>
</div>
</td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" >Height: 116px</td>
</tr>
<tr>
<td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
<div>
<div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">Height: 134px</div>
</div>
</td>
</tr>
</table>
</td>
<td bgcolor="#ff00ff" valign="top" height="250" width='30'>Height: 250px</td>
</tr>
</table>
Edit:
Here's why the browser was confused.
You have created a table with 3 total rows. The sum height of all three rows is 250px.
In the second column, the first row is 42px, and the sum of the bottom two is 208px
In the third column, the first two rows is 116px, and the third row is 134px.
Which means that (table wide) the first row is defined at 42px, the third row is at 134px but the middle row is ambiguous at 166px, 92px, AND -18px at the same time.
Tables are meant to be tabular, but when you break the nature of the table, it's a crap shoot on what you'll get.
Ok, since you stated that it will be used for a html e-mail: do NOT use colspan, rowspan. split the table up in: (not it is NOT pretty but it will save you a metric shit-ton of problems)
<table>
<tr>
<td>
250px
</td>
<td>
<table>
<tr>
<td>
height 42px
</td>
</tr>
<tr>
<td>
height 208px
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
height 116px
</td>
</tr>
<tr>
<td>
height 134px
</td>
</tr>
</table>
</td>
<td>
250px
</td>
</tr>
</table>
(correct me if this can be done more easy, and yes, the inner tables can be replaced with divs.)
oh, and a shout out to ZURB for coming up with INK: http://zurb.com/ink/ (saved me heaps of trouble)
Interesting, must be minimum size thing, because if you make that value larger, it will render the same as others -- try 200 for example. But, IE doesn't make it smaller since it wants it to be the same height (or larger) than the next column.
I need to make a table-based layout and made my table width 550px. And then I loaded an image with original width of 550px but on browser I only have 449px. I want to make in on full width. And also I have extra space between cells.
<table style="width:550px;margin:0 auto;" cellspacing="0" cellpadding="0" border="0">
<tr style="margin:0; padding:0;">
<td style="font-size:12px; line-height: 12px; width: 100%; text-align: right; color:#5A99B1;">Click <b>here</b> for the online version</td>
</tr>
<tr>
<td style="width:100%; height:10px;" cellspacing="0" cellpadding="0">
<img style="width: 100%;" src="border-top.png" />
</td>
</tr>
<tr>
<td style="width:50%; background-color:white;">
<img src="brugadalogo.png" />
</td>
<td style="width:50%; background-color:white; text-align: right;">
<img src="msdlogo.png" />
</td>
</tr>
</table>
Your table columns are not uniformly even. You have 3 rows, the first 2 have 1 column and the last one has 2 columns. Even if you have the right percentages, it is better to have it distributed evenly. Such as have all 3 rows have or "take the space of" 2 columns.
What I mean by that is that instead of using widths, you should use colspan. Also remove the width from the image, if you want its original size, it should get it by default.
<table style="width:550px;margin:0 auto;" cellspacing="0" cellpadding="0" border="0">
<tr style="margin:0; padding:0;">
<td **colspan="2"** style="font-size:12px; line-height: 12px; text-align: right; color:#5A99B1;">Click <b>here</b> for the online version</td>
</tr>
<tr>
<td **colspan="2"** style="height:10px;" cellspacing="0" cellpadding="0">
<img src="border-top.png" />
</td>
</tr>
<tr>
<td style="background-color:white;">
<img src="brugadalogo.png" />
</td>
<td style="background-color:white; text-align: right;">
<img src="msdlogo.png" />
</td>
</tr>
</table>
Hope this solves your issue.