What's more efficient html

They have: 27 posts

Joined: Aug 2001

I'm curious which of the following code is more efficient than the other. I've been told that Netscape is really slow at rendering tables so I thought the second approach would be nicer, but then again it required more hit for the spacer image.

I like the second one because I won't need more tables to add more text without having the border divide the cells again.

1.

<table width="156" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td bgcolor="#666666">
            <table width="100%" border="0" cellpadding="0" cellspacing="1">
                <tr>
                    <td bgcolor="#1D4576">title</td>
                </tr>
                <tr>
                    <td bgcolor="#FFFFFF">title</td>
                </tr>
             </table>
        </td>
    </tr>
</table>
'

2.

<table width="156" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td colspan="3" height="1" bgcolor="#666666"><img src="./images/spacer.gif" alt=""></td>
    </tr>
    <tr>
        <td width="1" bgcolor="#666666"><img src="./images/spacer.gif" alt=""></td>
        <td width="154" bgcolor="#1D4576">text</td>
        <td width="1" bgcolor="#666666"><img src="./images/spacer.gif" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" height="1" bgcolor="#666666"><img src="./images/spacer.gif" alt=""></td>
    </tr>
    <tr>
        <td width="1" bgcolor="#666666"><img src="./images/spacer.gif" alt=""></td>
        <td width="154">text</td>
        <td width="1" bgcolor="#666666"><img src="./images/spacer.gif" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" height="1" bgcolor="#666666"><img src="./images/spacer.gif" alt=""></td>
    </tr>
</table>
'

Thanks,

Mark

Busy's picture

He has: 6,151 posts

Joined: May 2001

To much on such a small scale they are similar thing, except the bottom option is bigger, but instead of using the spacer gif use the non breaking sace tag thingy &nbsp;
Netscape doesnt like empty cells, but using the above is ok.
nesting tables is sometimes easier and faster, the browser read you tables code then displays it, having one really big table can take longer then say one or two smaler tables, IE gives the impression its loading faster (and sometimes does), kinda like a anitalised gif loading, takes the same time but you see it loading so appears faster.

I think it was Netscape that gave us tables

They have: 61 posts

Joined: Nov 2001

Not a big difference when you are using only a couple of nested tables. Lot of sites have loading problems in netscape because they create one main table at the very top of the page and then have several tables within. That is the problem. If you have several tables and nested tables within then the best way is to have a series of tables. Because in netscape (I don't know about version 6+) tables are loaded one by one and when you have a series they are loaded one by one and you can see them loading - otherwise, you have to wait till the main big table of the page is fully loaded before you see anything.

e.g.:

content
content
content

content
content

Mark Hensler's picture

He has: 4,048 posts

Joined: Aug 2000

Here is my short version... Table contents are not displayed untill the browser heres "" for the outmost table.

They have: 16 posts

Joined: Aug 2000

No real preference on the code, just a note to remind you that Netscape doesn't always render bgcolor properly in nested tables. If you nest, you'll need to add a background image of the color to the tds to have the color render properly.

Tiffany Ring
Go Shoeless!

Vincent Puglia's picture

They have: 634 posts

Joined: Dec 1999

Hi,

when in doubt, time it:

<script language='javascript'>
var start = new Date().getTime();
</script>
...body contents...
...tables, images, etc...
<script language='javascript'>
var end = new Date().getTime();
alert(start + '\n' + end + '\n' + (end - start))
</script>

Vinny

Where the world once stood
the blades of grass cut me still

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.