I really hate email html. So I have created a new confirmation email for our business and I need the white blocks in the picture below to be the same width. On desktop they look completely fine and match.
Without pasting the full template, this is how the code is structured with the css I am using:
<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>First heading</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>Second heading</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And the picture of the issue on mobile:
I am pretty sure that because 600px isn't available on a device that size that it's seeing how with the content is, but I can't use media queries, so not really sure where to turn.
the layout displaying as per your content width in TD. the above HTML code you have give "first heading" and "second heading " as content so characters of second heading are more than first heading so width will not match.
solution is:
<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>First heading</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>Second heading</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
I am setting up HTML template with 600 px as parent body width, but in outlook 2007 - 2019, full available width is being occupied.
Image is taking 100% of width in outlook versions but it should take only 600 px of width. For others, it is working fine.
Expected Image:
Error Image:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>test</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900"
rel="stylesheet"
type="text/css"
/>
<style type="text/css">
.main-wrapper .email_content p {
padding-left: 10px;
}
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding: 0;
}
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" width="100%" class="main-wrapper">
<tr>
<td style="background-color: #dddddd">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="font-family: Roboto, Arial; font-size: 13px"
>
<tr bgcolor="#eeeeee">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<!-- <td style="padding: 20px 20px 20px 20px;"> -->
<td style="padding: 20px 0px 20px 0px">
<table
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
style="box-shadow: 0px 0px 4px 2px #e0e0e0"
>
<tr bgcolor="#ffffff">
<!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
<td style="color: #666666; padding: 0">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
>
<tr>
<td
class="email_content"
style="
padding-bottom: 15px;
background-color: #fafafa;
"
>
<div
style="
padding: 5px;
border-radius: 4px 4px 0px 0px;
background-color: #fdaf74;
"
></div>
<!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> -->
<!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> -->
<img style="padding : 20px 0 0 25px;"
src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg
height="40">
</td>
</tr>
<tr>
<table style="margin: 0 7px">
<table
align="center"
width="100%"
class="main-wrapper"
style="border-bottom: 1px solid #eee"
>
<tr>
<td>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="font-family: Roboto, Arial"
>
<tr bgcolor="#F2F2F2">
<td align="center">
<table
cellpadding="0"
cellspacing="0"
width="600"
border="0"
>
<tr>
<td>
<table
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
>
<tr bgcolor="#ffffff">
<td>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
>
<tr>
<td
style="
text-align: left;
font-size: 16px;
padding: 6px 0
10px 18px;
"
>
<p
style="
color: #1a1a1a;
"
>
Hi Sheetal
Chourasiya,
</p>
<p
style="
color: #505050;
"
>
You have
received Plum
E-Gift Card.
Congratulations!
</p>
</td>
</tr>
<tr>
<td
align="center"
>
<img
src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg"
style="
margin: 0;
border: 0;
padding: 0;
display: block;
"
width="600px"
height="300px"
alt="Image"
/>
</td>
</tr>
<tr>
<td
style="
padding: 24px
60px 0;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
style="
text-align: left;
font-size: 14px;
background-color: #fafafa;
border-radius: 6px;
margin-bottom: 30px;
"
>
<tr>
<th
style="
padding: 24px
0 10px
24px;
text-align: left;
font-size: 16px;
color: #505050;
"
>
Plum
E-Gift
Card
</th>
<td
style="
text-align: right;
padding-right: 20x;
"
>
<a
href="https://docs.xoxoday.com/docs/getting-started-1"
target="_blank"
style="
color: #c7417b;
text-decoration: none;
display: none;
"
>What is
Plum?</a
>
</td>
</tr>
<tr
style="
box-shadow: 0px -1px
0 0 #eaeaea;
"
>
<td
style="
padding: 20px
0 20px
24px;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
>
<tr>
<td>
<span
style="
color: #909090;
font-size: 16px;
margin: 0;
"
>Gift
Card
Code</span
>
</td>
</tr>
<tr>
<td>
<span
style="
color: #505050;
font-size: 20px;
margin: 6px
0
0
0;
font-weight: 500;
letter-spacing: 0.025rem;
"
>77m43dddb46b</span
>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Change this line:
<table align="center" style="width: 100%" class="main-wrapper">
To:
<table align="center" style="width: >100%" class="main-wrapper">
(>100% is a number smaller than 100, for example 90)
The initial width of a block-level element like div or p is auto.
Use [ width: auto ] to undo explicitly specified widths.
if you specify [ width:100% ], the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border.
width: auto; will try as hard as possible to keep an element the same width as its parent container when additional space is added from margins, padding, or borders.
width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regard to the parent. This typically causes problems.
Check the image link below to get more information.
HTML Width - by Shashank
You have px value on your image of the birthday code it seems. I have removed it and updated your code slightly through and online cleaner. I am a dreamweaver user and your code was not working for me. If the below code has issues, just change the width value of your birthday image (belated-happy-birthday-3.jpg) and assign width value without the pixels.
Try out this code to see if it works for you.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<style type="text/css">
.main-wrapper .email_content p {
padding-left: 10px;
}
img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
table {
border-collapse: collapse !important;
}
#outlook a {
padding: 0;
}
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" width="100%" class="main-wrapper">
<tr>
<td style="background-color: #dddddd">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: Roboto, Arial; font-size: 13px">
<tr bgcolor="#EEEEEE">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<!-- <td style="padding: 20px 20px 20px 20px;"> -->
<td style="padding: 20px 0px 20px 0px">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="box-shadow: 0px 0px 4px 2px #e0e0e0">
<tr bgcolor="#FFFFFF">
<!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
<td style="color: #666666; padding: 0">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="email_content" style="padding-bottom: 15px; background-color: #fafafa;">
<div style="padding: 5px; border-radius: 4px 4px 0px 0px; background-color: #fdaf74;"></div><!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> --><!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> --><img src="https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg" alt="First_American_Logo_0" width="142" height="40" style="padding : 20px 0 0 25px;">
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: Roboto, Arial">
<tr bgcolor="#F2F2F2">
<td align="center">
<table cellpadding="0" cellspacing="0" width="600" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="text-align: left; font-size: 16px; padding: 6px 0 10px 18px;">
<p style="color: #1a1a1a;">Hi Sheetal Chourasiya,</p>
<p style="color: #505050;">You have received Plum E-Gift Card. Congratulations!</p>
</td>
</tr>
<tr>
<td align="center"><img src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg" style="margin: 0; border: 0; padding: 0; display: block;" width="600" height="300" alt="Image"></td>
</tr>
<tr>
<td style="padding: 24px 60px 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="text-align: left; font-size: 14px; background-color: #fafafa; border-radius: 6px; margin-bottom: 30px;">
<tr>
<th style="padding: 24px 0 10px 24px; text-align: left; font-size: 16px; color: #505050;">Plum E-Gift Card</th>
<td style="text-align: right; padding-right: 20x;">
What is Plum?
</td>
</tr>
<tr style="box-shadow: 0px -1px 0 0 #eaeaea;">
<td style="padding: 20px 0 20px 24px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><span style="color: #909090; font-size: 16px; margin: 0;">Gift Card Code</span></td>
</tr>
<tr>
<td><span style="color: #505050; font-size: 20px; margin: 6px 0 0 0; font-weight: 500; letter-spacing: 0.025rem;">77m43dddb46b</span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The problem is in the following line:
<table align="center" style="width: 100%" class="main-wrapper">
When you use style = "width: 100%", you are saying that you want the width of the table to be the entire browser width; the width of the parent container and the margins combined.
There are a few ways you can fix this problem:
The first way is to use width: auto:
<table align="center" style="width: auto" class="main-wrapper">
Another way it to just set the pixels manually:
<table align="center" style="width: 600px" class="main-wrapper">
Or, you can just get rid of the style as a whole so it'll auto fit to the parent width:
<table align="center" class="main-wrapper">
All three of these methods will produce the same result.
I am trying to change the position of the text to the TOP of the center. I am using table which i need to use in email template.
Here is my fiddle
https://jsfiddle.net/g2sbhf7k/
<td height="1"><p>hello</p><p>hello</p> </td>
this is showing in middle left, but i need to show in top center
Thanks
See if this helps
<td style="vertical-align: top; text-align: center;" height="1">
<p>hello</p>
<p>hello</p>
</td>
Using all the rest of your code, I just added a class
html:
<td height="1" class="topCenter"><p>hello</p><p>hello</p> </td>
css:
.topCenter{
text-align: center;
vertical-align: top;
}
Your answer is here .... though I've shorten some code:
https://jsfiddle.net/SAS3000/tx6zfgba/
table table {
width: 191px;
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
border: 1px solid #ddd;
}
td {
text-align:center;
vertical-align:top;
}
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;width:600px;background-color: #ffffff;">
<tr>
<td align="left">
<table height="180px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="1">
<p>hello</p>
<p>hello</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
This can be done at table level without CSS as well.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">centered text</td>
</tr>
</tbody>
</table>
Is it possible to vertically align table 3 at the bottom in the following example?
This is for a mail signature, hence the use of tables and the hack with align to make the tables responsive (they'll stack underneath each other if viewport gets too small). Now, the client wants the logo in table 3 to be aligned at the bottom (see example image) and I'm beginning to wonder if this is even possible while keeping it mobile friendly.
I've tried vertical-alignment: bottom pretty much everywhere and margin-top: auto; margin-bottom: 0; on table 3 to no avail. I'm guessing the align="left" overrides pretty much ever vertical alignment styling I'm trying to make.
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
<tr>
<td>
<!-- "responsive" tables -->
<!-- table 1 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
<tr>
<td>
Company logo
</td>
</tr>
</table>
<!-- table 2 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
<tr>
<td>
Contact details<br>
<br>
<br>
</td>
</tr>
</table>
<!-- table 3 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;">
<tr>
<td>
Another logo
</td>
</tr>
</table>
</td>
</tr>
</table>
You could use a vertical-align and give the cell a height using CSS.
#media (min-width: 1000px) {
.logoHolder td {
height: 50px;
vertical-align: bottom;
}}
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
<tr>
<td>
<!-- "responsive" tables -->
<!-- table 1 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
<tr>
<td>
Company logo
</td>
</tr>
</table>
<!-- table 2 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
<tr>
<td>
Contact details<br>
<br>
<br>
</td>
</tr>
</table>
<!-- table 3 -->
<table class="logoHolder" align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;vertical-align: bottom;">
<tr>
<td style="vertical-align: bottom;">
Another logo
</td>
</tr>
</table>
</td>
</tr>
</table>
I have the following 2x1 cell where I have an image in cell 1 and text in cell 2. I want rounded corners such as the examples found here. I used border-radius but I still have hard corners. I cannot use CSS as this is for a newsletter that will be emailed out. I appreciate any insight.
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150" style="border-width: 0px" src="http://www.path.com/to/image.png"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span style="font-family: trebuchet ms,verdana,arial,helvetica,sans-serif; font-size: 12px;">
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</table>
The issue is with border-collapse: collapse; you need to use the border-collapse: separate;
<html>
<head>
<style>
td > span {
font-family: trebuchet ms,verdana,arial,helvetica,sans-serif;
font-size: 12px;
}
td > img {
/* border-width: 0px; */
border-radius: 15px 0 0 50px;
}
body > table {
border-collapse: separate;
border-radius: 15px 50px;
border: 3px solid #000;
}
</style>
</head>
<body>
<table width="723" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150"src="http://via.placeholder.com/275x150"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span>
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
Results in:
You can see documentation about the different styles of border on tables at https://www.w3.org/TR/CSS21/tables.html#separated-borders and https://www.w3.org/TR/CSS21/tables.html#collapsing-borders. The snippet above should work in an email or as a stand alone page but would recommend separating the CSS for a standalone page.
Change your table tag from
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
to
<table border="3" width="723" cellspacing="0" cellpadding="0" >
And use this CSS
table {
border: 2px solid;
border-radius: 25px;
}
If you only want this rounded corner on the outer table, then give it an ID or a class and reference the new ID or class in the CSS instead of referencing all table elements.
I am working on HTML email and trying to center a green TD in a white TR so that there's a 20px white margin on the left and right of the green box.
I tried setting TD width for the green portion and setting margin 0 auto but the green just expands to the width of the TR.
Tried putting in 2 more TDs to push the green TD into the center and that didn't work either.
Including the code snippet, am having trouble with the TR that has #a6d971.
<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
<tbody>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
</td>
</tr>
<tr bgcolor="#fff" height="75">
<td valign="top" style="text-align:center;">
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
Regular sales happen every day
</p>
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
9am - 11pm
</p>
</td>
</tr>
<tr bgcolor="#fff" height="75" padding="10">
<td bgcolor="#000" width="20"></td>
<td bgcolor="#a6d971" width="300" style="margin: 10;">
</td>
<td bgcolor="#000" width="20"></td>
</tr>
<tr bgcolor="#fff">
<td valign="top">
<table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
<tbody>
<tr>
<td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
<h3>Nine # Nine</h3>
<p>Fuel up! Dresses, tunics and other items including:</p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
</td>
</tr>
</tbody>
</table>
Switch to DIV's and CSS, most emails client supports styles pretty well, you can use a DIV inside your TD element, it'll be easy to center or do other things you might want.
For Example
<tr style="background-color: white;">
<td style="background-color: green;">
<div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
</td>
</tr>
Also note if you use DIV's you can also avoid tables.
Hack on top of a hack.
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
This is stuff.
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/zy6GU/
Incidentally, the same thing should work with a DIV:
<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>
http://jsfiddle.net/zy6GU/1/
If you HAVE to use tables, might as well abuse them a little:
<table><tr align="center">
<td width="50%">one</td>
<td style="background-color:green">two</td>
<td width="50%">three</td>
</tr></table>
http://jsfiddle.net/mblase75/yntfu/
I'm not a CSS expert but this works for me (with no extra tags) :
<table>
<tr style="background-color: white; border: 1px solid black;">
<td style="background-color: green; display: block; margin: 0 20px;">
<!-- Content -->
</td>
</tr>
</table>
What are you talking about 'for emails'? You mean an email address, like Email Me? If so you'd want some css that centers the link in the TD, or in combination with colspan on the TD.