Table réelle Vs. Div table

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.

Utiliser 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 🙂

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.

Que je voulais mentionner que si vous utilisez une structure de table au lieu de div que les utilisateurs peuvent maintenir CMD (ou ALT sous windows) pour sélectionner une zone de données de la table à copier. Ces données sont également des pâtes très facilement dans excel et d'autres semblables classeur programmes.

À mon avis, la seule raison d'utiliser des divs sont pour le style et l'ajustement de la mise en page basée sur la taille du navigateur. Si elle n'est pas cassé, ne le répare pas. Les Divs sont plus faciles à coiffer mais avec les css.

Tables:
pros - vous pouvez obtenir un très compliquée mise en page exactement comment vous le voulez. Plus fiable.
le contre - tables un peu bizarre parfois compliquée avec le style css. pas bon pour les responsables de sites web.

Divs: pouvez régler à partir du navigateur d'entrée, plus souple et plus facile à coiffer.

Juste en les jetant dans mes deux cents sur le thème de la performance. Pour les petits (moins de 100 lignes, par exemple) des tableaux en utilisant des DIVs ne ferait pas beaucoup de différence de performance sage.

Si vous voulez créer de très longues ensembles de données, d'autre part, vous avez les mains vers le bas devrait absolument utiliser les tableaux en HTML.

Brève Explication:

Tout cela a engendré de mon projet de l'entreprise, où j'ai écrit une classe Javascript pour le plan procédural générer des tableaux pour moi sur la base de données SQL (c'est une déclaration type de module). De toute façon, j'aime les DIVs j'ai donc écrit pour être DIV basé, comme l'OP exemple.

Après quelques horribles de la performance (dans IE8 en particulier), j'ai décidé de le ré-écrire en utilisant simplement les tables, car il est assez simple de données tabulaires, dans l'ensemble. Les Tables sont, pour quelque raison que ce soit, environ deux fois plus vite sur ma machine en Chrome. La même chose est vraie pour Safari.

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

La seule véritable différence est le type de l'élément en cours de génération, de sorte que c'est la seule chose que je puisse en tenir compte dans le temps delta. Je suis sûr qu'il varie en fonction du navigateur, mais il me semble que les éléments de la table sont juste plus rapide.

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