Using Empty Table Cells in HTML Emails

Designers often use empty cells in tables to create “pixel perfect” emails, but this method might not be as reliable as you had thought. We performed a number of tests to investigate empty table cells. Our first test checked to see if row and column cells that had color but no content would show up. Check out a sample of the code for our column test below.

                            

                                One
 <table style="background:red">
   <tr><td>test</td></tr>
   <tr><td style="background:black"></td></tr>
   <tr><td>test</td></tr>
 </table>

 Two
 <table style="background:red"  cellpadding="0" cellspacing="0">
   <tr><td>test</td></tr>
   <tr><td style="background:black"></td></tr>
   <tr><td>test</td></tr>
 </table>
                            
                        

All clients that we tested rendered empty cells with at least a few pixels in width (or height) even if they had no content. If you use the cellpadding=”0″ and cellspacing=”0″ attributes (“Two” in the example above), however, things get a bit more sticky. Most clients won’t show an empty column cell with no cell padding or spacing, but nearly a quarter of the clients we tested did. Take a look at the chart at the bottom to see which ones. Support for empty row cells (with no cell padding or spacing) was also not universal, with about 10% showing them and 90% of clients not showing them.

Most email clients displayed the first two tests as in the image on the left (Example 1). Notice that in test 1, the empty cell with black background is displayed as a thin line with red on either side of it. This is caused by padding, which gets the color of the table itself. With margins and padding removed, however, no cell is visible at all! This doesn’t hold true for all clients. For instance, check out Live Mail’s rendering of the same test, on the right (Example 2).

Again, the answer to this one is, “Not always.” Most clients do give borders to empty cells, but some of them do not. In the test below we added the border: 1px solid black property to all td’s in the table. The top-center, middle-center and bottom-left cells are empty of content, and the middle-center cell has a black background color. You can check out the table at the end of this blog post to see exactly which clients show borders on empty cells and which don’t.

Regardless of margin or padding settings, these attributes seem to work in all email clients. A mobile client might resize your table cells if they don’t fit within its screen. Check out our blog on table sizing and iOS6 here, for an example.

A non-breaking space ( ) is a common filler for otherwise empty cells. This creates a space character which is transparent. For many purposes, this is a good solution. However, when very small cells are used for layout purposes, the non-breaking space will be too big.

Another commonly used filler is <br />, a line-break. This filler doesn’t create a character, but email clients will render the cell with the same height as a regular line of text. Other than Outlook 2003, all email clients should show a table cell with <br /> in it.

A third option is to use an empty div, <div></div>, inside the table cell. An empty div will be displayed on most browsers just like an empty cell would be. This makes the empty div not much of 

We recommend not using empty table cells. Because of the discrepancies among browsers when it comes to displaying the cells, we recommend the use of cell height and/or width values, or colspan, rowspan and padding instead of empty cells. As long as you’re not using borders, this should help you achieve identical layouts in all browsers.

The first results column below shows whether or not an empty cell with a different background color is visible with margins and padding set to zero. The second column is the same test, but for an empty cell in a row. The third column shows whether or not that client applies a border to empty cells. The last column shows which email clients display a table cell with an empty <div></div> inside it. Results for some clients were inconclusive, showed by a “?” symbol.