Tableau réel Vs. Div table

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.

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.

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

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é.

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.

À 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.

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.

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>