Images, Tables, and Mysterious Gaps

When designing a template for a newsletter I stumbled upon a problem which was easy to solve but took a while to discover. My design was based on the classic “convoluted tables and lots of images” paradigm. Back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained. Fast forward to 2001, and the rise of standards-based browsers that lay out pages using HTML and CSS instead of their own private layout algorithms. Thanks to an obscure corner of the CSS specification, every design based on a precise layout of small images in table cells have become visual disasters just waiting to happen. All it takes is a modern browser and the right DOCTYPE. Using the following HTML we create a table with a single cell. The cell contains a green image. Now let’s see what that same simple table looks like in a modern browser when the page has a strict DOCTYPE.

<table border="1" cellspacing="0" cellpadding="0">
<td><img style="width: 50px; height: 50px;" src="/images/test.jpg" alt="" /></td>

Renders in Firefox as:


Notice the added space beneath the image. The markup of both table and cell remains unchanged– it’s the rendering mode that’s different. Instead of “shrinkwrapping” the image itself, the browser is now wrapping around the line in which the image sits. The image is sitting in a line because images are, by default, inline content.

The fix of my choice, and one that will work for most graphically-intense designs, is to convert the image from being an inline element to a block-level element. Do that, and it no longer generates a line box, and so the problem goes away– assuming that the image is the only thing that occupies that table cell. In the simplest case, we might add a style like this:

td img {display: block;}

This approach doesn’t always work. You can read about other solutions in this article.

One thought on “Images, Tables, and Mysterious Gaps

Leave a Reply