Let’s code email campaigns (2/6): Tables, tables everywhere
Ok! Let’s get to work.
Our email campaign is divided into sections. I want to show you how you can code/create different sections so later on you will be able to mix them however you want in your actual campaign.
Our email is a one big table with one column and many rows. Each row consists of another table… sometimes with a table inside. Nested tables keep everything stable, so you can be sure things don’t start to randomly float around in various email clients.
It’s important to note all styling should be done inline. A lot of email clients will strip anything inside <style></style> tag in the document head, so just to be on the safe side… put everything inline. Only exception would be css animations and mobile responsiveness because you can’t style media queries inline. Things you add in media queries should be ‘nice to have’ things, because if those are stripped off… you need a working desktop version as a fallback.
There are styles you need to add to every table in your template to make sure no odd spacing occurs:
border=”0" cellpadding=”0" cellspacing=”0"Here’s an example of a table used in an email campaign:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td>
<a href="#" target="_blank"><img src="https://gallery.mailchimp.com/99296cba23fe4aa7d71093a67/images/7d939f97-72ea-49b6-a123-e83f82612148.jpg" style="max-width: 100%; display: block" alt="Awesome header" title="Awesome header"></a>
</td>
</tr>
</table>Simple table with one image inside. Width of the table is set to 100% so it’s nice and fluid depending on screen size and max-width is 600px. As a general rule email campaigns around 600px are a safe bet. If you make them too big or too small, you might end up with display issues on various email clients so try to keep them around 600 pixels wide.
In our example we have an image inside the table. Always remember to add alt and title tags for your images. They will appear before images are loaded.
There are two styles I use for every image which are max-width:100% so they scale nicely and also display:block. The reason behind display:block are issues with images and <!DOCTYPE html>. Unless you make images display as block, they will have odd top/bottom margin which you can’t remove. Similar to that, Outlook will create weird spacing around images if they are not set to block.
Another important thing: whenever you have a row or column with copy you should specify the font. It’s not enough to just specify it on <body> tag or main table for the whole email. Outlook will change your font to default (Times New Roman) unless you specifically tell it to use Arial or whatever font you chose, on every block with copy.
<td style=”text-align: center; font-size:10px; color:#aeaeae; padding-top: 10px; padding-bottom: 10px; font-family:Arial, Helvetica, sans-serif;”><a href=”*|ARCHIVE|*” style=” color: black;”>Click to view in browser.</a></td>What you will see throughout the email are nested tables. They help keeping a clean structure and stable email :) You can have as many nested tables as you want (as many as it makes sense for your email campaign).
Example:
<tr>
<td>
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%” style=”font-family:Arial, Helvetica, sans-serif; font-size: 14px;”>
<tr>
<td style=”width: 20px” class=”resp-equal-space”></td>
<td><a href=”” style=”color: #ffffff; text-decoration: none;”>UNSUBSCRIBE</a></td>
<td align=”right”><a href=”” style=”color: #44c2f9; text-decoration: none;”>FORWARD TO A FRIEND</a> </td>
<td style=”width: 20px” class=”resp-equal-space”></td>
</tr>
</table>
</td>
</tr>The above example makes more sense if you look at it in the context of full email campaign, but it’s just to show how you can nest a table. You can add a table inside any <td> tag and thanks to that have <td> column divided into many more pieces.
If you end up having to span two or more columns in a row together you do it with colspan attribute. You will use rowspan for rows.
Example:
<table>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td colspan=”3”>1 big column</td></tr>
</table>