11
votes

Meilleure pratique: table, div, liste ou une combinaison ...?

J'ai un jeu de données simple avec moins de 100 rangées. J'ai présenté actuellement les données dans une série de divs imbriqués. Chaque rangée dispose d'un conteneur DIV, avec des divs imbriqués représentant les colonnes de données en elle. (C'était en réaction de mes premiers jours de codage quand il n'y avait rien de tel qu'un div).

La première colonne de données est formatée sous forme de lien d'image, tandis que les deux autres colonnes sont du texte.

a du sens de retourner à une table?

Aussi, comme une expérience, je pensais utiliser des nids ULS. Une UL pour contenir toutes les lignes et une ultérieure horizontale séparée pour chaque rangée.

En tant que note supplémentaire / question, j'ai un autre bloc de données pouvant entraîner des milliers de lignes. Ce montant de données entraînerait-il une réponse différente de «meilleure pratique» dans ce cas?


1 commentaires

Un navigateur gère la grande ligne compte si vous mettez les éléments de table dans le bon ordre


5 Réponses :


6
votes

Dans ce cas, une table est bonne. Les tableaux sont destinés à afficher des données tabulaires, comme une rangée dans la DB. Vous devriez éviter d'utiliser des tables pour la mise en page de la page ...

Quant à avoir des milliers de lignes, vous voudrez peut-être examiner la pagination. Je ne pense pas qu'il y ait une meilleure "meilleure pratique"


0 commentaires

24
votes

Réalisme, vous pouvez utiliser n'importe quel conteneur que vous souhaitez. Les meilleures pratiques consistent à utiliser les éléments de ce qu'ils étaient censés être utilisés. Si vous affichez des données tabulaires, utilisez tous les moyens, utilisez une table! Il y a de grands plugins pour améliorer l'expérience de l'utilisateur, et il est vraiment facile de lire et de copier / coller.

La question que je me demande toujours est si ces données seraient mieux affichées dans un fichier Word ou Excel. Si Excel, alors c'est une table. Si mot, c'est Div's.

Si vous utilisez des milliers de lignes, vous voudrez probablement donner le contrôle de l'utilisateur sur le tri, le filtrage et la transmission de plus d'informations pour faciliter la convivialité. J'utiliserais une table avec des plugins JQuery comme TableSorter, Hovertable et Tablefilter pour faciliter la tâche.


2 commentaires

J'ai marqué cela comme la réponse "correcte" que j'ai aussi aimé l'analogie.


Vous peut avoir des données tabulaires en mot, cependant ... :) de toute façon, l'analogie fait le point.



0
votes

Si j'ai besoin de montrer des données dans une table, j'utilise principalement l'élément

. Vous devriez penser à la convivialité lors de la montrage de 1000 rangées ou plus. Le plugin JQGRID est une bonne solution pour cela et comporte des fonctionnalités telles que la pagination, le tri, la recherche, etc.
0 commentaires

1
votes

Les listes sont pour les listes, les tableaux sont destinés aux données tabulaires et les DIV sont pour la mise en page. Donc, si vous voulez aller la meilleure voie de pratiques; Je pense que vous devriez utiliser une table ici.

qui étant dit; L'utilisation des divs par opposition aux tables n'est pas si mauvaise. Je ne t'inquiète pas de la réécriture si vous utilisez déjà des divs au lieu d'une table. La mise en garde Être étant que vous nettoyez vos divs de colonne flottés. ex: xxx

ce que vous devez éviter est le contraire (à l'aide de tables où DIVS doit être utilisé).

aussi, même si vous pourriez être capable de Obtenez une sorte de structure de table à l'aide d'éléments de liste, ce n'est pas l'itinéraire que vous souhaitez aller. Je ne l'ai jamais fait auparavant ... Pour être honnête des centaines d'exemples que j'ai regardés, je ne pense pas avoir jamais vu quelqu'un les utiliser pour un tel but. Je suppose que la meilleure raison ici est pourquoi allez-vous? Puisque je ne l'ai jamais vu avant que je n'ai pas d'exemples pratiques qui illustrent pourquoi vous ne devriez pas le faire. Mais pour moi, cela ressemble à de dire à quelqu'un de ne pas utiliser de pipe pour desserrer un boulon quand ils ont une clé à portée de main. Je veux dire sûr ... Peut-être que la pipe pourrait faire le travail mais la clé est là ...


2 commentaires

J'apprécie que vous sortez de votre façon d'ajouter du code à titre d'exemple. Mon code est similaire à votre exemple, l'exception étant que la classe "rangée" efface le flotteur.


L'ajout de la clair ne devrait pas changer la façon dont les choses se ressemblent. Cela évitera des bugs flottants dans IE7 où la propriété de flotteur CSS n'est pas traitée correctement et va à d'autres parties du document. Donc, par exemple, faire des tables comme celle-ci; Ne pas avoir un vide vide vide pourrait causer des éléments sous votre table pour flotter - même si vous ne le souhaitez pas.



0
votes

Les listes sont pour une donnée de dimension. Les tables sont pour plus d'une donnée de dimension. Les divs doivent séparer les choses ou inclure quelque chose dans d'autres. Si chaque élément de vos données a une relation de propriétaire à d'autres personnes, vous devez utiliser la table.


0 commentaires