HTML Email - Is colspan allowed?

Question

I was wondering if I use colspan attribute in a HTML table that I intend to have as an email, will email clients (Outlook etc...) understand what colspan does, as I have read that this might cause an issue with the layout?

Answer 1

Colspan and rowspan are both fully supported in all major email clients. They are more difficult, but if you get it right they are a great option in combination with nested tables.

The reason they have a bad reputation, besides the difficulty is because there is a particular quirk in Outlook you need to take into consideration, otherwise your layout can break.

Colspan:

Outlook has an issue where if you put a colspan in the first row of a table, it will mess up the widths of the subsequent rows. The work around for this is that you need to specify your cell widths in the top row, even if it is an empty row.

Here is an example:

<!-- the second row in this example will not respect the specified widths in Outlook  --> <table width="600" border="0" cellpadding="0" cellspacing="0">   <tr>     <td width="600" colspan="3" bgcolor="#757575">&nbsp;     </td>   </tr>   <tr>     <td width="200" bgcolor="#353535">&nbsp;     </td>     <td width="400" bgcolor="#454545">&nbsp;     </td>     <td width="200" bgcolor="#555555">&nbsp;     </td>   </tr> </table>   <!-- here is the fix - note the empty row at the top enforces the specified width in Outlook  --> <table width="600" border="0" cellpadding="0" cellspacing="0">   <tr>     <td width="200">     </td>     <td width="400">     </td>     <td width="200">     </td>   </tr>   <tr>     <td width="600" colspan="3" bgcolor="#757575">&nbsp;     </td>   </tr>   <tr>     <td width="200" bgcolor="#353535">&nbsp;     </td>     <td width="400" bgcolor="#454545">&nbsp;     </td>     <td width="200" bgcolor="#555555">&nbsp;     </td>   </tr> </table> 

---

Rowspan:

Even more avoided than colspan is rowspan. I've found it can actually display more consistently than nesting tables depending on your target audience. This is because rows (particularly a spanned one) do not separate as much as tables when forwarding the email from Outlook due to the <p class="msoNormal"> tags Outlook wraps around them. These gaps are particularly unavoidable if someone forwards your email to Gmail.

One thing to note is that rowspan doesn't seem to work with Blackberry (which I wouldn't consider a major client). So like with anything in html email, you need to play the percentages game and decide where you least want it to break.

A basic example of colspan and rowspan working together:

<table width="600" border="0" cellpadding="0" cellspacing="0">   <tr><!-- hidden row to establish widths in Outlook -->     <td width="200">     </td>     <td width="200">     </td>     <td width="200">     </td>   </tr>   <tr>     <td width="400" height="200" colspan="2" bgcolor="#333333">...     </td>     <td width="200" height="400" rowspan="2" bgcolor="#444444">...     </td>   </tr>   <tr>     <td width="200" height="400" rowspan="2" bgcolor="#555555">...     </td>     <td width="200" height="200" bgcolor="#666666">...     </td>     </tr>     <tr>     <td width="400" height="200" colspan="2" bgcolor="#777777">...     </td>   </tr> </table> 

To accomplish something similar to this without rowspan/colspan, you would have to split the rectangular table cells into small squares. Imagine if the top right cell was an image overlapping the header see this question for a real world example. If you were to avoid rowspans and split the logo image horizontally within two stacked cells, this would become problematic when Outlook does it's msoNormal thing. Nobody likes a seam in their image.

In html email, you can always split images vertically without any risk of seams/gaps, but as a rule, you should always avoid splitting an image horizontally. Rowspan helps to avoid this in scenarios when you want overlapping images.

One last note - Outlook also has the same spanning issue with rowspan as it does with colspan. You need to establish your row heights in the first column for it to respect the heights of the subsequent spanned rows. Here is an example of that. Note the first cell in each row is empty.

Answer 2

Just thought id add a bit of input to your question

Colspan can be used but i would suggest against it. Whenever i create emails (6 months experience) i have always used nested tables. Also you can only use inline css in emails so i would be very careful using even margin and padding.

Couple of things i do on every email.

Always use this code in every image on your page. It will correct a gmail space below the image bug.

style="display:block" 

Also use border="0" on any image links to stop a blue border appearing.

I hope this helps!