Code Like a Boss: HTML Tables for Email

Code Like a Boss: HTML Tables for Email

code-like-a-bossHello, marketing gurus/code masters! If you’re following this series, you know that last time we discussed the framework of an HTML email. If you’re just joining us and need to catch up, no problem. You can review my high-level intro to front-end languages here and learn how to set up your HTML email foundation here.

Now that we have our foundation in place, it’s time to start adding content. As I mentioned in the last post, all of our content is going in the body, which begins with an opening body tag (<body>) and is placed right after the closing head tag (</head>).

There are several ways to go about building an email, but the most established approach is with tables. In HTML, there is a table tag (<table></table>) that creates a table container. Within every table, there is at least one table row (<tr></tr>) and one table data, like a table cell (<td></td>). You can’t have a table without these three components. There are other table-related tags (header, footer and body), but these are less common in email development. So, let’s dig right into the code, shall we? Here’s what a basic HTML table looks like. (I’ve included the opening and closing body tags for point of reference).

<body> 
<table> 	
<tr> 	     
<td></td> 	
</tr> 
</table> 
</body>

Notice how the elements are nested. We have a table that contains one table row, and that table row contains one table cell. Each element begins with an opening tag and has a closing tag to match. Make sense? Cool.

Before we move on, let’s talk about attributes. In HTML, attributes are properties you can set on a particular element that help with appearance, positioning or functionality. Many attributes are common across multiple elements, but some are unique to a specific element. For example, “width” is an attribute that you can set on an image or table, but not on links. Tables have their own attributes, including, but not limited to:

  • Align: specifies the alignment of a table according to the surrounding text (options: left, right or center)
  • Cellspacing: space between cells (number of pixels)
  • Cellpadding: space between the cell wall and cell content (number of pixels)
  • Border: specifies if table has a border or not (options: 1 or 0)
  • Width: width of the table (number of pixels)

For a full list see: http://www.w3schools.com/tags/tag_table.asp.

Let’s give our table some attributes to help further define it. We’ll set cellspacing and cellpadding to zero to eliminate any unwanted spacing in our layout. During the building process, I like to add borders to my tables so I can see the layout. When I’m done, I set all borders back to zero to remove them. Let’s also set the width of the table to 640 pixels (standard email width) and center it using the align attribute. Lastly, we’ll place some filler text inside our table cell, so you can see it better.

Attributes always go in the element’s opening tag. Begin with the name of the attribute, followed by “=” and then quotes. The value or option you want to set goes inside the quotes. Here’s what our table looks like with our attributes set:

<body> 
<table cellspacing=”0” cellpadding=”0” width=”640” align=”center” border=”1”>     
<tr> 	
<td>Hi! I’m a table with one cell.</td>     
</tr> 
</table> 
</body>

And here’s what that table looks like in a browser or email client: table-basic

Congratulations! It’s a beautiful table. This is typically where emails begin—with one centered table at the desired width. I like to call this my main container or wrapper. We can build the rest of our tables inside this wrapper so our content remains centered and at the desired width.

Let’s say we want to create a header with a space for a logo at the left and another space for an image on the right. Inside our wrapper, we’ll want to add another table. This time, the table will have two table cells: one for the logo, and one for the image.

<body> 
<table cellpadding="0" cellspacing="0" width="640" align="center" border="1">     
<tr>         
<td>             
<table cellpadding="0" cellspacing="0" width="640" align="left" border="1">                 
<tr>                     
<td>Logo goes here.<td>                     
<td>Image goes here.</td>                 
</tr>             
</table>         
</td>     
</tr> 
</table> 
</body>

And here’s what it looks like:

header1

Alternatively, instead of one table with two table cells, we can use two tables, each with one table cell. Then we can leverage the align and width attributes to place the tables next to each other.

<body> 
<table cellpadding="0" cellspacing="0" width="640" align="center" border="1">     
<tr>         
<td>             
<table cellpadding="0" cellspacing="0" width="318" align="left" border="1">                
 <tr>                     
<td>Logo goes here.</td>                 
</tr>             
</table>             
<table cellpadding="0" cellspacing="0" width="318" align="left" border="1">                 
<tr>                     
<td>Image goes here.</td>                 
</tr>             
</table>         
</td>     
</tr> 
</table> 
</body>

In this case, we gave each inner table a width of 318 pixels (640 divided by 2, minus the 1-pixel border on each side) and set the align attribute to left. Using align=”left” ensures that our tables display side-by-side, assuming the total width of the inner tables is less than the container table. Without this, the tables stack on top of each other. As you can see, the result is the same: header2

Note: Using this method is great for responsive emails that require elements to stack for mobile, but that’s a lesson for another day. If you wanted to add content below, you can either add a new table row like so:

<body> 
<table cellpadding="0" cellspacing="0" width="640" align="center" border="1">     
<tr>         
<td>             
<table cellpadding="0" cellspacing="0" width="318" align="left" border="1">                 
<tr>                     
<td>This is where the logo goes.</td>                 
</tr>            
</table>             
<table cellpadding="0" cellspacing="0" width="318" align="left" border="1">                 
<tr>                     
<td>This is where the image goes.</td>                 
</tr>             
</table>         
</td>     
</tr>     
<tr>         
<td>Here is some more content in a new table row.</td>     
</tr> 
</table> 
</body>

new-content-tablerow

Or start another table:

<body> 
<table cellpadding="0" cellspacing="0" width="640" align="center" border="1">     
<tr>         
<td>            
<table cellpadding="0" cellspacing="0" width="318" align="left" border="1">                 
<tr>                     
<td>This is where the logo goes.</td>                 
</tr>             
</table>             
<table cellpadding="0" cellspacing="0" width="318" align="left" border="1">                 
<tr>                    
<td>This is where the image goes.</td>                 
</tr>             
</table>             
<table cellpadding="0" cellspacing="0" width="640" align="left" border="1">                 
<tr>                     
<td>Here is some more content in a new full-width table.</td>                 
</tr>             
</table>         
</td>     
</tr> 
</table> 
</body>

new-content-table

Get the idea? Basically, most email layouts are just combinations of nested tables with various numbers of rows and table cells. Yes, it can get hairy at times, especially with all the nested elements, but the more you read and edit code, the more it’ll start to make sense. I promise.

That completes today’s lesson. Nice work, so far! Keep playing around with these table tags and attributes and see what types of layouts you can create. If you get stuck, here are some handy resources that can help you out:

Don’t hesitate to reach out to me directly via the comments below. I’m happy to answer questions or help troubleshoot. Happy coding!

By | 2017-10-25T03:59:33+00:00 November 24th, 2015|Let's Get Geeky (Development)|0 Comments

About the Author:

Kate started as a Front End Developer at Relationship One after completing a certificate in web and interactive media at a technical college. During her first two years, Kate honed her skills as an email developer, taking on Gmail, Outlook and all things responsive. More recently, Kate has shifted her focus to app development, building complex web applications that integrate with Oracle Marketing Cloud and crafting rich user experiences. Besides nerding out at her job every day, Kate enjoys yoga, food blogs, and crossing things off to-do lists.


Thank you for subscribing!
Subscribe to our Thought Leadership Today

Leave A Comment