How to code single column html newsletter

Here I will show you how to code your first html newsletter using rules explained in a previous post.

I will create a single column newsletter, which consists of the header, the main body and the footer, and which is used very often by most clients as an easy and effective way of sending professional newsletters.

You can see the final result below.




First of all, I use tables instead of divs for the layout of the newsletter.

I use an external table aligned at the center like this:


As you can see above, I use fixed width for the template 600px, by declaring width, cellpadding, and cellspacing for the table.

Now, I will include the whole code between


I start with the header, which I put in a seperate table like this


Til now, code looks like this:



To continue, I add another row to my external table, in which I put an internal table for the main body like this.



As you can see I have a nested table with cellpadding=20. Of course you can play with this number according to your needs.

Inside the cell of the nested table I have all the content of my newsletter. I use inline css styles to have control of the color, font and margins of the heading tags. I should do the same for the p tags, now they will take the default values of my email program. So, it is recommended to use inline styles for all the text and links in every table cell.

Til now code looks like this:


In the last step I add one more row to my table for the footer:


And here is the whole code of the newsletter. Of course, for header and footer you place your own images.





Ready to send
And now it's time to send the html newsletter! How to do this? It depends on the email program you use.


Outlook Express

• File -> New -> Mail Message
• Click on the body of the mail and click Insert -> Text from file,  choose files of type html and find your file on your computer

Microsoft Office Outlook 2007

• File -> New -> Mail Message
• Click on the body of the mail and click Insert -> Attach file,  find the html file on your computer and choose "Insert as text"

Mozilla Thunderbird

• File -> New -> Message
• Click on the body of the mail and click Insert -> HTML and paste your html code into the textarea. *** In order to copy the html code, right click on your file and open it with notepad.