Tableau réel Vs. Div table

Ce

<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, y a-t-il une différence entre ces deux en termes de performance et/ou de vitesse de rendu ou ils sont exactement les mêmes?

47
demandé sur Christopher Rapcewicz 2010-04-11 21:13:06

9 réponses

Il est sémantiquement incorrect de simuler des tables de données avec divs et en général sans rapport avec les performances car le rendu est instantané. Le goulot de bouteille provient de JavaScript ou de pages extrêmement longues avec beaucoup d'éléments imbriqués qui, habituellement, dans l'ancien temps, sont des tables imbriquées 100 pour créer des mises en page.

Utilisez des tables pour ce à quoi elles sont destinées et des div pour ce à quoi elles sont destinées. Les propriétés display table-row et cell doivent utiliser des mises en page div plus que la création de tables pour les données représentation. Regardez - les comme une mise en page colonnes et lignes mêmes que ceux que vous pouvez trouver dans un journal ou un magazine.

Performance sage vous avez quelques octets de plus avec l'exemple div, lol:)

52
répondu Ivo Sabev 2010-04-11 17:21:53

En premier lieu, Je ne m'inquiéterais pas de la performance, mais plus de la sémantique. Si ce sont des données tabulaires, utilisez un <table>. Si ce ne sont que des éléments de bloc représentant un élément de mise en page, utilisez <div>.

Si vous vous inquiétez vraiment des performances, la réponse dépendra toujours du client utilisé. MSIE par exemple est connu pour être lent dans le rendu de table. Vous devriez au moins vous tester dans différents navigateurs.

Si cette inquiétude est causée par de grandes données, alors je considérerais introduire la pagination / filtrage des données que vous êtes sur le point d'afficher.

10
répondu BalusC 2010-04-11 17:21:43

Vous ne devriez vraiment pas vous soucier des performances dans le rendu de table. Même s'il y en a un, vous ne le remarquerez pas tant qu'il n'y en aura pas des centaines (des milliers?) des tableaux d'affichage. Utilisez ce que vous sentez est plus confortable pour vous.

5
répondu mingos 2010-04-11 17:18:07

Il y a beaucoup de discussions à ce sujet et div table prend généralement le dessus en raison de sa flexibilité dans le style. Voici un lien - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

4
répondu Hanseh 2017-03-02 18:55:03

La table ne sera pas rendue tant que tout son balisage n'aura pas été téléchargé. Alors que les divs individuels seront rendus dès que leur balisage est téléchargé. Je suppose que le temps total sera le même, mais les divs donneront une perception de meilleures performances et plus de réactivité.

3
répondu Midhat 2010-04-11 17:17:22

Je voulais mentionner que si vous utilisez une structure de table au lieu de div que les utilisateurs peuvent contenir CMD (ou ALT dans windows) pour sélectionner une certaine zone de données de la table à copier. Ces données collent également très facilement dans excel et d'autres programmes de classeur similaires.

3
répondu deweydb 2013-03-17 13:00:38

À mon avis, la seule raison d'utiliser divs sont pour le style et l'ajustement de la mise en page en fonction de la taille du navigateur. Si ce n'est pas cassé, ne le Répare pas. Les Divs sont plus faciles à styliser avec css.

Tableaux: pros - Vous pouvez obtenir une mise en page très compliquée exactement comment vous le voulez. Plus fiable. inconvénients-les tables deviennent un peu bizarres parfois avec un style CSS compliqué. pas bon pour les responsables de sites web.

Divs: peut ajuster basé sur l'entrée du navigateur, plus flexible et plus facile à style.

2
répondu Bodhi1 2015-12-15 21:26:07

Si vous présentez des données tabulaires, alors vous devriez utiliser une table - IT, et les éléments associés, ont toute la sémantique nécessaire pour représenter une table de données. Un gâchis de divs n'en a pas.

1
répondu Grant Palin 2010-04-11 17:25:38

Juste jeter dans mes deux cents sur le sujet de la performance. Pour les petites tables (moins de 100 lignes, par exemple), l'utilisation de DIVs ne ferait pas beaucoup de différence en termes de performances.

Si vous voulez générer des ensembles de données très longs, d'un autre côté, vous devez absolument utiliser des tables HTML traditionnelles.

Brève Explication:

Tout cela a surgi du projet de mon entreprise, où j'ai écrit une classe Javascript pour générer des tables de manière procédurale pour moi en fonction des données SQL (c'est un déclaration type de module). Quoi qu'il en soit, j'aime DIVs donc je l'ai écrit pour être basé sur DIV, un peu comme L'exemple OP.

Après quelques performances horribles (dans IE8 en particulier), j'ai décidé de le réécrire en utilisant uniquement des tables car ce sont des données tabulaires assez simples, dans l'ensemble. Les Tables sont, pour une raison quelconque, environ deux fois plus rapides sur ma machine dans Chrome. La même chose est vraie pour Safari.

Cela dit, Puisque je ne peux pas fournir le code de mon travail, j'ai écrit un petit benchmark thinggy qui vous permet d'essayer soit ou la méthodologie de l'extérieur. Vous verrez qu'ils sont presque identiques, un seul utilise des divs avec un style pour imiter le comportement standard d'une table, et l'autre est juste une table old school.

La seule vraie différence est le type d'élément généré, donc c'est à peu près la seule chose que je peux expliquer dans le delta temporel. Je suis sûr que cela varie selon le navigateur, mais il me semble que les éléments de table sont juste plus rapides.

<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>
1
répondu Dan H 2014-01-16 19:59:49