Using a transparent single-pixel GIF as cell content in HTML tables

If you dont't actually want to have any textual content in a table cells but still want to make the cell non-empty to avoid certain browser peculiarities, the usual workaround is to use a no-break space. But if the cell is for formatting (layout) purposes and should be just a few pixels high, or just a few pixels wide, problems will arise. The no-break space is a character and has therefore some width and height, which depend on the font size in use. Attempts to hack the dimensions small enough by using font level markup or CSS to make the font size as small as possible have turned out to be a bit clumsy and not very effective.

The workaround is to use a single-pixel GIF of the desired color, or a transparent single-pixel GIF. Then there's no character inside the cell, just a 1 pixel image. Thus, if cellpadding for the table is set to zero, you can make the cell down to one pixel wide and one pixel high.

Example:

  <td width="9" height="6" bgcolor="#FFCC33"><img src="transp.gif"
  alt="" width="1" height="1"></td>

You could copy transp.gif for example from ../images/transp.gif

Note that due to some browser bugs in HTML parsing and other oddities, there should be nothing (not even a line break) between the <td ...> tag and the <img ...> tag, or the <img ...> tag and the </td> tag. There can be line breaks inside the <img ...> tag though, as in the example above.


Date of last update: 2000-09-04

This document is a footnote to the discussion of some problems caused by empty cells in the document HTML Tables: a brief intro, and links to tutorials and references.

Jukka Korpela, jkorpela@malibutelecom.com