How to make Email Template Using HTML
Tags: tutorial, html, webdev, beginners
Published: 2024-06-10 17:29:06

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:

```js
        <!-- 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.

![three Columns section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8eeon7128d3qmj0j13ls.png)

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: 

![A output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pllqp78etbazd2ftw65i.png)

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