Cell heights (images vs. no images)

[misterDee]

We are trying to minimize the number of images we use on our web site, to improve performance. One place we use them quite heavily is for creating 'pretty' tables, i.e. horizontal/vertical lines of color. I know Netscape is pretty picky about cells and their contents, so I'm wondering the best way to proceed.
In terms of performance, when trying to achieve a colored horizontal line, is it better to do something like this:

<table ...>
<tr>
<td colspan=&quot;number of columns&quot; bgcolor=&quot;some color&quot; height=&quot;1&quot;><img src=&quot;some spacer.gif&quot;></td>
</tr>
</table>

or this:

<table ...>
<tr>
<td colspan=&quot;number of columns&quot; bgcolor=&quot;some color&quot; height=&quot;1&quot;><table ...><tr><td></td></tr></table></td>
</tr>
</table>

We have several pages where we would use our decided approach multiple times.

 

[gbraden]

Why not this?

<table ...>
<tr bgcolor=&quot;some color&quot;>
<td colspan=&quot;number of columns&quot; height=&quot;1&quot;><img src=&quot;some spacer.gif&quot;></td>
</tr>
</table>

 

[misterDee]

Thanks gbraden for the quick reply. And, although I agree that your approach will work, it doesn't answer my main question - which is more efficient, use of a spacer.gif file, or use of an empty table?

 

[Einstein47]

If your spacer.gif is small, then the browser will load it once and use it throughout by pulling it from the cache. It will be much quicker to do that then to have the browser keep calculating tables everywhere.

Not only that but your code will be horrible to maintain if you use the nested tables approach. Just think if you fail to close just one of the inner tables the whole page may not display (either correctly or at all, depending on the browser).

Also the image idea is faster because browsers can open several download &quot;ports&quot; (I know that isn't the right word, but bear with me), for getting content simultaneously. If you put everything in the HTML and that file gets significantly bigger, then that one file will take longer to download than two smaller files. Make sense?

So in my experience I would go with the spacer.gif solution.

Hope that helps, Einstein47
(Love is like PI - natural, irrational, endless, and very important.)

 

[gbraden]

Attributes will always load faster than an object.

When I need empty cells of a certain size, I make use of the width attribute and the &nbsp; to cause the cell to spread out to the declared width. Sometimes you have the 'work' the solution.

On the other hand, a spacer gif works well and the microsecond longer that it takes for a page that uses them to load is not usually noticeable. Only if the gif is missing does it become an issue.

 

[gbraden]

My middle paragraph should read as follows:

When I need empty cells of a certain size, I make use of the width attribute and the &amp;nsp; to cause the cell to spread out to the declared width. Sometimes you have the 'work' the solution.

 

[gbraden]

grrrrrrr Fat Fingers

<big>&amp;nbsp;

 

[Vinni]

Hey Guys,

It is a web content management screen. I need to preview the images (may be thumbnail) before submitting them from my local drive on the webpages.

any help ?

thanX