The 1x1 Pixel Image Table Trick

Well, there is still one thing about tables that can be quite annoying at times. The problem is that tables align their width and height according to the longest object that is in a row or column, rather than allowing you to choose the width and height of your table cells. The result is that on occasion you will create a table, and when you view it on the screen you see one tiny column that is smashed together, while another column is taking up more room than it really needs. Here is an example of this:

As you can see, the left column takes up too much space, and the right column won't take up enough space. A suggested method for solving the problem has been to use the 1x1 pixel image trick. To do this, you would create a 1x1 image that is transparent or the same color as your background. You would then use it to force the table cells to be the same length, like this:

I want two columns the same size.

Well, O.K.

The code that made the table is below. As you can see, spacer.jpg is our 1x1 image. We resized the image in the html code to 290 pixels in width in each cell, giving us the nice even table.

<TABLE width="600" border="2">
<TD align="left">
I want two columns the same size.
<BR>
<IMG SRC="spacer.jpg" width="290" height="1">
</TD>
<TD align="left">
Well, O.K.
<BR>
<IMG SRC="spacer.jpg" width="290" height="1">
</TD>
</TABLE>

I've been told that some people don't like this trick and call it bad design. From what I've seen, it depends on who you expect to have viewing your site. If people come through with images turned off in their browser, the trick is exposed....My best suggestion is to use the trick only if you can't get the spacing and visual appeal some other way. Try your cellspacing and cellpadding commands, your alignment commands, and such things first. Also, there is another way to adjust the width of columns, if you don't mind having a horizontal line in your table. You do this by adding an hr tag, and adjusting the width of the horizontal rule, like this:

<TABLE width="600" border="2">
<TD align="left">
I want two columns the same size.
<HR width="290">
</TD>
<TD align="left">
Well, O.K.
<HR width="290">
</TD>
</TABLE>

Of course, you will now have lines under the text in the table.......

Well, let's go on to the next section: Using Nested Tables for the Table Problem.