One of the common confusions among email marketers is whether to use Div or Table tags for designing email templates. There are a lot of myths and misconceptions around email design as there is no standardization for coding them. All email clients use different rendering engines while the operating system and screen sizes also have major impacts on how your emails look.
HTML email templates are designed using the same elements as web pages, but the approach varies drastically. This could be another reason for having these myths, along with the permutations and combinations of mailbox providers, OS, device types, and screen sizes. The <div> and <table> tags are used to tackle these problems, and today I will debunk the myths regarding them once and for all.
Before we move ahead, let us first understand about Div and Table tags in brief:
<table> Tags In Email Design
Table tags are the ’90s era coding method that allows you to arrange your email content into rows and columns format. It allows you to organize your email in a very neat manner as you can add padding, headers, and background colors in a structured manner using <tr> (table row) and <td> (table data cell) elements with the help of attributes. Many businesses also use ghost tables, only rendered on Microsoft Outlook.
<div> Tags In Email Design
Div tags are relatively modern container units that help reduce the email development time. They divide the entire template into sections which can be used along with CSS styling to apply attributes to all sections at once. You just need to use the <div> tag at the beginning of the block, input preferences and conclude the block with a </div> tag and you are all set. Most mailbox providers don’t support this as opposed to web browsers.
Now that you have a background of how they impact the designing process, let us have a look at the myths revolving around them:
Myth 1: Table Tags Are Outdated
As much as they irk you, table tags are still very much relevant to email marketing even in 2020. In fact, they are even more preferable for serving mobile optimization purposes as table tag gives you complete control over padding. They ensure that your content blocks and images do not interfere with each other so that mobile devices can access them properly. Email clients aren’t proactive when it comes to supporting modern HTML. The extra time is worth it as mobile optimization is a necessity in today’s time. Remember that almost 60% of the opens come from mobile devices. It is also the safest way of ensuring renderability, making them nowhere outdated as of now.
Myth 2: Div Tags Offer Better Renderability Than Table Tags
Div tags may render better on web pages, but it is quite the opposite for emails. Especially MS Outlook doesn’t support much CSS styling as float and position properties aren’t supported. Also, padding is supported in the table tag, unlike the div tag. The MS Word engine is pretty much full of bugs and if you can expect to overlook div tags only if you aren’t looking forward to targeting Outlook-based subscribers. In case you choose to ignore Outlook considerations and send them messages, there is absolutely no guarantee how well your HTML emails render. Below is the market share of different email clients:
Myth 3: Div Tags Allow Building Better Looking Email Newsletters Than Table Tags
This myth is quite the opposite of reality. Email newsletters can get tricky as many email clients strip off the <style> tags by default. Div tags also make it difficult to render your message neatly in case the images are not loaded on time. On the other hand, you can expect clean designs for your newsletters when using table tags. Thus, it helps using Table tags when you are unsure about the bandwidth availability at the reader end. Imagine this email with loading troubles:
Myth 4: You Have No Other Option Except Table Tags For Seamless Rendering
This myth is not completely true or false, either. If you are firm at slashing off the table tags and the long hours that come along with it, you can still use div tags without harming your deliverability much. The trick is to use them in single-column templates, and you will be able to get much lighter and semantic emails. You might have to use a lot of <br> tags for maintaining the required spacing, but you can still manage without using any table tag at all. Your email developers might have to work on understanding how to maintain proper rendering on Outlook, but it will surely pay off in the turnaround time as well as mobile optimization.
Over To You
These myths are almost as old as the commercialized use of emails for bulk messaging, and I would like to add that sticking with table tags is safer as of now. The CSS styling will require a lot of adaptations and up-gradation to manage the rendering complexities. With no standard being in place for emails, the road to using div tags and other modern elements is still far away. I hope this article debunked the myths regarding the use of div and table tags, and you will have a better idea of the same while coding your next email.
Author Bio
Kevin George is the head of marketing at Email Uplers, which specializes in crafting Professional Email Templates, PSD to Email conversion, and Mailchimp Templates. Kevin loves gadgets, bikes & jazz, and he breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on email marketing blogs.
