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 modify svg icon colors with Tailwind
- Add a close button to tabs
- How do I fix wrongly nested / unclosed HTML tags?
- textarea onresize not working
- Flowbite overriding/changing input field CSS
- <nav> or <menu> (HTML5)
- How to style divs which do not have any elements in it?
- Angular: ng-container not displayed
- How to insert a dynamic component inside a element in Angular
- Why ngModel doesn't works on the last version of Angular 17?
- How do I make the text begin on top inside the div that it is in, and not in the middle?
- How to set a border for an HTML div tag?
- Is there a content element in HTML5?
- Get the size of the screen, current web page and browser window
- The flex item extends beyond the boundaries of the flex container
- Increase Image Button Size on Yikes Easy Form
- Html5 (audio) on Safari & iOS
- How do I make my Next and Previous buttons move this carousel? I already got it to slide transition automatically, but can't get manual navigation
- Make a div fill the height of the remaining screen space
- How can you figure out the highest z-index in your document?
- reCAPTCHA v2 with HTML Dialog .showModal() method
- How to make my container fill the bottom of my page (if the page is not scrollable)
- Vertically align FontAwesome icons of different sizes in unordered list
- Capture Blank Nodes DOM and assign value
- Why is HTML width changing what I put down
- How an I set height relative to viewport for values other than 100 with Bootstrap 5?
- Get HTML markup after a specified tag
- Image not appearing, instead the alt value is showing
- Create CSS circles connected by line
- Overlapping header on image