Tables in HTML Emails: Nesting, Padding and Widths, Oh My

Article first published in July 2007, Updated April 2019

I would like to preface this article by stating that I use
standards-based markup to build my HTML emails and my websites.
However, those of you who are familiar with other articles posted
here at Campaign Monitor about HTML emails will know that
standards-based markup results in formatting, not unlike rich-text
format (RTF) in many popular email clients. I’m comfortable with
this, and so are my clients, once they learn about how web
standards ensure accessibility and cross-client/platform/device
content-compatibility and help emails reach legitimate subscribers
without being eradicated by spam filters.

But not every web designer has the grace and charm of Mark
Wyner, and, therefore, many face clients and bosses who demand they
build HTML emails for design integrity at any cost.

So, for those of you who must use tables in your HTML
emails, I have some information about how they perform across the
board. I ran some tests and discovered that, while I couldn’t
find a perfect solution, I did manage to collect some useful tips
to make your tables behave, for the most part.

Tables in HMTL Emails: Nesting, Padding, and Widths, Oh My

One of the most critical aspects of your email campaign is the
call to action (CTA). Once your reader opens the email and finishes
reading it, you want a response from them. There are plenty of tips
and tricks to
optimize your CTA
in order to get the desired response from
your readers. One of them is to ensure that your email is displayed
as you would like on different devices.

Getting your email to display as desired can be challenging.
When an email gets sent to different devices, sometimes images go
missing. Other times, text isn’t displayed correctly. This is why
coding for emails is so necessary.

Why use HTML email tables?

Html email tables can be considered a developer’s best friend
because of their reliability. Different email applications have a
variety of rendering engines, and these ultimately affect how an
email is displayed. HTML tables are used to structure an email, and
this helps to ensure that the emails are displayed in the desired
way across some email clients.

Table Math, Meet Box-Model Math

When one places table widths, td widths, td padding and
CSS padding into a blender, the results are quite chaotic and
inconsistent. Take, for example, the following table:

Just as intended, the resulting width of this table is 400
pixels and the width of the columns are 100 and 300 pixels:


<table cellspacing="0" cellpadding="0" width="400">
<tr>
<td width="100"></td>
<td width="300"></td>
</tr>
</table>

Just as intended, the resulting width of this table is 400
pixels and the width of the columns are 100 and 300 pixels:

[screen shot]

But when some padding is added—via either CSS or HTML—the
widths of the columns are compromised:

However, when table width is kissed good bye, the results are
not unlike a CSS box model. If padding is added to the original
example and the table width is removed, the code looks like
this:


<table cellspacing="0" cellpadding="10" >
<tr>
<td width="80"></td>
<td width="280"></td>
</tr>
</table>

And, as intended, the resulting widths are correct for both the
table and the columns:

But note how the td widths were reduced to accommodate the new
padding. This is just like the CSS box model in which 100 pixels
wide + 10 pixels padding = 120 pixels total.

Building an effective HTML email template


Building an effective HTML email template

Source:

Building an HTML email is challenging for many developers.
Opting for a
ready-made html email template
, such as the ones available on
Campaign Monitor, can save a lot of time, but for developers who
would like to challenge themselves, there are few crucial factors
they’ll need to keep in mind before building your own
template.

1. Consider the email clients

Not so long ago, most mobile users were accessing their emails
through their Blackberry devices. However, times have changed. Now
your readers not only have different mobile devices, but there is
also a multitude of email clients.

To get an idea of
popular email clients
, Campaign Monitor provides regular
updates. Understanding these statistics will form the bases for
your template. This will also help you to know which email clients
you’ll need to test for before sending the email out.


This will also help you to know which email clients you’ll need to test for before sending the email out.

Source:
Campaign Monitor

2. Nest your tables

Nesting can be defined as placing a table area inside another
table area, and, as a result, table tags can get a little complex.
This is ideal for more complicated tables coding, as it will help
you to get the desired layout. With nesting, remember to first
close your tables with the typical </tr> and </table>
before starting to close the cells inside.

If a table is nested inside another, the rules above apply,
except a couple of essential variances:

  • Yahoo Mail (new), Gmail, Outlook 2007, and Eudora apply extra
    width to account for borders. However, only when they are nested,
    as the parent table behaves appropriately.
  • Applying widths to td tags that also have CSS or HTML padding
    creates confusion across the board. Nearly every client renders the
    widths in its own unique fashion.
  • Even without any borders, there are variances in width by 2–4
    pixels for a nested table width two columns. My tests were
    inconclusive as to the rhyme and reason behind this unnatural
    phenomenon.

3. Your paddings and widths are essential


3. Your paddings and widths are essential

Source: MailChimp

Margins and paddings are vital, as they help to prevent your
images and texts from running into each other.

There are plenty of ways to achieve this.

  • With <div> tags, margins can be used: <div
    style=“margin:5px;”>
  • With <td> tags, padding can be used: <td
    style=”padding:5px;”>

You can always play around with the coding to see which outcome
you prefer.
Emma
highlights that using the padding attribute in <div>
tags will strip them from Outlook 2007 and 2010.

It is also important to assign width, as missing this step will
result in the content displaying differently across email
clients.

Clients Tested Webmail

  • Yahoo Mail
  • Yahoo Mail Beta
  • Windows Live Hotmail (old)
  • Windows Live Hotmail (new)
  • Gmail
  • Mac
  • AOL

Desktop

  • Apple Mail
  • Thunderbird
  • Outlook 2007
  • Outlook 2003
  • Outlook Express
  • Eudora
  • Lotus Notes

Can I use divs in an HTML email?

Coding your email using divs makes life a lot easier, as there
are no tables involved. This makes the email much faster to develop
and much easier to read.

While these pros are noteworthy, going the divs route has its
challenges:

  • Difficulty with controlling spacing.
  • Some email clients won’t be able to interpret it
  • Some of your CSS will fail

Wrap up

Deciding to code your own HTML email tables is no small task.
Understanding some of the challenges will help to ensure that
you’re well prepared and that your emails will display as you
would like them to across different email clients.

Please do your best to educate your clients/bosses about how
the benefits of standards-based markup far outweigh design
integrity across the board. However, if you fall short of
convincing them and are forced to use tables for layout, take
note of the lessons outlined in this guide.

Opting for a
ready-made html email template
, such as the ones available on
Campaign Monitor, can save a lot of time.

The post
Tables in HTML Emails: Nesting, Padding and Widths, Oh My

appeared first on Campaign Monitor.

Source: FS – Email Marketing Blogs!
Tables in HTML Emails: Nesting, Padding and Widths, Oh My