Générateur de Tables HTML

Ce qui fait un bon tableau HTML

Les tableaux HTML existent pour présenter des données réellement tabulaires, des lignes et des colonnes où la position d'une valeur porte du sens, comme une grille tarifaire, un emploi du temps ou un tableau comparatif. Un tableau correct est plus qu'une grille de cellules ; il est construit à partir d'une petite famille d'éléments qui en décrivent les rôles : table enveloppe le tout, thead et tbody séparent l'en-tête du corps, th marque une cellule d'en-tête et td contient une cellule de données. Ce générateur émet cette structure complète pour vous afin que le résultat soit propre et conforme aux standards.

Obtenir la bonne structure compte, car les navigateurs, les moteurs de recherche et les technologies d'assistance s'appuient tous sur elle. Une grille simulée avec des div peut ressembler à un tableau mais ne communique aucune des relations, alors qu'un balisage de tableau correct indique à chaque lecteur de la page exactement comment les données sont organisées.

Deux façons d'entrer vos données

Vous pouvez construire un tableau de façon interactive dans l'Éditeur de grille, en ajoutant et supprimant des lignes et des colonnes et en tapant directement dans chaque cellule, ce qui est idéal pour de petits tableaux ou des retouches rapides. Pour tout ce qui vit déjà dans un tableur, l'onglet Import CSV est plus rapide : collez vos données et elles sont analysées dans la grille en une seule étape.

L'importateur est souple sur les séparateurs. Il accepte du texte délimité par des virgules, des tabulations, des points-virgules et des barres verticales, donc une copie directement issue d'Excel ou de Google Sheets (qui utilise des tabulations) et un CSV téléchargé (qui utilise des virgules) fonctionnent tous deux. Cochez La première ligne est l'en-tête lorsque votre ligne du haut contient les titres de colonnes, et ces valeurs deviennent des cellules th dans le thead plutôt que des données ordinaires.

Un exemple concret

Collez trois lignes dans Import CSV avec la première désignée comme en-tête : Name, Email, Phone sur la première ligne, puis deux lignes de contacts. L'outil produit un tableau dont le thead contient une seule ligne de trois cellules th et dont le tbody contient deux lignes tr de cellules td. Activez Tableau bordé et Lignes alternées et le balisage gagne les classes et styles qui dessinent les bordures des cellules et l'ombrage des lignes en alternance, de sorte que l'aperçu correspond exactement à ce qui apparaîtra sur votre page avant même que vous ne copiiez le code.

Options de mise en forme visuelle

Les Options de base couvrent la mise en forme à laquelle vous recourez le plus. Bordé trace des lignes autour des cellules, Lignes alternées ombre une ligne sur deux pour que les longs tableaux soient plus faciles à parcourir, et Effet de survol met en évidence la ligne sous le curseur, ce qui aide les lecteurs à suivre les lignes larges. Chaque option se reflète en direct dans l'aperçu.

Pour un contrôle plus fin, les Options avancées exposent le remplissage et l'espacement des cellules, la largeur et la couleur des bordures, ainsi que le mode border-collapse, qui décide si les bordures de cellules adjacentes fusionnent en lignes uniques (collapse) ou restent en doubles lignes séparées (separate). Vous pouvez aussi attacher un ID et une classe personnalisés pour que le tableau s'accroche à votre feuille de style existante plutôt que de se reposer uniquement sur des styles en ligne.

Légendes et portée des en-têtes pour l'accessibilité

Une légende donne au tableau un titre visible et associé par programmation, et vous pouvez la placer en haut ou en bas. C'est la manière accessible de nommer un tableau, bien meilleure qu'un paragraphe voisin, car les lecteurs d'écran l'annoncent comme l'étiquette du tableau.

L'option Portée des en-têtes est le réglage d'accessibilité le plus important ici. Régler la portée sur col sur les cellules d'en-tête indique aux technologies d'assistance que chaque th étiquette la colonne située en dessous ; la régler sur row étiquette la ligne située à côté ; et l'option combinée gère les tableaux qui ont à la fois une ligne d'en-tête et une colonne d'en-tête. Avec la portée correctement réglée, un lecteur d'écran peut annoncer les en-têtes pertinents à mesure que l'utilisateur passe de cellule en cellule, de sorte qu'une valeur soit lue « Phone : 555-1234 » plutôt qu'un nombre nu et sans contexte.

La réserve sur le responsive

Les tableaux sont par nature larges, et un tableau à nombreuses colonnes débordera l'écran d'un téléphone. L'option Tableau responsive y répond en enveloppant le tableau pour qu'il défile horizontalement à l'intérieur de son conteneur au lieu de casser la mise en page, ce qui garde chaque colonne intacte et accessible. C'est le réglage par défaut sûr pour les tableaux de données sur petits écrans.

Il vaut la peine de comprendre le compromis : le défilement horizontal préserve fidèlement les données mais demande au lecteur de faire défiler. Il n'existe aucun moyen de réagencer un vrai tableau de données en une seule colonne étroite sans perdre les relations lignes-colonnes ; pour un contenu réellement tabulaire, le défilement est donc la solution honnête plutôt qu'un contournement.

Erreurs courantes à éviter

Le mésusage le plus fréquent est de recourir à un tableau pour contrôler la mise en page plutôt que pour présenter des données ; le CSS moderne comme flexbox et grid est le bon outil pour la mise en page, et les tableaux doivent être réservés au contenu tabulaire. Une autre maladresse courante est d'omettre entièrement les cellules d'en-tête, ce qui prive les utilisateurs de lecteurs d'écran du contexte des colonnes ; promouvez donc toujours votre première ligne en en-tête lorsqu'elle contient des titres. Enfin, n'enfouissez pas la mise en forme dans de longs attributs style en ligne là où une classe serait plus propre et plus facile à maintenir ; utilisez les champs ID et classe pour relier le tableau à une feuille de style.