Would you like to learn how to create an email template using HTML and style it with CSS?
Usually, you can make an email template with HTML elements. But for Gmail, you'll need to add a <table> tag along with <td> and <tr> properties.
Otherwise, your email template won't function properly when shared in Gmail.
You need to add the first table tag as main-container and add a tr>td>table inside it, And there is no specific tr, td and table element that you need to create for the section,
But each section is created separately with only tr td and table and then depends on your template design how many tr td table you need to create.
And once you have completed the HTML section and you can do CSS styling using inline CSS. And external, and internal CSS is a risk that will not work in the browser.
Here's a simple DOMA example with one section, along with the code:
<!-- Three Columns -->
<tr>
<td>
<table width="100%">
<tr>
<td class="three-con" style="background-color: #ffffff">
<table class="con">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#"
><img
src="images/feature1.png"
width="150"
alt=""
/></a>
<tr>
<td>
<p style="font-size: 17px; font-weight: bold">
Avoid Medicine
</p>
<p>
Orange juice is a concentrated source of
vitamin C, a water-soluble vitamin that
doubles as a powerful antioxidant and plays
a central role in immune function.
</p>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="con">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#"
><img
src="images/feature2.png"
width="150"
alt=""
/></a>
<tr>
<td>
<p style="font-size: 17px; font-weight: bold">
Prevent Kidney Stones
</p>
<p>
Kidney stones are small mineral deposits
that accumulate in your kidneys, often
causing symptoms like severe pain, nausea,
or blood in your urine.
</p>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="con">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#"
><img
src="images/feature3.png"
width="150"
alt=""
/></a>
<tr>
<td>
<p style="font-size: 17px; font-weight: bold">
Improve Heart Health
</p>
<p>
Orange juice has also been shown to increase
levels of “good” HDL cholesterol in people
with elevated levels — which could improve
heart health.
</p>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
I understand it might seem a bit messy and confusing, but that's how email templates are typically created. This is just one section with three columns, and the section containing a images, headings, and paragraphs.
Take a look at the image below; it'll give you a clearer understanding.
And here is a full email teample code:
<!DOCTYPE html>js
<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>Two_2</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #cccccc;
}
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
}
.container {
width: 100%;
table-layout: fixed;
background-color: #cccccc;
}
.contain {
background-color: #1d3c45;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
font-family: sans-serif;
color: #1d3c45;
}
.two-col {
font-size: 0;
text-align: center;
}
.two-col .col {
width: 100%;
display: inline-block;
max-width: 300px;
vertical-align: top;
text-align: center;
}
.three-con {
text-align: center;
font-size: 0;
padding: 35px 0 20px;
}
.three-con .con {
width: 100%;
max-width: 200px;
display: inline-block;
}
.three-con .padding {
padding: 15px;
}
.three-con .content {
display: inline-block;
font-size: 17px;
line-height: 20px;
}
.two-con.last {
padding: 35px 0;
background-color: #ffffff;
}
.two-con .padding {
padding: 10px;
}
.two-con .content {
font-size: 17px;
line-height: 20px;
text-align: left;
}
.two-con .column {
width: 100%;
max-width: 280px;
}
.two-con .column:first-child {
padding-left: 20px;
}
.column {
display: inline-block;
}
.footer {
text-align: center;
padding: 35px 0;
}
</style>
</head>
<body>
<center class="container">
<table class="contain">
<tr>
<td style="background-color: #ef721e; height: 4px"></td>
</tr>
<!-- Header -->
<tr>
<td style="padding: 14px 0 4px">
<table width="100%">
<tr>
<td class="two-col">
<table class="col">
<tr>
<td style="padding: 0 62px 10px">
<a href="#"
><img
src="images/logo.png"
width="180"
alt="Logo"
title="logo"
/></a>
</td>
</tr>
</table>
<table class="col">
<tr>
<td style="padding: 10px 68px">
<a href="#"
><img
src="images/fb.png"
width="32"
style="border-radius: 50%; padding-left: 5px"
/></a>
<a href="#"
><img
src="images/ig.png"
width="32"
style="border-radius: 50%; padding-left: 5px"
/></a>
<a href="#"
><img
src="images/in.png"
width="32"
style="border-radius: 50%; padding-left: 5px"
/></a>
<a href="#"
><img
src="images/tw.png"
width="32"
style="border-radius: 50%; padding-left: 5px"
/></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Banner -->
<tr>
<td>
<table width="100%">
<tr>
<td>
<a href="#"
><img
src="images/banner.png"
alt=" "
width="600 "
style="max-width: 100%"
/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Three Columns -->
<tr>
<td>
<table width="100%">
<tr>
<td class="three-con" style="background-color: #ffffff">
<table class="con">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#"
><img
src="images/feature1.png"
width="150"
alt=""
/></a>
<tr>
<td>
<p style="font-size: 17px; font-weight: bold">
Avoid Medicine
</p>
<p>
Orange juice is a concentrated source of
vitamin C, a water-soluble vitamin that
doubles as a powerful antioxidant and plays
a central role in immune function.
</p>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="con">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#"
><img
src="images/feature2.png"
width="150"
alt=""
/></a>
<tr>
<td>
<p style="font-size: 17px; font-weight: bold">
Prevent Kidney Stones
</p>
<p>
Kidney stones are small mineral deposits
that accumulate in your kidneys, often
causing symptoms like severe pain, nausea,
or blood in your urine.
</p>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="con">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#"
><img
src="images/feature3.png"
width="150"
alt=""
/></a>
<tr>
<td>
<p style="font-size: 17px; font-weight: bold">
Improve Heart Health
</p>
<p>
Orange juice has also been shown to increase
levels of “good” HDL cholesterol in people
with elevated levels — which could improve
heart health.
</p>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Two section -->
<tr>
<td style="background-color: #1d3c45; height: 4px"></td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td class="two-con last">
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<p
style="
font-size: 17px;
font-weight: bold;
display: inline-block;
"
>
Rich in Several Important Nutrients
</p>
<p style="display: inline-block">
An 8-ounce (240-ml) serving of orange juice
provides approximately
</p>
<p style="display: inline-block">
Not to mention, it’s an excellent source of the
mineral potassium, which regulates blood
pressure, prevents bone loss, and protects
against heart disease and stroke.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#"
><img
src="images/orange.gif"
width="260px"
style="max-width: 260px"
/></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td class="two-con last">
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#"
><img
src="images/orange2.gif"
width="260px"
style="max-width: 260px"
/></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<p
style="
font-size: 17px;
font-weight: bold;
display: inline-block;
"
>
May Decrease Inflammation
</p>
<p style="display: inline-block">
Some studies suggest that orange juice could
decrease inflammation and problems tied to it.
</p>
<p style="display: inline-block">
Orange juice may help decrease markers of
inflammation, which could help reduce your risk
of chronic disease.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #1d3c45; height: 4px"></td>
</tr>
<!-- Footer -->
<tr>
<td>
<table width="100%">
<tr>
<td>
<table width="100%" class="footer">
<tr>
<td class="padding">
<a href="#"
><img
src="images/logo.png"
alt="logo"
title="logo"
width="180px"
style="border-radius: 10px"
/></a>
</td>
</tr>
<tr>
<td style="padding: 10px 68px">
<a href="#"
><img
src="images/fb.png"
width="32"
style="border-radius: 50%; padding-left: 5px"
/></a>
<a href="#"
><img
src="images/in.png"
width="32"
style="border-radius: 50%; padding-left: 5px"
/></a>
<a href="#"
><img
src="images/ig.png"
width="32"
style="border-radius: 50%; padding-left: 5px"
/></a>
<a href="#"
><img
src="images/tw.png"
width="32"
style="border-radius: 50%; padding-left: 5px"
/></a>
<p style="color: #ffffff; font-size: 15px">
307 S. Main St. Suite 202 Bentonville, AR 72712, USA
</p>
<p style="color: #ffffff; font-size: 15px">
© 2011-2022, MADE GROCERY. All rights reserved
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<td style="background-color: #ef721e; height: 4px"></td>
</table>
</center>
</body>
</html>
This will work well on any device, adjusting to different screen sizes easily.
And a Output:
I hope this post helps you learn how to create an email template using HTML and CSS.
If you need an email template, feel free to check out my Fiverr profile! https://www.fiverr.com/yasminsardar/do-responsive-html-email-templates-design
Top comments (0)