Depending on your level of HTML expertise, you can add a table to your campaign using the HTML block in the legacy* editor or create a table in a Code-Your-Own (CYO) campaign, but there are a few HTML conventions you should be aware of.
Due to the nuances of HTML, it’s crucial that any person copying, adjusting, or writing HTML code is formidably experienced with HTML coding. We do not offer direct support for customer-created code.
HTML code is inserted into a larger document
In the application, campaigns are actually an HTML document, complete with a heading and body framework. When using the legacy* editor’s HTML block or a CYO template, you need to make sure that you’re using nested tables and <div>
tags in the context of the larger table structure.
Nested tables
Nested tables always need to be placed between <td>
tags. Let’s imagine that you’d like to create a mailing layout that looks like this:
You would paste the code for the table between the middle <td>
tags, like so:
<table width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td>Header Image Area</td> </tr> <tr> <td>PASTE YOUR TABLE HERE</td> </tr> <tr> <td>Footer Area</td> </tr> </table>
And you’d arrive at code looking like this:
<table width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td>Header Image Area</td> </tr> <tr> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" valign="top">Picture</td> <td width="80%" valign="top">Text</td> </tr> </table> </td> </tr> <tr> <td>Text</td> </tr> </table></td> </tr> <tr> <td>Footer Area</td> </tr> </table>
This means that you will not need to use the <html>
, <body>
, <head>
, <title>
, or <meta>
tags in your code. Instead, your code will be inserted in between those tags in the document as seen here:
<html> <head> <title>Example document</title> </head> <body> <table> <tr> <td> <-- Your code is inserted here --> </td> </tr> </table> </body> </html>
If you’re pasting in code from a program like Dreamweaver or FrontPage, give it a little extra attention – make sure to remove any of the extra tags wrapped around your element.
It’s best to use simple table structures
As an example that we will continue to build on, here is a table structure for a three-row table:
<table> <tr> <td>Header</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Footer</td> </tr> </table>
The above HTML code would look like this on the page:
As you can see, it’s inside the <td>
tags that you’ll want to add your logos and copy, so let’s go ahead and add a logo and the company address in the HTML code below:
<table> <tr> <td align="center"><img src="logo.jpg"></td> </tr> <tr> <td>Content</td> </tr> <tr> <td align="center">123 Main St. Nashville, TN 37212</td> </tr> </table>
The above HTML code would look like this on the page:
Other HTML table tips
- For more advanced information on coding HTML tables, try this resource.
- Stay away from
colspan
androwspan
. Some email clients don’t know how to rendercolspan
and will break your campaign. However, a handful of HTML design programs build tables withcolspan
by default. You can usually manage your application preferences to turn this off, and we recommend doing so. - The HTML used in these examples is under-styled to show the bare essentials. When designing your campaign, you’ll want to include additional attributes that define things like the font style, width, background color, etc. inside of the
<td>
tags. Here’s an example of the format that is generally used:<td align="left" bgcolor="#ffffff" style="Font-family: Arial, sans-serif;">COPY</td>
- Link tracking relies on the integrity of your table’s structure. If you see your tables breaking and going awry when you send your test campaign, you probably need to have a good look at your table code. HTML Tidy is an easy, free program that can help you validate your HTML code, as can any code-editing software that color codes the different elements of your markup.
* In April 2022, our legacy editor was replaced with a new drag and drop editor. Accounts that existed prior to this change still have access to the legacy editor through their previously saved templates and campaigns, however new, from-scratch campaigns can only be created in the new drag and drop editor. Accounts that were created after this change only have access to the new drag and drop editor. Please refer to our new editor FAQ article for more information.