Creating Nested Tables
How to Control the Elements of an HTML Table
More on HTML Tables
Today, I’m going to address how to deal with a common quirk in HTML emails: alignment issues.
One of the most frustrating aspects of web design is that no one browser behaves exactly like another – they each render certain elements in their own way, accept certain CSS styles while ignoring others, etc.
The same principle applies to email clients. Content that renders perfectly in Mac Mail might break in Outlook. Bulleted lists that look clean and neat in Outlook might become a mess in Gmail. Borders that line up in Gmail may not align properly or even display in Hotmail.
You get the idea.
Every system has its quirks, but every quirk has a workaround. Let’s examine the first one:
Quirk No. 1: Text you want to left-align is aligning anywhere but left.
In most email clients in Internet Explorers 8 and 9 (particularly Gmail and Hotmail), every data cell in a nested table will inherit whatever alignment was set in the parent cell. So if you had a TD tag with an align “center” command and then had a table inside of that, every cell in that table will get align “center.”
In this instance, the workaround is to always set your alignment at the table level. So instead of:
Read part 2 here.