Browse by...
Home Resources Blog

Blog Post

How Hachiko Creates Customer Loyalty Programs Using Email Marketing

Hachiko’s impressive loyalty programs are backed by a secret engine– email marketing– which powerfully connects…

Blog Post

Powerful Subject Line Words and How to Use Them in Your Holiday Emails

Learn the power words to use in subject lines, and how you can apply them…

Blog Post

How Birchbox Decks Inboxes with Holiday Email Cheer

See how Birchbox delivers delight to subscribers with email marketing.

Blog Post

Campaign Monitor & Unbounce Present: The Ultimate Holiday Email Marketing + Landing Page Guide

Get the free guide to optimizing your email marketing and landing pages for the holidays….

Blog Post

How Bigdog Is Revolutionizing Marketing with Interactive Email

In this post, learn how interactive emails can increase engagement, and keep brands at the…

Blog Post

7 Successful Email Deliverability Tips for the Holidays

Make sure you’re positioned for success this holiday season by improving your email deliverability with…

Blog Post

How to Get Your Holiday Email Marketing Ready

Get actionable tips to help you get your email marketing holiday-ready right now.

Blog Post

How Rip Curl Is Making Waves with Email Marketing

Grab your board and see how Rip Curl makes waves with email marketing from Campaign…

Blog Post

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

Disclaimer: This post was originally published in 2015. The email clients listed and information regarding them may be out of date. I would like to preface this article by stating that I use standards-based markup to build my HTML emails and my websites. But for 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. Well, they are once they learn about how web standards ensures accessibility and cross client/platform/device content-compatibility and helps 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. (Oh how this reeks of the “browsers vs. web-standards” battles of old.) 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. Table math, meet box-model math So it turns out that when one places table widths, td widths, td padding and CSS padding into a blender, the results are quite chaotic. Inconsistent, to the say the least. Take, for example, the following table: [code] <table cellspacing="0" cellpadding="0" border="0" width="400"> <tr> <td width="100"></td> <td width="300"></td> </tr> </table> [/code] Just as intended, the resulting width of this table is 400 pixels and the width of the columns are 100 and 300 pixels: 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: [code] <table cellspacing="0" cellpadding="10" border="0"> <tr> <td width="80"></td> <td width="280"></td> </tr> </table> [/code] 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. Nested tables If a table is nested inside another, the aforementioned rules apply with the exception of a couple important variances: Yahoo Mail (new), Gmail, Outlook 2007 and Eudora apply extra width to account for borders. But 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 with two columns. My tests were inconclusive as to the rhyme and reason behind this unnatural phenomenon. Just know that pixel perfect isn’t an option (unless there is some hidden secret behind this). 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 So there you have it. Please do your best to educate your clients/bosses about how the benefits of standards-based markup far outweigh design integrity across the board. But if you fall short of convincing them and are forced to use tables for layout, take note of the lessons outlined herein. You’ll save yourself a nasty headache.

Blog Post

How to Drive More Revenue from Transactional Emails

Your customers get transactional emails every day. They receive them after signing up for services,…

Blog Post

How to Go from Zero to Hero with Email Automation

In this post, we’ll explain different types of automated emails and help take you from…

Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free