web-dev-qa-db-fra.com

Tableau réel vs Table de div

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

cssperformancehtmlhtml-table
54
Ben

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

Utilisez des tableaux pour ce à quoi ils sont destinés et des div pour ce à quoi ils sont destinés. Les propriétés d'affichage des lignes et des cellules du tableau doivent utiliser davantage les dispositions div que la création de tableaux pour les représentations de données. Regardez-les comme des colonnes et des rangées de mise en page identiques à celles que vous pouvez trouver dans un journal ou un magazine.

En termes de performances, vous avez quelques octets supplémentaires avec l'exemple div, lol :)

57
Ivo Sabev

Dans un premier temps, je ne me soucierais pas des performances, mais plutôt de la sémantique. S'il s'agit de données tabulaires, utilisez un <table>. S'il ne s'agit que d'éléments de bloc représentant un élément de disposition, utilisez <div>.

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

Si cette inquiétude est causée par des données volumineuses, j'envisagerais alors d'introduire une pagination/filtrage des données que vous êtes sur le point de montrer.

13
BalusC

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 aura pas des centaines (des milliers?) De tableaux à afficher. Utilisez ce que vous jugez plus confortable pour vous.

5
mingos

Il y a beaucoup de discussions à ce sujet et la table div 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

5
Hanseh

Je voulais mentionner que si vous utilisez une structure de table au lieu de div, les utilisateurs peuvent maintenir CMD (ou ALT dans les fenêtres) pour sélectionner une certaine zone de données de la table à copier. Ces données sont également très facilement collées dans Excel et d'autres programmes de classeurs similaires.

4
deweydb

Le tableau ne sera pas rendu tant que tout son balisage n'aura pas été téléchargé. Alors que les divs individuels seront rendus dès que leur balisage sera 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
Midhat

À mon avis, la seule raison d'utiliser des divs est le style et l'ajustement de la mise en page en fonction de la taille du navigateur. S'il n'est pas cassé, ne le réparez pas. Les divs sont plus faciles à styliser avec css.

Tableaux: vous pouvez obtenir une mise en page très compliquée exactement comme vous le souhaitez. Plus fiable. les consoles deviennent parfois un peu bizarres avec un style CSS compliqué. pas bon pour les sites Web responsables.

Divs: peuvent être ajustés en fonction de l'entrée du navigateur, plus flexibles et plus faciles à styliser.

2
Bodhi1

Si vous présentez des données tabulaires, vous devez utiliser une table - elle et les éléments associés ont toutes les sémantiques nécessaires pour représenter une table de données. Un gâchis de divs n'en a pas.

1
Grant Palin

Je mets juste 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 souhaitez générer des jeux de données très longs, en revanche, vous devez absolument utiliser des tableaux HTML traditionnels.

Brève explication:

Tout cela est né 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 type de module de rapport). Quoi qu'il en soit, j'aime les DIV, donc je l'ai écrit pour être basé sur DIV, un peu comme l'exemple OP.

Après des performances horribles (dans IE8 en particulier), j'ai décidé de le réécrire en utilisant uniquement des tableaux 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. Il en va de même pour Safari.

Cela dit, comme je ne peux pas fournir le code de mon travail, j'ai écrit un petit truc de référence qui vous permet d'essayer soit la méthodologie soit. 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 n'est qu'une vieille table d'école.

La seule vraie différence est le type d'élément généré, c'est donc à 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 du tableau 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
Dan H