Curieusement, l’une des technologies Web les plus difficiles à maîtriser est l’une des premières technologies disponibles pour le navigateur, après le texte brut et les images. Le problème est encore plus grave aujourd'hui avec tant de types d'appareils différents sur lesquels il convient de réfléchir.
Les tables parfaites sont presque impossibles à créer si elles ne contiennent pas assez d'éléments pour qu'aucun problème ne soit susceptible de se produire. Les types d'erreur qui peuvent survenir comprennent:
- Habillage du texte incorrect
- Erreurs de justification
- Tableau de rendu hors écran
- Faire défiler les problèmes
- Erreurs de hauteur de ligne
- Erreurs de largeur de colonne
- Laideur générale ou le désordre
Dans cet article, nous verrons comment éviter de tels problèmes afin que vos tables aient les meilleures chances de créer une bonne impression.
Stratégies d'évitement à éviter
Comme les tables sont difficiles à obtenir, certaines personnes évitent de les utiliser. Certaines stratégies courantes utilisent CSS pour créer une fausse table et utilisent une image de la table de données sans l'implémenter dans le code.
Ces deux stratégies d'évitement ont des défauts et doivent être évitées. L'utilisation de CSS pour imiter une table ne présente pas la structure sémantique inhérente à une table, ce qui peut créer des problèmes d'utilisation et d'accessibilité.
Une image d'une table ne souffrira pas des problèmes énumérés dans l'introduction, mais dégrade votre potentiel de référencement et ne peut pas être modifiée facilement si vos données doivent être mises à jour. Il introduit également des problèmes d’utilisabilité et d’accessibilité.
Les cadres sont vos amis
Les frameworks communs tels que Bootstrap et Foundation contiennent de nombreux outils permettant de gagner du temps, et les tables ne font pas exception. Construire une table élégante dans Bootstrap n’est pas difficile, mais présente certaines limitations si vous construisez tout seul, sans ajouter de la personnalisation sur mesure à vos efforts.
Les regards ne sont pas tout
Étant donné que le contenu et le style doivent toujours être indépendants, il peut être judicieux de créer votre tableau en langage HTML simple pour vous assurer qu'il sera bien avant l'application de tout style particulier.
Cela peut également être utile pour vous rappeler qu'une bonne construction de table nécessite plus que de simplement faire en sorte que la table soit belle. Il devrait également être utile dansformatsystème de distribution d'ions. Si le but du tableau n'est pas de transmettre enformation, alors vous ne devriez pas utiliser une table pour tout ce que vous faites.
Viser l'accessibilité
Certaines personnes ont du mal à voir et à lire les textes imprimés, il est donc judicieux de leur rendre les tableaux accessibles. Vous pouvez trouver tout ce que vous devez savoir pour rendre vos tables plus accessibles à partir de WebAIM.
Envisagez de donner des valeurs d'ID aux composants de la table
Pour un contrôle maximal sur chaque partie du tableau (lignes, cellules), vous pouvez envisager de les donner endivivaleurs double ID. L'ajout de valeurs de classe vous donnera également plus de flexibilité.
Faire ces choses crée beaucoup plus de travail pour vous, donc ce n'est pratique que lorsque vous devez être capable d'ajuster n'importe quel élément par référence. Si vous décidez de le faire, vous pourrez manipuler directement n'importe quel élément de table en utilisant JavaScript et CSS.
Une des complexités de la fabrication de table est que nous déclarons des lignes mais pas des colonnes. Les colonnes sont créées dynamiquement, calculées en fonction du nombre d'éléments de données que vous placez sur chaque ligne. C'est pourquoi les tableaux ajoutent au temps de chargement de votre page.
En fait, cela signifie que les colonnes n'existent que dans un sens abstrait avant le rendu de la page, vous ne pouvez donc leur donner aucun type de référence. En donnant au premier élément TD d'une ligne une classe, par exemple «firstCol», vous fournissez un moyen de référencer directement une colonne.
Les tables compactes sont les meilleures
Il est devenu à la mode de tout construire avec de gros composants à haute visibilité. Du point de vue de l'accessibilité, c'est merveilleux. En termes de facilité d'utilisation, toutefois, ce n'est pas toujours la meilleure solution, car cela peut entraîner des problèmes.
Les développeurs de Bootstrap ont expérimenté responsive tables, mais des tables et responsivene vont pas bien ensemble. Concevoir vos tableaux dès le départ pour qu'ils tiennent sur un écran mobile en mode portrait est une décision intelligente.
Les tableaux doivent toujours être déroulants
Il est conseillé de toujours définir la valeur de dépassement de capacité d'une table sur auto, mais pas sur la table elle-même. Au lieu de cela, placez la table dans une div, comme ceci:
Ensuite, il y a beaucoup de code PHP qui construit le corps de la table, se terminant par ceci:
La partie qui permet de faire défiler la table se trouve sur la première ligne, où la div table-wrap reçoit une hauteur fixe et sa valeur de débordement est définie sur auto. Si vous faites cela pour la table elle-même, au lieu d'un wrapper autour de la table, cela peut avoir des effets inattendus.
Appelez les gros frappeurs si vous en avez besoin
Cela est excessif pour les tableaux simples, mais lorsque vous avez un tableau qui a vraiment besoin d'avantages tels que des largeurs de colonne ajustables et un tri des colonnes, certaines applications jQuery puissantes ont été conçues pour vous aider à construire des tableaux complexes.
L'option la plus impressionnante que vous souhaiteriez pour un site WordPress est wpDataTables, un tableau WordPress plugin qui facilite votre travail avec les tableaux, les graphiques et la gestion des données. Avec lui, vous pouvez créer responsive Tableaux et graphiques WordPress.
La plugin fonctionne très rapidement avec de grandes tables, jusqu'à des millions de lignes, mais vous pouvez également faire beaucoup de personnalisations et de filtrage sur les tables presque comme si vous étiez dans Excel ou Google Spreadsheets.
Le meilleur et le plus probable est Flexigrid. Cela ressemble à une table Java Swing et fonctionne de manière similaire.
Les fonctionnalités de Flexigrid peuvent même être trop pour répondre à vos besoins. Dans ce cas, vous pouvez envisager TableSorter, ce qui est un peu plus simple.
Bien que les fonctionnalités de ce type d’outils puissent être excitantes, il est important qu’elles ajoutent encore plus de temps à votre temps de chargement de page. Il est préférable de garder ce genre de chose pour le moment où vous en avez vraiment besoin.
Les outils de conversion automatisés ne donnent normalement pas les meilleurs résultats
Il existe des plug-ins CMS permettant de convertir des tables de document en tables HTML. C’est loin d’être aussi efficace que de construire la table vous-même manuellement. Par conséquent, si vous voulez obtenir des résultats supérieurs, une telle automatisation n’est pas la solution.
Votre propre automatisation maison va bien, cependant
Utilisation de PHP pour construire vos tables à partir de la base de données dansformation est toujours une bonne idée, et certainement préférable à tout taper manuellement. La différence ici est que vous avez un contrôle total sur le fonctionnement de l'automatisation.
Lorsque vous utilisez une automatisation tierce, l'auteur tiers doit faire des hypothèses sur votre table. Cela signifie que vous allez vous retrouver avec une table générique qui peut manquer de nombreuses fonctionnalités par rapport à la création de la table vous-même.
Utilisez les tableaux de manière appropriée et ils vous récompenseront
Les bonnes tables sont conçues, elles ne se produisent pas par hasard. Lorsque vous concevez un informatsystème de livraison d'ions, vous voulez qu'il soit efficient et efficace. Assurez-vous que vos tableaux sont conçus pour être exactement cela, et votre site tirera le meilleur parti de leur inclusion.
image d'en-tête avec la permission de
Commentaires Réponses 0