Using Css Instead of a table!

[FOR111]

Hi All,

I need some help or advice pls!

I have an intranet and part of it is the document manager. When a user clicks on a particular folder an iframe shows a list of documents. This list is shown using a number of tables and the problem is that if there is a great amount of documents being displayed the page takes ages to load (the page loads and one can see the documents but the explorer hangs for a couple of extra seconds then resumes!)
.. and i think that the problem lies within the number of tables i'm using! but i cannot find another solution..can you help me out!?

A part of the list is shown below (jsut one row!):

<div class="divMain">
<table class="tableList" bgcolor="#FFFFFF">
<tr >
<td width="95%" class="tdList"><p><b><u>Document1.pdf</u></b>&nbsp;(0.12 MB)<i></i>
<image src="/images/acrobat.gif" align="absbottom" width="20" height="20" alt="Open File" onclick="OpenLink(1574, 1);" onmouseover="this.style.cursor='hand';">
<image src="/images/view.gif" align="absbottom" alt="View Info." onclick="ViewDetails(1574);" onmouseover="this.style.cursor='hand';">
&nbsp;
</p></td>
<td width="5%" class="tdList"><p align="center"><input type="checkbox" value="1574" name="check[1]" id="check_1"></p></td>
</tr>
</table>
<table class="tableList">
<tr bgcolor="#FFFFFF" id="inforow_1"> 
<td width="40%" class="tdList"><p>Here is a description of the document</p></td>
<td width="15%" class="tdList"><p align="center"><i>Jack Jones</i></p></td>
<td width="15%" class="tdList"><p>29/11/2005 09:47</p></td>
<td width="15%" class="tdList"><p>29/11/2005</p></td>
<td width="15%" class="tdList"><p>Nov 2005</p></td>
</tr>
</table>
</div>

Thanks for your time and help!

Nick

 

[BabyJeffy]

Move the styling to a CSS block (rather than sitting inline) across the whole page. Remove the extra markup elements (the <p> tags, the <i> tags) and rely on CSS to do this (the italics may need a class on the <td>). Stop setting widths on every <td> (again use CSS).

I can't guarantee any speedup... but with less elements to render they ought to display faster.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[FOR111]

Thanks Jeff for your reply!

I didn't quite understand the block thing? could you explain further?

As regards to the tags i think u're right i might giving it a go!

The thing is that i don't know how to display a kinda of table using css so i could remove the tables!

Thanks
Nick

 

[BabyJeffy]

I'm not proposing removing the tables - since I doubt that would significantly reduce the page display time (given the development effort at this stage). I'm proposing you move the inline styling to either:
- a style section in the head of the document
- an external css file linked in the head of the document

When I wrote "CSS block" I was referring to a style section in the head of the document:

<style type="text/css">
... your css goes here
</style>

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[FOR111]

Ok, great! sorry feel dumb now! hehe

I'll give it a try and let you know!

Thanks for your help
Nick