cancel
Showing results for 
Search instead for 
Did you mean: 

Custom Code: Create an Email Framework Using Tables

CTCT Employee
green-circuit-board.jpg Creating an framework with Tables binary-beams-abstract64x64.png

 

Tables are the basic structure of any email. The main table creates the frame for the content and helps tell email clients where the text and images belong using alignment. Imagine a spreadsheet with columns and rows except it's just that you are coding the frame and adding the content.

Tables have several tags that help define them. Table Row <tr> tags define a section across the table. Table Data <td> tags are like the cells (columns) in a spreadsheet and go across the table row.  There can be any number of sections in a row and any number of rows in the table. 

 

Keep in mind, each tag must have a tag that is closed using a forward slash before the type of tag. The tags must also be closed in the same order that they were first added.

Here is an example for the closing tags in a simple table:

 

<table> 
<tr> 
<td>
Your content is added here </td>
</tr>
</table>

 

The forward slash in the closing tags on the right side of the content tells the email client that the content for that section has ended.

 

Here is an example of a table with three columns and two rows. You can see how the tags are nested starting with the <table> tag, then the <tr> table row tag, and then the <td> table data tag.

 

<table align="center" style="font-family: 'Times New Roman', Times, serif; font-size: 10pt; width: 300px; border-collapse: collapse; 
	background-color:#525B2E; border: 2px solid #000000;">
     <tr>
          <td style="text-align: center; width: 33%; color: #FFFFFF; font-family: 'Times New Roman', Times, serif; font-size: 10pt">
          1</td>
          <td style="text-align: center; width: 33%; color: #FFFFFF; font-family: 'Times New Roman', Times, serif; font-size: 10pt">
          2</td>
          <td style="text-align: center; width: 33%; color: #FFFFFF; font-family: 'Times New Roman', Times, serif; font-size: 10pt">
          3</td>
     </tr>
     <tr>
          <td style="text-align: center; width: 33%; color: #FFFFFF; font-family: 'Times New Roman', Times, serif; font-size: 10pt">
          4</td>
          <td style="text-align: center; width: 33%; color: #FFFFFF; font-family: 'Times New Roman', Times, serif; font-size: 10pt">
          5</td>
          <td style="text-align: center; width: 33%; color: #FFFFFF; font-family: 'Times New Roman', Times, serif; font-size: 10pt">
          6</td>
     </tr>
</table>

The result of the above code is shown below. Each cell has inline styles for the font-family (Times New Roman), the font-size (10pt), and the color of the text will be white (#ffffff).

TableResults.png


If you are new to Constant Contact and have yet to create an email, take a look at our KnowledgeBase article on how to access the Advanced Editor.

 

This article goes in depth about working with HTML and XHTML:

 

Guidelines for Designing Custom HTML Email Campaigns
http://knowledgebase.constantcontact.com/articles/KnowledgeBase/5699


The fine folks at W3Schools have a tutorial that can help learn more about the basics of creating tables.

W3Schools Working With Tables


In addition, a quick search for "free sites to learn HTML for creating emails" will also yield a plethora of places that will help you learn to code for emails. 


*Please note, any links we provide from non-Constant Contact sites or information about non-Constant Contact products or services are provided as a courtesy and should not be construed as an endorsement by Constant Contact.

Sue_Mc

Hello, my name is Sue and I have been with Constant Contact since June of 2009. For the last 7+ years my time has been spent in Tier 2 assisting customers and support via chat, email, and phones. Outside of work I enjoy learning code, reading, I am an avid crocheter, I love video games, and spending quality time with my 21 year old cat. I am new to writing for the Community, and have high hopes that we will have great discussions about technical issues.