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

Getting an email to display according to your vision can be challenging. For example, when the campaigns get sent to different devices, inevitably, images may not appear to go missing.

Nonetheless, one of the most critical features for email campaigns is CTA. Once the recipient has opened the email, the content within should make them follow the call to action. Hence, you should test different formats to find the right balance for you and the subscribers.

Why are tables in HTML used in emails?

HTML email table is reliable, convenient, and easy to grasp by developers. Email applications are designed with different rendering engines. Thus, it will inevitably affect how a campaign is displayed.

Mail tables will help with the structure, and they also act as a guarantee that they will be displayed according to your desire across the majority of subscribers.

The Widths Meet the Wits

When table widths, td padding, td widths, and CSS padding are all not well mixed all at once, the results will be chaotic and wrong. Take a look at the example below:

The intent is to make the width of the table 400 pixels and the width of the columns 100 and 300 pixels.

This is the result:

As you can see, the results are not natural on the eye, and it seems chaotic even though no changes have been made to the sizes.

Nonetheless, when one adds padding, either by CSS or HTML, the widths for the columns have changed. Just like this:

What you can do to make it look clean, is to say goodbye to table width and include padding to the original code. For example

As you can see below, the results for the widths and the columns are corrected for both sides of the table.  Nonetheless, this will change the td widths as they will adjust to fit the new padding.

How to Effectively build an HTML email template

If you’re a developer who likes a challenge, you can try to create your email template. This isn’t an easy task, and it may be tempting to use a ready-made one. However, before you get started, you have to take in several important factors.

1. Email Providers

You may remember the sweet days when the majority of people would access their emails through Blackberry smartphones. This is no longer the case, people are welcoming new smartphone devices, and there’s a multitude of subscribers. Take a look at the example below:

Even though a very high number of subscribers will indeed open your campaigns through an Apple smartphone, Gmail is following shortly at only 1% distance.

2. Nest the tables

In simple terms, this action is when a table is placed inside another table, so, as a result, table tags will become more complex. If you want a more complicated coding, this should be done. It will also help you to get the desired template.

To do it correctly, you have to remember the classical </tr> and the </table> before you place the other table inside.

Before we go ahead, you have to remember the rules implied by the email providers. These are listed below:

•    Outlook 2007, Gmail, Yahoo Mail, and Eudora apply the same standard. They will add extra width for the borders to account for them. Nonetheless, this only happens when the tables are nested due to the main table behaving correctly.

•    You should avoid applying widths to tg tags that also have HTML padding and CSS as it will create chaos. It’s important to remember that every provider will fix the widths according to its specifications

•    If you create a nested table even without any borders, you will notice variances in width up to 4 pixels.

To do it correctly, you have to remember the classical </tr> and the </table> before you place the other table inside.

3. Paddings and widths are a must-have

It’s essential to include features such as paddings and margins. It will prevent images and texts from mixing. Due to the beauty of coding, you can play around to see in which fashion you prefer it. Usually, there are two approaches, such as:

•    <div> tags: <div style=“margin:5px;”>

•    <td> tags: <td style=”padding:5px;”>

As mentioned, widths should always be assigned because if this step is missed out on, the images will be displayed differently across the platforms.

Should divs be used in HTML campaigns?

There’s no hiding the fact that you will make your life much easier by using divs in HTML emails. As there aren’t any tables involved, the email will be developed with ease. However, you have to take into consideration the following:

•    The spacing is difficult to be controlled

•    Some clients will not receive the desired content

•    Some CSS coding could fail

Conclusion

Coding your HTML email is a decision that not many people take. If you’re thinking to go ahead and create your template, you should first understand the challenges that you may encounter. Once, you resolve them; you will ensure that the campaign will be displayed according to your vision on all platforms.

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

Subscribe to TheChecker's Blog