tables and buttons

how NN and IE handle tables and images

page 1 of 1

page 1
• table cell height
• using a spacing gif
• using td height

table cell height

Here is a button I created. There is a thick border around the image to help define it.

Designers like to use graphical buttons for navigation. Each button is almost like the next, except for the text on the button. This means that for ten items, ten separate buttons must be downloaded. The difference in each button is minor, and yet ten different images must be used and thus ten different downloads must be occur. Let's see if we can find a way to use one button image over and over again for each navigation element. We'll use HTML to generate the text for each navigation button.

Here's the code for using multiple tables, each with a background image of the button above. This way, one button image can be used multiple times with only one download of the image. The cell text is used to make different buttons out of this one image. Note that I've set the HEIGHT attibute to 30 pixels high, the height of the image. Note also the table WIDTH is set to 150 wide, which is the width of the button image.

<table border=0
 background="./gifone/button.gif"
 width=150 align=center cellspacing=0 cellpadding=0>

<tr height=30>
<td align=center valign=middle>
 <font size=-2>hi</font></td>
</tr>
</table>

<table border=0 
  background="./gifone/button.gif" 
  width=150 align=center cellspacing=0 
 cellpadding=0>
	
<tr height=30>
<td align=center
 valign=middle>
 <font size=-2>hi</font></td>
</tr>
</table>

<table border=0 
 background="./gifone/button.gif" 
 width=150 align=center cellspacing=0
  cellpadding=0>
	
<tr height=30>
<td align=center valign=middle>
 <font size=-2>hi</font></td>
</tr>
</table>

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

The differences are obvious. NN4.7 does not use the HEIGHT attribute of the row. It sizes the cells to the minimum height of the cell data.

using a spacer gif

To get around this, let's create a gif called clear.gif that is 2 pixels wide and 30 pixels high. Thirty pixels is the height we want the rows to be. It is the height of the button image. We will put this spacer gif inside each table cell to prop the cell open, so to speak. NN4.7 will be forced to open the cell to 30 pixels high.

Further, using multiple tables is inefficient. Let's try to get the background image to tile behind one table, cascading down the table structure so that it appears behind each cell.

<table border=0 
   background="image1.gif" width=150 align=center
	cellspacing=0 cellpadding=0>
<tr height=30>
<td align=center valign=middle>
	<img src="clear.gif" 
	align=left hspace=0 vspace=0>
<font size=-2><br>menu item</font></td>
</tr>
<tr height=30>
<td align=center valign=middle>
	<img src="clear.gif" 
	align=left hspace=0 vspace=0>
<font size=-2><br>menu item</font></td>
</tr>
<tr height=30>
<td align=center valign=middle>
	<img src="clear.gif" 
	align=left hspace=0 vspace=0>
<font size=-2><br>menu item</font></td>
</tr>
<tr height=30>
<td align=center valign=middle>
	<img src="clear.gif" 
	align=left hspace=0 vspace=0>
<font size=-2><br>menu item</font></td>
</tr>
</table>

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:	-

Now we have a fancy looking set of buttons, created from one button image, that works in all three browsers. Another variation on this is to create two cells across the row, the spacer gif in one cell, the background image appearing in the other. This way, one can have total freedom in the second cell to position text.

using td height

We could avoid the use of the spacer gif by using the TD HEIGHT attribute which IE5.0, NN4.7 and NN6.0 recognize.