htmlcssemaillayoutoutlook
Table mail layout styles are not shown correctly in outlook
I am creating a mail layout with tables but I am struggling to obtain the desired result in outlook.
I am using https://app.postdrop.io/ to create the layout, with postdrop I can send it to a mail, so I am testing it in gmail and outlook. In gmal looks all okay, as I want. But in outlook the styles are not shown correctly and I don't know what to try anymore.
This is the code I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mai layout</title>
</head>
<body style="margin: 0">
<table
style="
max-width: 600px;
margin: 0 auto;
font-family: Arial;
padding: 16px;
"
>
<tr>
<td>
<table
style="
border: 1px solid #e7e8e8;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
"
width="100%"
>
<tr>
<td
colspan="2"
style="font-size: 16px; font-weight: 700; color: #006899;"
>
Demo text
</td>
</tr>
<tr>
<td style="width:0">
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="location"
style="vertical-align:middle; width:16px; height:16px"
/>
</td>
<td>
<span style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
">
Demo text
</span>
</td>
</tr>
<tr>
<td>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="work mode"
style="vertical-align:middle; width:16px; height:16px"
/>
</td>
<td
style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
"
>
Demo text
</td>
</tr>
<tr>
<td>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="location"
style="vertical-align:middle; width:16px; height:16px"
/>
</td>
<td>
<span style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
">
Demo text
</span>
</td>
</tr>
<tr>
<td colspan="3">
<table style="width: 350px">
<tr>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
width: 1px;
font-weight: 700;
font-size: 12px;
"
>
Demo text
</td>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
width: 1px;
font-weight: 700;
font-size: 12px;
"
>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="disability"
style="vertical-align:middle; width:16px; height:16px"
/>
Demo text
</td>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
width: 1px;
font-weight: 700;
font-size: 12px;
"
>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="disability"
style="vertical-align:middle; width:16px; height:16px"
/>
Demo text
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
and this is what I see in postdrop while I am creating the layout:
This is how it looks like in gmail:
but this in outlook:
What can I do to make outlook get the styles and display it like gmail, is it possible? Thank you!
Solution
I find the solution, simply I added another table inside to separate the first and second block. This is the improved code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo text</title>
</head>
<body style="margin: 0">
<table style="max-width: 600px; margin: 0 auto; font-family: Arial">
<tr>
<td
style="border: 1px solid #e7e8e8; border-radius: 8px; padding: 16px"
>
<table style="margin-bottom: 16px" cellspacing="0">
<tr>
<td
colspan="2"
style="
font-size: 20px;
font-weight: 700;
color: #006899;
padding-bottom: 4px;
"
>
Demo text
</td>
</tr>
<tr>
<td>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="location"
style="width: 16px; height: 16px"
/>
</td>
<td
style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
padding-bottom: 5.5px;
"
>
Demo text
</td>
</tr>
<tr>
<td>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="work"
style="width: 16px; height: 16px"
/>
</td>
<td
style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
padding-bottom: 5.5px;
"
>
Demo text
</td>
</tr>
<tr>
<td>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="business"
style="width: 16px; height: 16px"
/>
</td>
<td
style="
color: #555c5e;
font-size: 14px;
font-weight: 400;
line-height: 22px;
padding-bottom: 5.5px;
"
>
Demo text
</td>
</tr>
</table>
<table>
<tr>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
font-weight: 700;
font-size: 12px;
"
>
<span>Demo text</span>
</td>
<td> </td>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
font-weight: 700;
font-size: 12px;
"
>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="disability"
style="vertical-align: middle"
/>
<span>Demo text</span>
</td>
<td> </td>
<td
style="
border-radius: 100px;
padding: 4px 8px;
background-color: #f5f5f6;
color: #3c4447;
font-weight: 700;
font-size: 12px;
"
>
<img
src="https://cdn3.iconfinder.com/data/icons/feather-5/24/star-16.png"
alt="disability"
style="vertical-align: middle"
/>
<span>Demo text</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This is how it looks in outlook:
- How to close <img> tag properly?
- PHP: log a user out
- Is there a way to align an element to its 'grandparent' without jQuery/javascript?
- How do I find the number of 'complete' images?
- What is the purpose of the <nav> tag
- A way to create random-noise background image (png) with javascript?
- How to make HTML5 work with DOMDocument?
- Position sticky on thead
- How do I add a simple onClick event handler to a canvas element?
- How to expand tree view by default in html
- How to run a function when the page is loaded?
- How can I add horizontal lines between horizontal list items?
- Angular OTP Input: Value Replicating in Multiple Fields Issue
- Difference between title and name in html href element
- How do I show the response of my Open Weather Map API query in my webpage?
- Shrink children to fit parent
- Turning The Split Border into a Complete Border During Hover in CSS
- How to redirect to new page when image is clicked? (html)
- Can not merged two cell 9 and X into one cell in HTML table
- Image taking whole space with tailwind
- How can know new token(smart contract) except https://www.defined.fi/new?
- Injecting javascript thourgh <img>-tag
- Spinning number animation on value update
- How to perform a addition in Jinja2?
- How to encode a string in JavaScript for displaying in HTML?
- Copy text to clipboard with JS
- Can I create a div with a Curved bottom?
- Center align with table-cell
- Using Fetch() how do I append a to an existing element ID?
- dynamically adding <option> elements to select tag destroys its functionality