This article is for those who are HTML-savvy and would like to use HTML code to create a table in a campaign.

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.

Ⓘ	Emma does not offer support for customer-created code, so it's crucial that any person using HTML code is formidably experienced. We do have a talented Design Team that can handle creating the custom HTML coding for you for an additional fee.

HTML code is inserted into a larger document

In the Emma 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 and rowspan. Some email clients don't know how to render colspan and will break your campaign. However, a handful of HTML design programs build tables with colspan 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, Emma's 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.