Responsive HTML Email Tables

Building Bulletproof Responsive HTML Email Tables

Developing multi-column sections in HTML emails is different from website design in that we aren’t able to use <div> tags or other elements that we can add styling to for a column’s responsiveness like we can on the web. Instead, we need to build and layer HTML tables so when the screen width gets narrower our tables will stack on top of each other.

Centering the HTML Email Template

Before we add the tables to our email layout to achieve responsiveness, let’s get our template centered in email clients which will be the first tag after the HTML Email Body tag to reset the canvas which was covered in a previous lesson.  To do this we’ll use the <center> HTML tag which isn’t valid anymore in the latest version of HTML(5) but still serves it’s function in HTML email rendering engines.

<center style="table-layout:fixed;">

Inside of the <center> tag you’ll notice the style declaration “table-layout:fixed;” which gives us control over the width of the main table we’ll add inside of the center tag.

Main HTML Email Template Table

To reinforce the centering of our email template, inside of the main <table> tag we’ll use the align attribute with the “center” value.

<table align="center" style="border-spacing:0;Margin:0;padding:0;width:100%;max-width:600px;">

The styling with zero values in the main table, similar to the <body> tag, is mostly to strip away any inherit spacing that email clients want to add to our design. We also have our width set to 100% for small screens and the width set to 600px which is the preferred and most recommended width of email templates to fit in email clients.

Table Layering for Columns

Now that we have our main table set we can start the table row using the <tr> tag with a table date <td> tag inside of it and the padding set to zero to remove horizontal spacing in email clients:

<tr>
  <td style="padding:0;">
    <table width="100%;" style="border-spacing:0;">
      <tr>
        <td class="two-columns" style="padding:0;">

After the first <tr> and <td> tags there is a second <table> tag and an additional set of the table row & table data tags. The class “two-columns” added here doesn’t require any styling using CSS separate from the padding set to zero, the reason for it is to simply let us know that this <td> tag will be containing our two columns.

Next we’ll add the actual column which will be one of two columns, with matching HTML, that will align next to each other at the full 600px width and stack on top of one another under 600px.  The “column” class here is also simply to remind us that this table represents one of our two columns while we do away with border from email clients and set our width to 300px.  The key styling here that allows tables to be responsive and stack in email clients are the “vertical-align:top;” and “display:inline-block;” styles.

<table class="column" style="border-spacing:0;width:100%;max-width:300px;vertical-align:top;display:inline-block;">
  <tr>
    <td style="padding:10px;">
      <img src="https://via.placeholder.com/280x200" alt="" width="280" style="max-width:280px;border-spacing:0;">
    </td>
  </tr>
</table>

Inside of the table we have the option to add padding around the column content, in this case an image has been added with the width set to 280px so with 10px of padding on either side it will keep the image from being on the edge of the template. Along with the image you can also add text, buttons, or other content inside of your responsive column. So go ahead and test it out, don’t forget to close your tags!

..continue to the next lesson: HTML Email Conditional Statements.

HTML Email Mastery Course