Create tables for multi-column email design
Typically, a multi-column product email design is used to advertise different products. It is a complex design but it can be easily created by using HTML tables to divide up the space into rows and columns and call out the design elements, such as the logo, the header, the content area, the side column and the footer. You have to see this design as a series of boxes and blocks and then you add a grid. You typically have a larger email which is the background color, the main box and within it you have a box for the email itself that contains all the other elements. Besides, you also have a box for the header, the navigation links, the special message area and for the products themselves as a table. At the bottom, you have a box for the footer.
When you look at the code design of this design, you virtually have a pseudo code table which acts as the HTML body tag. Within it you place the wrapper table that will contain the HTML email.
<!-- pseudo body table -->
<table border=”0” cellspacing=”0” cellpadding=”0” bgcolor=#ffffff width=”99%”>
<tbody>
<tr>
<td align=”center”>
<!-- wrapper table for email >
<table border=”0” cellspacing=”0” cellpadding=”0” bgcolor=#fffff width=”550”>
<!-- close wrapper email for table -->
</td>
</tr>
</tbody>
</table>
<!-- close pseudo body table -->
The pseudo body table corresponds to the background around the HTML design and the wrapper table corresponds to the large table that contains the HTML itself. Within the table that contains the email you have a header and the navigation row. The process of creating the tables for the products is straightforward given that at the planning stage you measure your design as well as each of your products' cells. The last line in your table is for the footer and it is quite simple to create given that you usually have a single data table cell with an image. The next logical step after creating the design is to add content.