Table réelle Vs. Div table

Question

Cette

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

Peut être fait avec ceci:

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

Maintenant, quelle est la différence entre ces deux conditions de performance et/ou la vitesse de rendu, ou qu'ils soient tout de même?

Answer 1

Il est sémantiquement incorrect pour simuler des tableaux de données avec des divs et, en général, hors de propos pour les performances car le rendu est instantanée. Le col de la bouteille vient de JavaScript ou de très longues pages avec beaucoup d'éléments imbriqués qui, habituellement, dans les vieux jours est de 100 tables imbriquées pour la création de modèles.

Utilisez des tableaux pour ce qu'ils sont censés et div pour ce qu'ils sont censés le faire. Le tableau d'affichage de la ligne et les propriétés de la cellule sont à utiliser div mises en plus de la création de tables pour la représentation des données. Regarder une disposition de colonnes et de lignes mêmes que celles que vous pouvez trouver dans un journal ou un magazine.

Performance sage, vous avez un couple de plus d'octets avec la div exemple, lol :)

Answer 2

En première instance, je ne voudrais pas vous soucier de la performance, mais plus sur la sémantique. Si c'est des données tabulaires, utiliser un <table>. Si ce sont juste des éléments de bloc représentant un élément de mise en page, utilisez <div>.

Si vous avez vraiment, vraiment vous soucier de la performance, la réponse dépend du client. MSIE, par exemple, est connu pour être lent dans le tableau de rendu. Vous devriez au moins le tester vous-même dans les différents navigateurs.

Si cette worriness est provoquée par l'afflux de données, puis je envisager d'introduire de pagination/filtrage des données que vous êtes sur le point de montrer.

Answer 3

Il y a beaucoup de discussions à ce sujet et div table d'habitude prend le dessus en raison de sa flexibilité en matière de style. Voici un lien - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

Mais le "cool" que j'ai lu jusqu'à présent est la comparaison : http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

Answer 4

Le tableau ne sera pas rendue jusqu'à ce que tous ses balisage a été téléchargé. Alors que les divs sera rendu dès que leur langage est téléchargé. Je suppose que le temps total sera le même, mais les divs donnera une perception d'une meilleure performance et une plus grande réactivité.

Answer 5

Vous ne devriez pas vous soucier de performances dans le tableau de rendu. Même si il y en a un, vous ne le remarquez pas jusqu'à ce qu'il y a des centaines (des milliers?) des tableaux d'affichage. Utilisez ce que vous sentez le plus confortable pour vous.