Home \ HTML Tutorials \ Controlling the Width and Height of a Cell by Inserting a Transparent GIF

Controlling the Width and Height of a Cell by Inserting a Transparent GIF

While drawing a table, a Web browser will expand the size of the cells (and the table overall) as necessary to accommodate their contents. Suppose, for example, that you create a cell with a <td> tag that has no width or height attribute. If you place a 150×100–pixel graphics image in the cell, the Web browser will automatically draw the cell with a width of 150 pixels and a height of 100 pixels so the picture will fit into it. Similarly, if you insert the same 150×100–pixel image into a cell defined with a 50-pixel width and height, for example, the Web browser will expand the cell from its defined 50×50–pixel dimensions to accommodate the graphics image.

You can take advantage of the browser’s cell-resizing behavior by placing a one-pixel transparent GIF (graphics image) in a cell and telling the Web browser to stretch the picture to a desired height and/or width. The Web browser, in turn, will stretch the graphics image and expand the dimensions of the cell to the size of the stretched GIF. Expanding the cell to the dimensions of the transparent image in the cell will cause the browser to insert a precise amount of blank space between cells to the left and right of the cell with the GIF and/or between those cells directly above and/or below it.

A transparent GIF is an “invisible” graphics image you can use either with or without a table to affect the positions of objects on a Web page. The site visitor will not see the transparent GIF on the computer screen, because the Web browser displays the GIF as if it were a pane of clear glass lying on the cell (or Web page) background. Although the visitor can “see right through” the transparent GIF, the graphics image still takes up space in the cell. As a result, the Web browser will make the cell large enough to hold it.

Suppose, for example, that you create a Web page with a 100-pixel-wide menu down the left side of the page, and you want to separate the menu from the remaining content (to its right) with 20 pixels of blank space.

You can use the following code to create a three-column table in which a 20-pixel-wide blank cell (with the stretched, transparent GIF) separates the content in the left cell from the content in the right cell:

<tr><td valign="top" width="100">Menu Items</td>

Web Page Content Goes Here</td></tr>

</table>

In the current example, the <img> tag that follows the second <td> tag (in the third line) tells the Web browser to place the transparent GIF stored in the file spacing.gif into the second cell in the table. The width attribute in the <img> tag tells the Web browser to “stretch” the 1×1–pixel image such that it appears 20 pixels wide in the cell.

The reason you would use a transparent GIF—instead of setting the width attribute in the cell’s <td> tag to the number of pixels of blank space you want and then leaving the cell blank—is because Web browsers handle empty table cells differently. For example, although Internet Explorer shows the cell background color in blank cells, Netscape Navigator does not—showing the table or Web page background color instead. Moreover, some browsers ignore the height and/or width attribute settings in the <td> tag for empty cells and draw the cells such that they are only as tall as the tallest nonempty cell in the row and as wide as the widest nonempty cell in the column. Finally, neither Netscape Navigator nor Internet Explorer will draw the left and top borders on a cell that has no content— even if the table’s border attribute has a value of one or more. However, if you put a one-pixel GIF, stretched to the dimensions you want, into a table cell, all Web browsers will render the “blank” cell in the same way—with the dimensions of the GIF, the cell’s specified background color, and borders (if any)—because although the cell appears blank, it is not empty.