Faire de meilleurs tableaux HTML

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 que pour bien construire une table, il ne suffit pas de lui donner fière allure. Ce devrait également être un système utile de diffusion de l'information. Si l'objectif de la table n'est pas de transmettre des informations, vous ne devriez pas utiliser une table pour quoi que ce soit que vous fassiez.

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 leur attribuer des valeurs d'identifiant individuelles. L'ajout de valeurs de classe vous donnera encore 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.

Effectivement, cela signifie que les colonnes n'existent que dans un sens abstrait avant le rendu de la page, vous ne pouvez donc pas leur donner de référence. En attribuant 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é les tables responsive, mais les tables et la réactivité ne vont pas bien ensemble. Concevoir vos tables dès le départ pour qu'elles tiennent sur un écran mobile en mode portrait est un choix judicieux.

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.

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

Utiliser PHP pour construire vos tables à partir des informations de base de données est toujours une bonne idée, et il est définitivement préférable de tout taper manuellement. La différence 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 simplement. Lorsque vous concevez un système de diffusion d'informations, vous souhaitez qu'il soit efficace et performant. Assurez-vous que vos tables sont conçues pour être exactement cela, et votre site tirera un bénéfice maximal de leur inclusion.

image d'en-tête avec la permission de

Avatar

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.