Real Magnet

Building your nest: trading in rowspans for nested tables

We at the design team here at Real Magnet have spent a good deal of time tweaking html code to look just right in as many email clients as possible. By far, the one that gives us the most headaches is Outlook 2007. Just when you think you’ve got your code just right, there might be a space or misalignment in your design that, no doubt, was not accounted for in your html. We do get a fair number of calls from clients with similar problems. The good news is that many times, the culprit causing the major misalignments and unexpected gaps in your design is rowspans.

As we’ve progressed in the web design world from table to CSS-driven layouts, the email world has lagged behind and still requires that all layouts use tables to render properly across most email clients. A basic table layout for email is simple: header, content and footer. But what happens when you want to span an image across multiple table rows, or you’ve sliced up a design in Photoshop with complex images that need to fit together seamlessly? The standard solution: use a rowspan as we’ve all done in Word, PowerPoint or Excel as seen below:

row1
row2
<table cellpadding=”0″ cellspacing=”0″ width=”300″>
<tr><td rowspan=”2″ width=”250″><img src=”http://bit.ly/caiPHW” width=”250″/></td>
<td>row1</td></tr>
<tr><td>row2</td></tr>
</table>

Most of the time, depending on your layout, Outlook 2007 will ignore the rowpan causing unexpected spaces in your layout, here’s how we get around that: nested tables. Set up your table as you normally would, but instead of the rowspan, put a table into the cell where you’d like the two rows to be, as seen here:

<table cellpadding=”0″ cellspacing=”0″ width=”300″>
<tr><td width=”250″><img src=”http://bit.ly/caiPHW”/></td>
<td><table cellpadding=”0″ cellspacing=”0″>
<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
</table></td></tr>
</table>

This can get pretty tricky as your designs become more complex, but don’t worry – it becomes second nature quickly! I would recommend thinking through your whole design first, where you’ll need to span more rows and use the nested tables. Draw out your tables; this will save time in the end when you are trying to sift through tons of <td>s and <tr>s trying to find the exact spot where you’d like to add your extra tables. This probably isn’t the solution to all of your Outlook 2007 woes, but is certainly a good place to start!