Last Updated:
Table layouts
For the majority of HTML emails, table layouts are the default way of structuring the code. A lot of emails use this approach to work around issues with Windows Outlook. However in my experience layout tables causes a lot more issues than they fix.
## Issues solved by table layouts
- Adding a width to a section in Windows Outlook.
- Adding a background to a section in Windows Outlook.
- Creating colum layouts in Windows Outlook.
## Issues caused by table layouts
- Screen readers reading out tables.
- A number of email clients apply default styles to the content inside tables, blocking inherited styles.
- Libaro / open exchange adding padding to
<th>
elements.
- Libaro / open exchange adding padding to
- Gmail munged tables
- Outlook webmail auto zooming emails.
- Tables don’t always apply border radius.
- TD elements can’t be set to
display: block
in Outlook. - Table with a width attribute will stop Samsung showing responsive emails correctly.
- Apple Mail adds 1px width for an empty cells.
- [SFR adds grey background to tags inside <th> elements](https://github.com/hteumeuleu/email-bugs/issues/33).
These issues can all be solved by using a number of additional workarounds. But as they are spread across a number of email client they can be hard to test and adding these additional workarounds can lead to extra issues.
The issues solved by table layouts are all in Windows Outlook.