Actual table Vs. Div table

Question

it

<table> <tr> <td>Hello</td> <td>World</td> </tr> </table> 

You can do the following:

 <div> <div style="display: table-row;"> <div style="display: table-cell;">Hello</div> <div style="display: table-cell;">World</div> </div> </div> 

Now, is there a difference between the two in terms of performance and / or rendering speed, or are they the same?

Answer 1

It is semantically incorrect to model data tables using a div and is not at all related to performance since rendering is instant. The neck of the bottle comes from JavaScript or extremely long pages with a lot of nested elements, which usually in the old days make up 100 nested tables to create layouts.

Use tables for what they are intended for, and a div for what they are for. Table and cell table properties should use div layouts and then create tables to represent the data. Look at them as columns and lines of the layout, such as those that you can find in a newspaper or magazine.

Performance, you have a couple more bytes with an example div, lol :)

Answer 2

In the first case, I would not worry about performance, but more about semantics. If this is tabular data, use <table> . If these are only block elements representing a layout element, use a <div> .

If you are really worried about performance then the answer will still depend on the client being used. MSIE is known to be slower in table rendering. You should at least check yourself in different browsers.

If this excitement is caused by big data, I would consider introducing the paging / filtering of the data that you are about to show.

Answer 3

You really don't need to worry about performance in table rendering. Even if it is, you will not notice it until hundreds (thousands?) Of Tables appear. Use what seems more convenient for you.

Answer 4

The table will not be displayed until all its markup has been loaded. While separate divs will be displayed as soon as their markup is loaded. I think the total time will be the same, but divs will give an idea of ​​better performance and more responsiveness.

Answer 5

There is a lot of discussion about this, and the div table usually gets the top because of its flexibility in styling. Here's one link - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

Answer 6

I would like to mention that if you use a table structure instead of a div, then users can hold CMD (or ALT in windows) to select a specific data area from the table for copying. This data is also very easily inserted into excel programs and other similar programs.

Answer 7

In my opinion, the only reason for using divs is the style and layout settings based on browser size. If it does not break, do not correct it. Divs are easier to style, but with css.

Table: you can get a very complex layout as you want it. More reliable. The tips are sometimes a little weird with complex CSS styles. not suitable for responsible websites.

Divs: can be customized based on browser input, more flexible and easy to style.

Answer 8

If you are presenting tabular data, you should use a table — it and related elements have all the necessary semantics for representing a data table. The mess divs have no one.

Answer 9

Just throwing my two cents on performance. For small (less than 100 rows, for example) tables, using a DIV will not have a significant difference in performance.

If you want to generate very long datasets, on the other hand, you must make full use of traditional HTML tables.

Brief explanation:

All this arose from my company project, where I wrote a Javascript class for procedurally generating tables for me based on SQL data (this is a reporting type of module). Anyway, I like the DIV, so I wrote it as DIV-based, like the OP example.

After some horrific performance (especially in IE8), I decided to rewrite it using only tables, as these are pretty simple tabular data in general. The tables, for some reason, are about twice as fast on my machine in Chrome. The same is true for Safari.

However, since I can not provide my working code, I wrote a small control thing that will simply allow you to try either the methodology. You will see that they are almost identical, only one uses divs with a style to mimic the standard behavior of the table, and the other only the old school table.

The only real difference is the type of element being generated, so about the only thing I can consider during delta. I'm sure it depends on the browser, but it seems to me that the elements of the table are faster.

 <script type="text/javascript"> var time_start = new Date().getTime(); var NUM_ROWS = 5000; var NUM_CELLS = 8; var OLD_STYLE = 1; // toggle 0/1, true/false if(OLD_STYLE) { var table = document.createElement('table'); document.body.appendChild(table); for(var a = 0; a < NUM_ROWS; a++) { var row = document.createElement('tr'); for(var b = 0; b < NUM_CELLS; b++) { var cell = document.createElement('td'); cell.innerHTML = 'cell'; row.appendChild(cell); } table.appendChild(row); } } else { var table = document.createElement('div'); document.body.appendChild(table); for(var a = 0; a < NUM_ROWS; a++) { var row = document.createElement('div'); row.setAttribute('style','display: table-row; padding: 2px;') for(var b = 0; b < NUM_CELLS; b++) { var cell = document.createElement('div'); cell.setAttribute('style','display: table-cell; padding: 2px'); cell.innerHTML = 'cell'; row.appendChild(cell); } table.appendChild(row); } } var dt = (new Date().getTime() - time_start)/1000; console.log( dt + ' seconds' ); </script>