Email Template Using HTML and CSS
Last Updated :
03 Jul, 2025
The colorful and engaging email templates you see in your inbox are more than just design—they’re built to get results. A well-crafted email can increase click-through rates by up to 42%.
In this article, you'll learn how to create a simple yet attractive email template using HTML and CSS. Since many email clients don’t support advanced CSS, we’ll use HTML tables to build a layout that looks great across all devices and helps drive more clicks on your Call to Action (CTA).
Example:
index.html
<!-- Create main outline within which email will be enclosed -->
<body style="background-color:grey">
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="550" bgcolor="white" style="border:2px solid black">
<tbody>
<tr>
<td align="center">
<br />
<table align="center" border="0" cellpadding="0"
cellspacing="0" class="col-550" width="550">
<tbody>
<!-- content goes here -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
Output:
Now, remember, email applications will support inline style only. If you specify the properties in style tag, the email application will not consider them and the specified properties will not be applied.
Example:
index.html
<body style="background-color:grey">
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="550" bgcolor="white" style="border:2px solid black">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0"
cellspacing="0" class="col-550" width="550">
<tbody>
<tr>
<td align="center"
style="background-color: #4cb96b;
height: 50px;">
<a href="#" style="text-decoration: none;">
<p style="color:white;font-weight:bold;">
GeeksforGeeks
</p>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
Output:
Further sections can be made using <tr> and <td>tags. Now, let us enter further information.
Example:
index.html
<!-- Complete Email template -->
<body style="background-color:grey">
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="550" bgcolor="white" style="border:2px solid black">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0"
cellspacing="0" class="col-550" width="550">
<tbody>
<tr>
<td align="center" style="background-color: #4cb96b;
height: 50px;">
<a href="#" style="text-decoration: none;">
<p style="color:white;
font-weight:bold;">
GeeksforGeeks
</p>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="height: 300px;">
<td align="center" style="border: none;
border-bottom: 2px solid #4cb96b;
padding-right: 20px;padding-left:20px">
<p style="font-weight: bolder;font-size: 42px;
letter-spacing: 0.025em;
color:black;">
Hello Geeks!
<br> Check out our latest Blogs
</p>
</td>
</tr>
<tr style="display: inline-block;">
<td style="height: 150px;
padding: 20px;
border: none;
border-bottom: 2px solid #361B0E;
background-color: white;">
<h2 style="text-align: left;
align-items: center;">
Design Patterns : A Must Skill to
have for Software Developers in 2019
</h2>
<p class="data"
style="text-align: justify-all;
align-items: center;
font-size: 15px;
padding-bottom: 12px;">
Design Patterns….??? I think you have heard this name
before in programming… Yes, you might have heard
this name before in programming if you are…
</p>
<p>
<a href=
"https://www.geeksforgeeks.org/design-patterns-a-must-skill-to-have-for-software-developers-in-2019/"
style="text-decoration: none;
color:black;
border: 2px solid #4cb96b;
padding: 10px 30px;
font-weight: bold;">
Read More
</a>
</p>
</td>
</tr>
</tbody>
</table>
</body>
Output:
Finally, you may add a footer containing social media links, company name, contact information, etc.
Example:
index.html
<!-- Complete Email template -->
<body style="background-color:grey">
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="550" bgcolor="white" style="border:2px solid black">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0"
cellspacing="0" class="col-550" width="550">
<tbody>
<tr>
<td align="center" style="background-color: #4cb96b;
height: 50px;">
<a href="#" style="text-decoration: none;">
<p style="color:white;
font-weight:bold;">
GeeksforGeeks
</p>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="height: 300px;">
<td align="center" style="border: none;
border-bottom: 2px solid #4cb96b;
padding-right: 20px;padding-left:20px">
<p style="font-weight: bolder;font-size: 42px;
letter-spacing: 0.025em;
color:black;">
Hello Geeks!
<br> Check out our latest Blogs
</p>
</td>
</tr>
<tr style="display: inline-block;">
<td style="height: 150px;
padding: 20px;
border: none;
border-bottom: 2px solid #361B0E;
background-color: white;">
<h2 style="text-align: left;
align-items: center;">
Design Patterns : A Must Skill to
have for Software Developers in 2019
</h2>
<p class="data"
style="text-align: justify-all;
align-items: center;
font-size: 15px;
padding-bottom: 12px;">
Design Patterns….??? I think you have heard this name
before in programming… Yes, you might have heard
this name before in programming if you are…
</p>
<p>
<a href=
"https://www.geeksforgeeks.org/design-patterns-a-must-skill-to-have-for-software-developers-in-2019/"
style="text-decoration: none;
color:black;
border: 2px solid #4cb96b;
padding: 10px 30px;
font-weight: bold;">
Read More
</a>
</p>
</td>
</tr>
<tr style="border: none;
background-color: #4cb96b;
height: 40px;
color:white;
padding-bottom: 20px;
text-align: center;">
<td height="40px" align="center">
<p style="color:white;
line-height: 1.5em;">
GeeksforGeeks
</p>
<a href="#"
style="border:none;
text-decoration: none;
padding: 5px;">
<img height="30"
src=
"https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/icon-twitter_20190610074030.png"
width="30" />
</a>
<a href="#"
style="border:none;
text-decoration: none;
padding: 5px;">
<img height="30"
src=
"https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/icon-linkedin_20190610074015.png"
width="30" />
</a>
<a href="#"
style="border:none;
text-decoration: none;
padding: 5px;">
<img height="20"
src=
"https://extraaedgeresources.blob.core.windows.net/demo/salesdemo/EmailAttachments/facebook-letter-logo_20190610100050.png"
width="24"
style="position: relative;
padding-bottom: 5px;" />
</a>
</td>
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif;
font-size:11px; line-height:18px;
color:#999999;"
valign="top"
align="center">
<a href="#"
target="_blank"
style="color:#999999;
text-decoration:underline;">PRIVACY STATEMENT</a>
| <a href="#" target="_blank"
style="color:#999999; text-decoration:underline;">TERMS OF SERVICE</a>
| <a href="#"
target="_blank"
style="color:#999999; text-decoration:underline;">RETURNS</a><br>
© 2012 GeeksforGeeks. All Rights Reserved.<br>
If you do not wish to receive any further
emails from us, please
<a href="#"
target="_blank"
style="text-decoration:none;
color:#999999;">unsubscribe</a>
</td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td class="em_hide"
style="line-height:1px;
min-width:700px;
background-color:#ffffff;">
<img alt=""
src="images/spacer.gif"
style="max-height:1px;
min-height:1px;
display:block;
width:700px;
min-width:700px;"
width="700"
border="0"
height="1">
</td>
</tr>
</tbody>
</table>
</body>
Output:
Conclusion
Using HTML tables is a easy and effective way to build beautiful and responsive email templates. While using <div> tags might seem easier and faster, they often cause display issues across different email clients. On the other hand, building your layout with <table> and <tr> tags ensures better consistency and compatibility. With this approach, you can create a variety of attractive email templates that look great and perform well across all platforms.
Similar Reads
How to Create a Website Using HTML and CSS? Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu
5 min read
Design a Tribute Page using HTML and CSS Making a tribute page is an Innovative way to honor someone special in your life. In this article, we create a tribute webpage using HTML and CSS. This page has a simple and creative design. It contains a header with a title, a main section with text and images, and a footer for main details or cred
4 min read
Build a Survey Form using HTML and CSS Creating a survey form is a great way to understand the basics of web development. In this article, we will build a Survey Form that allows users to easily submit their responses. The form will include different input types such as text fields, checkboxes, and radio buttons, all designed using HTML
4 min read
Design a Parallax Webpage using HTML and CSS A parallax website includes fixed images in the background that are kept in place and the user can scroll down the page to see different parts of the image. In this article, we are creating a parallax webpage using HTML and CSS. We will use basic tags of HTML like div, paragraph, and heading to writ
4 min read
Design an Event Webpage using HTML and CSS Creating an event webpage is an exciting way to showcase information about an event, including its schedule, speakers, and contact details. What We’re Going to CreateWe’ll create a webpage for a fictional event called "GeeksforGeeks TechCon 2025." This webpage will includeA header introducing the ev
5 min read
Design a Webpage for online food delivery system using HTML and CSS Creating your own online food delivery website is a great way to present a user-friendly platform for customers to browse and order food online. In this project, we’ll design a simple yet effective food delivery website using HTML and CSS.What We’re Going to Create...We’ll develop a straightforward
7 min read
Create a Homepage for Restaurant using HTML , CSS and Bootstrap HTML: HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the s
6 min read
How to create a Landing page using HTML CSS and JavaScript ? A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v
7 min read
Design a Webpage like Technical Documentation using HTML and CSS In this article, we will design a webpage-style technical documentation using HTML and CSS, which accounts for nearly 30% of the structure and user experience in many educational and product-based websites. Technical documentation refers to structured content that describes the functionality, usage,
3 min read
Create a Music Website Template using HTML, CSS & JavaScript A Music Website Template is a pre-designed layout for creating a music-themed webpage. By utilizing HTML, CSS, and JavaScript, developers can craft a functional and visually appealing website with features like play/pause controls, sections for home, music, about, and contact.Step-by-Step Guide to c
3 min read