A Quick CSS Tip Regarding Legacy Image Tables

Dealing with legacy image tables and modern web standards.

Illustation: The problem with legacy img tables and modern web standards

If you’re dealing with the front-end side of the Web, every so often you may stumble over this issue with legacy image tables, like image slices: transitioning to modern web standards causes some nasty vertical extra white space to appear.

Now you may attempt to fix this issue by delving deep into the very definition of modern web layout, like redefining the various elements of a table to modern grid-layout. However, there is much more simple solution to this problem.

Just set the CSS “display” property of the images to “block” and you’re done.

/* get rid of cell spacing */
table { border-collapse: collapse; }

/* img fix */
table img { display: block; }

E.g., given the following table:

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><img src="slice-1-1.jpg"></td>
        <td><img src="slice-1-2.jpg"></td>
        <td><img src="slice-1-3.jpg"></td>
    </tr>
    <tr>
        <td><img src="slice-2-1.jpg"></td>
        <td><img src="slice-2-2.jpg"></td>
        <td><img src="slice-2-3.jpg"></td>
    </tr>
    <tr>
        <td><img src="slice-3-1.jpg"></td>
        <td><img src="slice-3-2.jpg"></td>
        <td><img src="slice-3-3.jpg"></td>
    </tr>
</table>

When switching the doc-type declaration to HTML5 (as in “<!DOCTYPE html>”), below each of the images some nasty vertical extra white space raises its ugly head. Here, we use a white background for the table and a dark border for the table cells in order to show the extra white space (which is really a matter of how image layout is defined in HTML5):

img slice img slice img slice
img slice img slice img slice
img slice img slice img slice

However, applying our simple fix — as in “table img { display: block; }” —, everything is back to normal again and the image slices touch as expected:

img slice img slice img slice
img slice img slice img slice
img slice img slice img slice

That’s it.