For tabular data, what renders faster, CSS or <TABLE>? [closed]

Question

I am looking for some stats on current browsers for how long it takes to render a table using plain HTML versus a hacked-up CSS puritan method that avoids using actual TABLE, TR, TD etc. tags.

I am not looking for what's proper, only for what's faster, particularly on Firefox 3, although I am also interested in the stats for other browsers. Of course TABLE tags are designed for tables. That's not the question.

Answer 1

In general, I would say use <table> for tabular data. However, if the table is very long (say, over 100 rows) and the number of columns is low (~3), using divs to emulate rows would result in a much smaller markup footprint. This is especially relevant if you are using DOM searching javascript (as provided by the many JS libraries), as it would benefit to reduce the DOM tree size.

This is from experience, I had such a table and was looking for optimizations - moving to a div based display cut the HTML generated to a third and was a big improvement in DOM traversal performance.

Answer 2

If you really have tabular data, then use tables. The idea that you should never use tables for anything was a mistaken extension of the correct concept that you should use html tags only for their intended semantic purpose. That means use CSS for layout, but use tables for tabular data. It does not mean never use tables.

Answer 3

Since some browsers wait until the entire table has been transferred to display it in order to make sure they have adjusted the column widths for content size, using divs will probably render faster if you're looking for an average across every browser.

That being said, if you need a table, use a table.

Answer 4

This question looks to be similar to this one: Why not use tables for layout in HTML? so you might want to check some of the responses there as well.

In general, browsers will not render a table until the entire table has been calculated, which means that from a user perspective a large table is slower than the same content using CSS styling in place of tables. I was working with a web application at one point that was using tables to display a grid of status information, and it was extremely intensive to display and very slow. The same information displayed using CSS was faster and more importantly, started to display line by line as it was loaded, instead of waiting for the entire table, so it felt faster as an end user. I would suggest investigating using CSS to display the data using a sample dataset for testing. This is what I did to confirm that the tables were in fact much slower for the particular use case we had.

Answer 5

If you use CSS for layout and you adhere to best practice and keep your CSS in a separate file(s) then your CSS will typically only need to be downloaded once before it is cached, giving you the benefits of caching.

If you use tables for layout then your layout tables will be sent with the HTML for every page, increasing your bandwidth and download times.

To improve the rendering speed of tables though you could try setting the table-layout:fixed; to see if that helps..

Answer 6

Different browsers have wildly different javascript/css performance, so it's very hard to generalise here. For example, IE7 has a shockingly slow engine, and Chrome's is mind-bogglingly fast. Firefox is somewhere in between, depennding on if you're using 2 or 3.

Answer 7

I would not take rendering speed as the most important aspect here. HTML tables are made for tabular data. Putting that into a lot of DIVs or so would be totally wrong in my understanding.

Answer 8

Like most of the above answers, I too would say use Tables if you are displaying tabular data and DIVs if you want to control layout (using CSS3). Contrary to belief, tables are not slower in rendering than DIVs if you set a few properties like colgroup and keep layout as fixed. Check out the details of how to in the following link:

sites.google.com/site/spyderhoodcommunity/xhtml/makingtablesrenderfasterwhenlistingtabulardata

Answer 9

For tabular data, use a table. Tables come with all kinds of nice features, like <thead> and <tfoot> tags, legends, titles, captions, etc. Everything you need to make a table a table.

Also, if the CSS doesn't work/isn't loaded/doesn't matter, the table will still look and work the way it should.

Answer 10

Personally from what I have read, if you are actually presenting tabular data, a table is more appropriate for the task, I personally hae found that to be pretty true.

As for raw number of what is "faster", as mentioned by @skaffman it depends on the browsers...but to be "correct" it would make sense to use a table for tabular data.