A continuación se expone un ejemplo de maquetación de una newsletter.
Estructura inicial
Inicialmente se crea el elemento de tabla contenedora, compuesta por filas de una sola celda. En el elemento de tabla se define el ancho (atributo ‘width’), se eliminan espacios entre celdas (atributos ‘cellspacing’ y ‘cellpadding’) y se define en el atributo ‘style’ el color y tamaño predeterminado del texto.
<table width="600" border="0" cellspacing="0" cellpadding="0" style="color:#404040; font-size:11px;">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
[...]
</table>

Cabecera
Notar que se ha hecho uso de una fila que contenía una sola celda en los tres casos.
Área de título
Tenemos el título en una tipografía que no es de sistema. Habrá que introducirlo como imagen. Al tratarse de un elemento que no cambiará en las sucesivas entregas de la newsletter no hay inconveniente en hacerlo de ese modo.
Notar:
- Texto alternativo en la imagen.
- Dimensiones de la imagen definidas en los atributos ‘width’ y ‘height’ (veremos el hueco de la imagen cuando ésta sea bloqueada en el cliente de correo)
<tr>
<td style="border-bottom:3px solid #404040; font-family:arial,sans-serif;"><img src="ficheros/MAIL_titulo.png" width="600" height="60" alt="Newsletter" /></td>
</tr>
Fecha
<tr>
<td style="font-family:arial,sans-serif; padding:8px 0">10 de octubre de 2011</td>
</tr>
Otros datos
El texto de registro y la advertencia de que se trata de un mensaje publicitario:
<tr>
<td style="padding:0 0 8px 0;">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:arial,sans-serif;">Regístrese en <a href="#" style="color:#06c;">sitio.es</a> para recibir éste boletín</td>
<td align="right" style="font-family:arial,sans-serif; text-transform:uppercase;">Publicidad</td>
</tr>
</table>
</td>
</tr>
Se ha añadido una tabla para generar las columnas.
Añadir esa tabla extra puede hacer que el código parezca más complejo, pero permite que en otras filas se puedan meter columnas de distintos anchos.
Cuerpo
Destacado grande
En este caso se utiliza una tabla dentro de una de las filas de la estructura inicial. Dicha tabla está conformada por otras dos filas, una para el título y otra para la imagen del destacado:
<tr>
<td style="border-bottom:2px solid #404040; padding-bottom:16px;">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:arial,sans-serif; font-size:20px; padding-bottom:4px;"><strong>Titular 1</strong></td>
</tr>
<tr>
<td><a href="#"><img src="ficheros/MAIL_destacado_01.png" width="600" height="200" alt="Texto de titular 1" border="0" /></a></td>
</tr>
</table>
</td>
</tr>

Destacados medianos
En este caso se inserta una tabla con una fila de tres columnas.
En el interior de las celdas primera y tercera celda se inserta una tabla de tres filas y una columna.
La segunda celda queda como separación de las otras dos, con una imagen dentro (con dimensiones asignadas en atributos ‘width’ y ‘height’) que garantice que el espacio se mantenga.
Estructura que contiene los destacados:
Estructura de la tabla de destacado:
Código HTML:
<tr>
<td style="border-bottom:2px solid #404040; padding:16px 0 8px 0;"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="292">
<table width="292" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:arial,sans-serif; font-size:16px; padding-bottom:4px;"><strong><a href="#" style="color:#06c;">Titular 2</a></strong></td>
</tr>
<tr>
<td style="padding-bottom:8px"><a href="#"><img src="ficheros/MAIL_destacado_02.png" alt="Ver más sobre Titular 2" width="292" height="128" border="0" /></a></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam turpis odio, interdum in, viverra a, semper nec, lectus. Quisque diam libero, rhoncus a, malesuada semper, sollicitudin lobortis, nisl. Etiam ac nisl vitae nunc dignissim fermentum. </td>
</tr>
</table>
</td>
<td width="16"><img src="ficheros/MAIL_blanco.gif" width="16" height="16" /></td>
<td width="292">
<table width="292" border="0" cellspacing="0" cellpadding="0">
[...]
</table>
</td>
</tr>
</table></td>
</tr>