How to code two-column HTML email
There are three basic email designs: one-column, two-column and multi-column product email. Two-column email is a design used to send out email newsletters and it is pretty similar with two-column web page which means that it typically uses a narrow, side column to showcase features and links to more information and a wider column that contains the body content of the email. In order to streamline your work you must reduce the design into a series of boxes that you can than convert into HTML tables. The first box, the larger box is virtually the color that wraps everything. The second box wraps the entire HTML email but there are also additional boxes for the header, for the content area and for the footer. Within the content area you will probably have a column that has the same height as all the rows on the right and this is an aspect that you need to keep in mind. The footer area is virtually a box split in different spaces.
However, the pseudo body table acts as a HTML body tag and corresponds to the main box that wraps all the other elements and it should be created as it follows:
<!-- pseudo body table -->
<table border=”0” cellpadding=”0” cellspacing=”0” bgcolor=”” width=”99%”>
<tbody>
<tr>
<td align=”center”>
<!-- wrapper table for the email -->
<table border=”0” cellpadding=”0” cellspacing=”0” bgcolor=”” width=”545” style=””>
<-- close wrapper table for email -->
</td>
</tr>
</tbody>
</table>
<!-- close pseudo body table -->
In addition, you may have a wrapper table for the email which corresponds to the box that contains the header, the content area and the footer of the email. Within this wrapper table you can have a third table nestled inside that contains all the elements of the email starting with the header, the content area and the footer table.
Within the email content area you typically have a single left column that has the same height as all the rows on the right and thus, within the HTML tables a row span is used to span several different rows.