how to make site download progressively

[frank1]

well
i have index pages which has table and i have php codes that queries from different tables like news ,articles,photos and other things....

now when the website is accessed....it takes some time to load (white screen) comes and all the page are displayed at once after 30 seconds to 1 minutes....

rather than this how can i make site open and each part then display(make query) one by one....
so that site doesnt seem very slow...

thanks
any technique i can use

[logic_earth]

Are you using tables to contruct the pages?

[frank1]

yes...

well we have experienced using div only the sites is some what faster ....but management of code becomes difficult along with losing some rich formatting

[UFTimmy]

yes...

well we have experienced using div only the sites is some what faster ....but management of code becomes difficult along with losing some rich formatting

Browsers, especially IE, won't render a table until it knows what's in every table data cell. Meaning, if your page is one big nested table then nothing shows to the user until everything has been processed.

[AnthonySterling]

Could you not use an AJAX call to load the table if the browser has JS enabled?

At least you could display a message to the user whilst the data is collated then displayed.

SilverB.

[galen]

The simple answer is ... don't use tables.

[frank1]

Could you not use an AJAX call to load the table if the browser has JS enabled?

At least you could display a message to the user whilst the data is collated then displayed.

SilverB.

i think we have tried that as well...but same effect.....
first blank page...then page opened and then ajax comes to it play and start downloads.....with loading images...which is somewhat useful but not effective....

so div seems to be friend,well web designer has been using table from long time...now with the dynamic content it seems it is end of table

any way table has lots of attributes

[eruna]

Designers usually don't write good code. Perhaps a developer should do the front end coding as well.

[Jake Arkinstall]

web designer has been using table from long time

Exactly.

Tables are out.
<div>s with CSS are in.

But I doubt queries can take THAT long, unless the point of the page is to display all of the data.

So, what kind of queries are you running?

[crmalibu]

Output buffering could also contribute to this problem.

[frank1]

Exactly.

Tables are out.
<div>s with CSS are in.

But I doubt queries can take THAT long, unless the point of the page is to display all of the data.

So, what kind of queries are you running?

most of our code are prodecural oriented means we donot use pear or any classes for data abstraction
more over...we strictly quey fields that are required....

but it is portal site we must agree that there are too many things to be displayed...means latest news,jokes,sms,video links,picture thumbnail and so on....

for now one logic i take ..or agree is well there is one big table and inside that table there are tables and tr tds....
so every time page is accessed...the browser internally tries to find every thing ...upto end of the table.....
so it opens at once....

but can div provide all power of tables and td tr...
any drawbacks....?
one thing is for sure as a coder it may be some what difficult in design esp in cases where we use to do colspan and rowspan

[Nextri]

any way table has lots of attributes

You have all those attribute available with css

[Ize]

Reading you saying you will lose rich formatting is probably the most senseless thing I've ever heard. I don't mean any disrespect by that, but you really have to get out of that mindstate.
CSS will give you more control over formatting. Management of code will also be easier, since all presentation details reside inside one CSS file.
Do yourself a favor and make the switch.

[frank1]

well i was trying to talk about flexbility of tables rather than question power of css....

any way i would be greatful if somebody converts this code totally to div in browsers safe way....

<table width="100&#37;" border="0" cellpadding="2" cellspacing="2" bgcolor="#00CC99">
  <tr>
    <td >&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2" align="left" background="xyz.jpg">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><table width="100%" border="0">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

normally tr and td of our php are inside while loop
while($row=mysql_fetch_array...
{
<tr>
<td>
....
}

thanks for replies

[Ize]

well i was trying to talk about flexbility of tables rather than question power of css....

any way i would be greatful if somebody converts this code totally to div in browsers safe way....

<table width="100&#37;" border="0" cellpadding="2" cellspacing="2" bgcolor="#00CC99">
  <tr>
    <td >&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2" align="left" background="xyz.jpg">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><table width="100%" border="0">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

normally tr and td of our php are inside while loop
while($row=mysql_fetch_array...
{
<tr>
<td>
....
}

thanks for replies

It's not a question of how to replace certain markup with different markup. The power of CSS lies in controlling presentation. It can make a lot of things look like a lot of other things.
Above all, your example code doesn't give any clue as to what the final design of your site looks like. From what I can tell, this...

<div style="background:url(xyz.jpg);"></div>

...could be an exact visual copy of the code you posted.

[Raju Gautam]

As far as my experience in one of my last news site that was in unicode, the slowness was all because of the nested tables. So try to remove those nested tables and use some outer tables only. The site should load little faster if that is all because of that. After all i have completely avoid using tables except some tabular data display. See these two thread that i had posted before for my problem:
http://www.sitepoint.com/forums/showthread.php?t=494800
http://www.sitepoint.com/forums/showthread.php?t=490171

And though I am not good CSS developer but normally when I do some coding, I do it myself. So your replacement of the tables could be something like this:
Tables:

<table width="800" border="0" cellpadding="2" cellspacing="2" bgcolor="#00CC99">
  <tr>
    <td >a</td>
    <td>b</td>
  </tr>
  <tr>
    <td colspan="2" align="left" background="xyz.jpg">c</td>
  </tr>
  <tr>
    <td>d</td>
    <td><table width="100&#37;" border="0">
      <tr>
        <td>g</td>
        <td>h</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>e</td>
    <td rowspan="2">i</td>
  </tr>
  <tr>
    <td>f</td>
  </tr>
</table>

Divs:

<div style="background-color:#00CC99;width:800px;height:120px;border:1px solid #999999;">
	
    <div style="width:28%;float:left;height:20px;padding:1px;">a</div>
    <div style="width:70%;float:left;height:20px;padding:1px;">b</div>
    
    <div style="width:99%;float:left;height:20px;padding:1px;background:url(xyz.jpg);">c</div>
    
    <div style="width:28%;float:left;height:20px;padding:1px;">d</div>
    <div style="width:70%;float:left;height:20px;padding:1px;">
    	<div style="float:left;width:50%;">e</div>
        <div style="float:right;width:50%;">f</div>
    </div>
    
    <div style="width:28%;float:left;height:20px;padding:1px;">
    	<div>g</div>
        <div>i</div>
    </div>
    <div style="width:70%;float:left;height:40px;padding:1px;">h</div>
</div>

I have written some inline CSS and don't say that this is the best way to write, I was just trying to replace your table structure to divs.

[Stormrider]

You can't really just wholesale replace any td with a div, it entirely depends on how the site looks, as Ize has said.

Also, people need to get out of the mentality that the alternative to tables is divs... it isn't. Using a div for everything is just as bad. You should use semantic html, style that as much as possible, and only then put in extra divs and spans as hooks for other styles.

[frank1]

thanks for all replies and effort
ok i agree div cannot replace table and all...
ok suppose this was what designer wanted

most simplest

[Stormrider]

That is exactly how the site looks? With those letters, the borders and colours? I doubt it... You need to work from what the site will look like, not from what you think the table structure would be if you were using tables.

[felgall]

That table doesn't look like there could possibly be any actual tabular data to fit with that format. Certainly any such tabular data would be static and no back end to generate it would be required. If it isn't tabular data then there shouldn't be any table. In any case tables only provide about 0.005&#37; of what can be done with CSS as far as page layout is concerned AND tables can take hundreds of times longer to do the same small fraction that they are capable of.

From all of the information presented so far it sounds like your problem is that you are trying to fly to the moon in a rowboat and wondering why no matter how hard you row the boat never leaves the Earth's atmosphere (or even the water).

Get rid of the tables for non-tabular data and start building a page from semantic HTML that actually displays the content generated by the backend processing in a way that clearly identifies what is what. Once you have that working then you can style it to look however you like without the appearance impacting in any significant way on the load time. Trying to use a table not only slows the page loading down but it locks in your page layout so that the first request to rearrange the page will need the entire thing rebuilt instead of a minor modification to the stylesheet.

[Shaq]

The only thing that might be able to assist is if you strategically use flush() to push the output buffer to the screen... but as everyone has said, divs are the way to go on this one. You could also go the AJAX route.

[Stormrider]

divs are not the way to go, semantic html is the way to go

[Shaq]

divs are not the way to go, semantic html is the way to go

The issue at hand is the solving of the page rendering. Semantic HTML is not necessarily going to solve the problem.

Its nice to preach the 'right way' to do things, but in the real world, sometimes you just have to go against best practices to tweak and optimize your site.

[Stormrider]

That makes no sense at all. What possible advantages does spreading divs everywhere have? What disadvantages does using semantic html have? I cannot see your point at all.

Semantic HTML will solve the problem even more so, since you aren't putting unnecessary elements in there, keeping the page sizes down.

[Shaq]

That makes no sense at all. What possible advantages does spreading divs everywhere have? What disadvantages does using semantic html have? I cannot see your point at all.

Semantic HTML will solve the problem even more so, since you aren't putting unnecessary elements in there, keeping the page sizes down.

It makes plenty of sense, and i never said spread divs everywhere. Semantic HTML means using the right tags in the right places, it has nothing to do with optimization, which is clearly what frank1 is trying to do.

If frank1 has tabular data, then semantic HTML says frank1 should use a table... which solves absolutely nothing at all.

Its one thing to meet business needs. Its another thing to fool yourself into thinking your doing the right thing by religiously following best practices.