In this step-by-step tutorial, I'm going to show you exactly how to code an HTML email; be it an HTML Email Signature or HTML Email Newsletter.

1. Changing the background color

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>
	
	</td>
   </tr>
</table>

2. Setting a fixed width and background color for the content area

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" bgcolor="#ffffff">
		<tr>
			<td>
			
			</td>
		</tr>
		</table>
	</td>
   </tr>
</table>

3. Changing the font size, style and color of the content area

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td>
			
			</td>
		</tr>
		</table>
	</td>
   </tr>
</table>

4. Setting a different font, color and style for headings

<span style="font-size: 14px; font-weight: bold; color: #ed0000; 
font-family:Arial, Helvetica, sans-serif;">Latest News from the Web Development Blog</span>

5. Inserting a line between two blocks of text

	<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td>
				First block of text. 
			</td>
		</tr>
		<tr>
			<td style="border-top: 1px solid #66666;">
				Second block of text. 
			</td>
		</tr>
	</table>

6. Inserting and floating an image to the left

	<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td width="150" align="left" valign="top">
				<img src="http://full.path.to.the.image/image.jpg" width="120" height="100" alt="My image" />
			</td>
			<td width="450" align="left" valign="top">
				Text next to the image 
			</td>
		</tr>
		<tr>
			<td colspan="2">
				Copyright text
			</td>
		</tr>
	</table>

7. Aligning text to right (or left or center)

	<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px;" bgcolor="#ffffff">
		<tr>
			<td>
				<div>Some text goes here</div>
				<div align="right"><a href="#">Read more</a></div>
			</td>
		</tr>
	</table>

8. Changing a link color

<a href="#" style="color: #00ccff; 
text-decoration: none;">Read more</a>

9. Adding a border around the content area

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="0" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px; border: 1px solid #00ccff; border-collapse: collapse;" bgcolor="#ffffff">
		<tr>
			<td>
			
			</td>
		</tr>
		</table>
	</td>
   </tr>
</table>

10. Opening a link in a new window

<a href="http://www.google.com" target="_blank" 
style="color: #00ccff; text-decoration: none;">Go to Google</a>

Putting it altogether

<table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="#cccccc">
  <tr>
    <td>
		<table width="600" border="0" align="center" cellpadding="10" cellspacing="5" style="font-family:Arial, Helvetica, sans-serif; color: #5b656b; font-size: 12px; border: 1px solid #999999; border-collapse: collapse;" bgcolor="#ffffff">
		<tr>
			<td colspan="2" height="70" bgcolor="#000033">
				<span style="font-size: 14px; font-weight: bold; color: #ff6600; font-family:Arial, Helvetica, sans-serif;">Latest News from the Web Development Blog</span>
			</td>
		</tr>
		<tr>
			<td colspan="2" height="10" bgcolor="#ff6600"></td>
		<tr>
		<tr>
			<td width="150" align="left" valign="top">
				<img src="https://eisabainyo.net/weblog/wp-content/uploads/2010/05/sexy-web-design.jpg" width="250" height="326" alt="Sexy Web Design Book Cover" />
			</td>
			<td width="450" align="left" valign="top">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt nisl et felis sodales faucibus. In hac habitasse platea dictumst. Sed tincidunt egestas velit mollis faucibus. Aliquam feugiat, neque nec porta accumsan, odio nulla laoreet risus, ut vestibulum lacus velit eget mi. Aliquam vehicula magna sed leo lobortis et luctus magna venenatis. Nunc et massa ipsum. In tristique, elit hendrerit tincidunt consectetur, diam purus tempor ante, eget scelerisque velit est vitae lorem. Nullam vulputate blandit dui et tempor. Curabitur quam lectus, suscipit non placerat a, consectetur vel velit. </p>
				<p>Vestibulum egestas ipsum quis elit pulvinar ullamcorper. Vestibulum ac neque sed neque consequat ornare eu et justo. Phasellus pulvinar vestibulum nisl, ut tempus dolor commodo at. Morbi ultricies nisl vel massa accumsan tempor. Donec quam nibh, euismod vitae vestibulum ac, ullamcorper non eros. Integer quis sapien ac enim rhoncus auctor. Nulla facilisi. Vivamus et varius massa. Integer aliquam ultricies risus nec vulputate. Donec porta viverra magna, a suscipit arcu porta non. </p>
				<div align="right"><a href="#" style="color: #ff6600; text-decoration: none;" target="_blank">Read more</a></div>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<p>Praesent ut purus sit amet elit tincidunt laoreet a sed mauris. Integer a lacinia augue. Donec hendrerit sapien et lorem tincidunt a luctus purus vehicula. Cras magna diam, auctor sit amet pretium in, pretium a odio. Proin sed laoreet lorem. Mauris tortor diam, tempus sit amet lacinia in, egestas eu lectus. Vivamus aliquet hendrerit tellus sit amet pretium. Praesent dictum libero pretium magna pretium congue. Pellentesque consequat est a tortor tincidunt placerat in a ante. Sed non elit enim, vitae scelerisque ipsum. Integer fringilla, massa in ultrices bibendum, orci neque luctus arcu, in pulvinar elit risus eu nunc. Etiam dignissim malesuada consequat. Donec eget magna risus, eu vehicula ante. Quisque adipiscing placerat tincidunt. Aliquam ultrices vehicula velit, vel dignissim sem feugiat malesuada. Donec magna nisi, pretium at ullamcorper ultrices, sodales eu odio. Nulla facilisi. Curabitur hendrerit dictum rhoncus. Praesent bibendum dapibus ligula, ut placerat dolor vulputate vel. </p>
			</td>
		</tr>
		<tr>
			<td colspan="2" bgcolor="#cccccc">
				<span style="font-size: 10px; font-weight: bold; color: #666666; font-family:Arial, Helvetica, sans-serif;">Copyright 2010 All Rights Reserved.</span>
			</td>
		</tr>
	</table>
	</td>
   </tr>
</table>

Email Newsletter Templates

If you are looking for professional email newsletter designs, ThemeForest is the best place to buy email newsletter templates because each template package comes with a complete HTML code and layered PSD file (and sometimes multiple color variations). Our favourites are:

iNewsletter

Platnum