HTML Styling in Emails

One of the things I had to do today was modify an existing HTML template that is used to render an email. The changes were fairly straightforward but being HTML in emails it ended up being a bit more complex. First I tried to have a heading and a value where the heading div floats left and the value sits rights next to it as specified in this question. Unfortunately this does not work when being rendered in mails on the Outlook desktop app.

I ended up using a table with no borders to get around the issue with float. I then noticed that classes applied to tds were not being used. So I put a span inside the td and attached the class to the span. I then put the text I wanted styled inside the span. Another thing that definitely does not work is the :first-child CSS selector instead you need to resort to adding classes onto the elements that are the first children, not ideal but it is what it is.

I have heard before that you should treat HTML for mails as if you are working on a webpage for a 1995 browser. Based on my experiences today this idea was definitely reinforced.