Are large html tables slow?

Question

I've recently been developing an application using tables with a large number (hundreds) of rows. The rows contain tabular data and each row contains two drop down lists as well as link which displays hidden table rows directly below it.

I am currently experiencing lengthy delays when attempting to select a value from the drop down, and when displaying the hidden table rows.

Is the table the source of my problem here?

Solution 1

From what I gather, HTML tables can be appear to be slow to render if widths are not explicitly stated. If they aren't, the browser has to finish loading the contents of the cells before it can calculate the correct widths.

MSDN has some information here on their "Building High Performance HTML Pages" article that may help; they suggest the following (regarding tables specifically):

• Set the table-layout CSS attribute to fixed on the table.
• Explicitly define col objects for each column.
• Set the WIDTH attribute on each col.

Solution 2

The problem is more than likely the rendering of the controls (100 select boxes) rather than the table layout. How many items are there in the drop down list? Does it perform the same way in all browsers on different operating systems?

Sorry to be so vague but generally tables aren't slow to render, but are looked down upon because of their lack of accessibility (although of course much of the idealism is the fact screen readers don't like them).

Solution 3

I can state from experience that it's almost certainly the dropdown lists that are causing the slowness. Tables with hundreds of rows can render almost instantaneously if they only contain text, but add a dropdown list to each row with just a few dozen options, and now even 50 rows will take a noticeable amount of time.

Try to design around the need for dropdowns in the table rows - if this is a form (and why else would you have dropdowns?), have the user select the row they wish to edit, and then put the editable controls only in that row, either via AJAX if you're into that sort of thing, or a more traditional "detail view" approach.

Solution 4

Whatever you come up with, test the approach in a couple of browsers on a couple of platforms, with some slower machines. I once had an app that was speedy everywhere except in Safari for Macintosh. It turned out to be something about the way it rendered the dropdowns. There's just no substitute for experimentation. Uhm, I meant testing.

Solution 5

I've not noticed any slowdowns when displaying static tables with a few thousand entries, but adding effects like sorting or dynamic zebra-striping can quickly bog down even a modern browser on a fast computer. Make sure you're not running any JavaScript iterations across the entire table.

View more solutions

Comments

[Bob Kaufman]

How many items in each of the dropdown lists? Are the lists repeated on each row?

[ChrisW]

Does it matter which browser (HTML viewer) you're using?

[Bob Kaufman]

Added asp.net tag per @ErnieStrings's comment to my answer. @ErnieStrings -- I'm out today, so I'll get you a sample tomorrow. Meanwhile, look at <asp:gridview... after you gain familiarity with that, my example, and others you'll encounter, will make a lot more sense.

[Jakub]

I second the 'rednering of controls' as the problem. Maybe the hundreds of rows should be reconsidered? An alternative being AJAX based 'load as needed' rows? Just a thought, less scrolling = happy user.

[Adrien Be]

thanks a lot for the source. Is there any actual benchmark where we can clearly see the difference?