Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Actual table Vs. Div table

This

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

Can be done with this:

<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 any difference between these two in terms of performance and/or render speed or they're just the same?

like image 252
Ben Avatar asked Apr 11 '10 17:04

Ben


People also ask

What is the difference between div and table?

TABLEs are the correct technology for tabular data. DIVs are the correct technology for page layout and defining objects on the page (along with other block-level objects, i.e. heading, paragraphs, ul tags etc.). Use them both and use them well.

Why should we use div instead of table?

Using div is better than using table because of easy control of the in the design and it can be container for controls than table and the table is mainlt used to group data with simillar structure so it's design is for this task but div is considered as container mainly than table.

Should you use tables or divs?

In general, try to use TABLE for true tables of data, use DIV and SPAN for logical block or inline containers of content. Show activity on this post. Tables should only be used to display data in a tabular way. For layout and design it is best practise to use divs and stylesheets.

Can div be used in a table?

No, you cannot insert a div directly inside of a table.


1 Answers

It is semantically incorrect to simulate data tables with divs and in general irrelevant to performance as rendering is instant. The bottle neck comes from JavaScript or extremely long pages with a lot of nested elements which usually in the old days is 100 nested tables for creating layouts.

Use tables for what they are meant to and div's for what they are meant to. The display table-row and cell properties are to utilize div layouts more then creating tables for data representations. Look at them as a layout columns and rows same as those you can find in a newspaper or a magazine.

Performance wise you have couple of more bytes with the div example, lol :)

like image 164
Ivo Sabev Avatar answered Oct 16 '22 22:10

Ivo Sabev