Outils de construction pour Toolz.dev cela signifie que j'écris beaucoup de tableaux HTML, dans la documentation, dans les e-mails adressés aux utilisateurs, dans des pages de destination simples occasionnelles. Et un tableau est le seul bit HTML que personne n'aime écrire à la main. Dix lignes et cinq colonnes représentent plus de cinquante balises cellulaires, qui doivent toutes s'ouvrir et se fermer dans le bon ordre, et une manquante </td> brise tranquillement toute la mise en page J'avais une pile de données dans une feuille de calcul et je voulais le balisage, alors j'ai construit un générateur sur le site C'est le guide pour cela.
tl;dr : Les Toolz Générateur de tableaux HTML prend des données séparées par des virgules ou des onglets et écrit un texte complet et accessible
<table>avec<thead>,<tbody>(en), et des cellules d'en-tête appropriées La première ligne peut devenir<th scope="col">et la première colonne<th scope="row">(en anglais), ainsi les lecteurs d'écran annoncent les bons en-têtes Ajoutez une légende, des lignes rayées et des bordures, et choisissez un CSS basé sur la classe, des styles en ligne pour le courrier électronique ou du HTML sémantique simple Chaque cellule est échappée Elle s'exécute entièrement côté client : pas de téléchargement, pas d'inscription, fonctionne hors ligne.
Qu'est-ce qu'un générateur de table HTML ?
Un générateur de tableaux HTML transforme des lignes de données en balisage HTML qui les rend sous forme de tableau dans un navigateur Vous collez des valeurs séparées par des virgules ou des onglets, choisissez à quoi devrait ressembler le tableau et l'outil écrit un complet <table> élément avec <thead>, <tbody>« , et les rangées et les cellules à l'intérieur. Au lieu de taper à la main tout le monde » <tr>, <th>, et <td> et en comptant les cellules pour garder les colonnes alignées, vous collez les données une fois et copiez le balisage de sauvegarde prêt à être déposé dans une page, un modèle de courrier électronique ou un fichier Markdown qui permet le HTML brut.
La raison pour laquelle un générateur gagne sa place est que le HTML de table est verbeux et répétitif, et la répétition est l'endroit où les erreurs se cachent Chaque cellule a besoin d'une balise d'ouverture et de fermeture, les cellules d'en-tête diffèrent des cellules de données, et le tout doit rester rectangulaire ou le navigateur rend un gâchis irrégulier Faire cela à la main pour tout ce qui se trouve au-delà d'une minuscule table est lent et sujet aux erreurs L'outil le fait de manière déterministe : vous lui donnez les valeurs, il produit un balisage valide, échappé, correctement imbriqué.
Il y a une couche d'accessibilité au-dessus du balisage brut qu'un tableau écrit à la main saute souvent, et c'est la partie qui me tient le plus à cœur Une table correctement construite utilise <th> pour les cellules d'en-tête avec un scope attribut afin que la technologie d'assistance puisse annoncer à quel en-tête appartient une cellule de données donnée et qu'elle puisse transporter un <caption> décrivant ce que contient le tableau La section WHATWG HTML Living Standard' ; s sur les données tabulaires énonce ces éléments, et le générateur les applique pour vous plutôt que de vous laisser un <div> grille qui ressemble à une table mais se lit comme du bruit pour un lecteur d'écran.
Pourquoi ne pas simplement écrire le tableau à la main ?
Pour une table deux par deux, l'écriture manuscrite est plus rapide que l'ouverture d'un outil, et vous devriez. Le générateur gagne sa garde sur les tables qui sont réellement douloureuses : celles avec des données réelles, de nombreuses lignes et un en-tête. Sur ceux-là, l’écriture manuscrite comporte trois modes de défaillance récurrents.
La première est une structure cassée Miss one tag de fermeture parmi cinquante et le navigateur' ; s récupération d'erreur fait quelque chose d'imprévisible, et vous perdez des minutes à chercher la cellule qui l'a démarrée La seconde est constituée de colonnes incohérentes Si une ligne a quatre cellules et les autres en ont cinq, le tableau rend tordu, et repérer la courte ligne dans un mur de balises est véritablement difficile La troisième s'échappe : coller des données qui contiennent un <, un &ou un égaré " directement dans une cellule et vous avez soit cassé le balisage, soit ouvert un petit trou d'injection.
Le générateur supprime les trois Il pads courtes rangées donc chaque ligne a le même nombre de cellules et la table reste rectangulaire Il ferme toujours ce qu'il ouvre Et il HTML-échappe chaque valeur de cellule, donc un < se transforme < et s'affiche sous forme de texte au lieu d'être lu sous forme de balise Ce que vous collez est ce que vous obtenez, rendu en toute sécurité.
Voici la décision dans un tableau.
| situation | manier | pourquoi |
|---|---|---|
| Une minuscule table deux par deux | Écrivez-le à la main | Plus vite que d'ouvrir quoi que ce soit |
| Données réelles avec de nombreuses lignes et un en-tête | Générateur de tableaux HTML | L'évasion, la nidification et l'alignement sont l'endroit où les tables à main se brisent |
| Vous voulez plutôt une table Markdown | Générateur de table de démarquage | Même idée, sortie Markdown aromatisée à GitHub |
| Vous voulez simplement afficher ou vérifier un CSV | Visionneuse CSV | Lisez les données sans générer de balisage |
Comment rendre la table accessible ?
C'est la question qui sépare un tableau qui semble simplement juste de celui qui fonctionne pour tout le monde, donc il obtient sa propre section Deux choses comptent : les cellules d'en-tête et une légende.
Cellules d'en-tête d'abord Dans un tableau réel, les cellules qui étiquettent les lignes ou les colonnes devraient être <th>, pas <td>: et chacun <th> devrait porter un scope attribut disant s'il est en tête d'une colonne (scope="col") ou une ligne (scope="row"). Les lecteurs d'écran utilisent scope pour annoncer l'en-tête pertinent avant chaque cellule de données, un auditeur entend donc " ;Rôle : Engineer" ; plutôt qu'un " ; Engineer" ; sans contexte. L'option generator' ;s first-row-header émet <th scope="col"> pour la rangée supérieure, et l'option d'en-tête de première colonne émet <th scope="row"> pour la cellule principale de chaque rangée de corps Le didacticiel W3C' ; s WAI sur les tableaux recommande exactement ce modèle pour des tableaux de données simples.
La légende est la deuxième pièce. Un <caption> element, qui se trouve directement à l'intérieur de la table, donne à la table un titre que la technologie d'assistance lit et que les utilisateurs voyants voient au-dessus de la grille C'est l'équivalent accessible de la phrase que vous écririez au-dessus de la table de toute façon Le générateur en ajoute un lorsque vous remplissez le champ de légende, et il y échappe comme n'importe quel autre texte Entre une légende et des en-têtes de portée, la sortie est une table dans laquelle un lecteur d'écran peut naviguer plutôt qu'une forme qu'il traverse.
Quelle est la différence entre les modes de coiffage ?
L'outil propose trois façons de fournir le style, car la direction que prend la table change ce qui fonctionne.
Le mode Classe ajoute des noms de classe au tableau et génère un bloc correspondant de CSS que vous pouvez déposer dans votre feuille de style. C'est le bon choix pour un site Web : le balisage reste propre, le style vit au même endroit et des fonctionnalités telles que l'utilisation de rayures zébrées tbody tr:nth-child(even)(en), qui ne fonctionne qu'à partir d'une feuille de style Le mode en ligne écrit plutôt les styles directement sur chaque élément avec style attributs. C'est un balisage plus laid, mais c'est ce dont vous avez besoin pour le courrier électronique HTML, où la plupart des clients se déshabillent <style> blocs et CSS externes, le style doit donc rouler sur chaque élément. Aucun mode ne génère du HTML sémantique simple sans classes ni aucun style du tout, ce que vous voulez lorsque vous disposez de votre propre système de conception et que vous avez juste besoin d'une structure correcte et accessible sur laquelle vous accrochez.
J'atteins le mode classe par défaut, le mode en ligne uniquement lorsque je colle dans un e-mail, et le mode aucun lorsque je dépose la table dans un site qui stylise déjà ses tables à l'échelle mondiale. L'outil vous permet de basculer entre elles sans réintégrer vos données, donc essayer les trois pour voir ce qui convient est quelques clics.
Comment utiliser le générateur ?
Le flux est de quatre étapes Collez des lignes séparées par des virgules ou par des onglets dans la zone de saisie ; le délimiteur est détecté automatiquement, et vous pouvez le remplacer si vos données sont ambiguës Décidez si la première ligne est un en-tête de colonne et si la première colonne de chaque ligne est un en-tête de ligne Ajoutez une légende, activez les lignes rayées, les bordures ou une mise en page compacte, et choisissez le CSS basé sur la classe, les styles en ligne ou le HTML simple. Cliquez ensuite sur Générer et copiez le HTML, ainsi que le CSS correspondant en mode classe.
L'analyse suit la RFC 4180, la norme informelle pour CSV, donc un champ enveloppé dans des guillemets doubles peut contenir le délimiteur et une citation doublée à l'intérieur d'un champ cité devient une citation simple. Cela signifie une cellule comme "Doe, Jane" reste une cellule plutôt que de se diviser à la virgule Et comme tout s'exécute dans votre navigateur, vous pouvez coller des données qui incluent les noms de clients, les chiffres internes ou tout ce que vous ne voudriez pas sur un serveur, et cela ne quitte jamais votre machine Ce modèle côté client est le même derrière le reste du site, décrit dans le outils en ligne de confidentialité des données guide.
Comment cela s'accorde-t-il avec les autres outils ?
Le générateur de table HTML se trouve dans un petit groupe d'outils qui prennent tous des données structurées et renvoient le balisage de nettoyage. Son voisin le plus proche est le Générateur de table de démarquage(en), qui fait le même travail mais génère un Markdown aromatisé à GitHub pour les README et les problèmes au lieu de HTML pour les pages Web. Lorsque votre tableau généré et le balisage n°39 ; s veulent ranger, ou que vous avez une pile de HTML de tableau manuscrit à réindenter, le Formateur HTML l'embellit Et quand vous vous déplacez entre les documents HTML et Markdown, le convertisseur HTML à Markdown gère l'aller-retour, tables incluses.
L'idée de connexion est que les données vivent dans une forme et que vous en avez besoin dans une autre, et un outil déterministe fait mieux la traduction que les balises d'édition manuelle d'une personne Si vous construisez pour le Web, le Boîte à outils pour les développeurs Web le résumé montre comment ceux-ci s'emboîtent et le Outils de productivité des développeurs le guide couvre l'ensemble plus large de petits utilitaires qui permettent de gagner quelques minutes chacun, plusieurs fois par jour.
Un exemple concret tiré de la rédaction d’une documentation
Permettez-moi de rendre cela concret Une grande partie de la documentation autour du site est un ensemble de comparaisons de caractéristiques et de tableaux de référence : quel outil fait quoi, quelles limites s'appliquent où, ce que signifie une option donnée La plupart de ces données commencent leur vie dans une feuille de calcul, car une feuille de calcul est l'endroit où il est facile de les éditer et de les trier. L'obtenir sur une page signifiait soit exporter vers Markdown, que certaines de mes pages ne restituent pas, soit taper à la main la table HTML, ce qui pour une référence de vingt lignes est une véritable misérable dizaine de minutes.
Maintenant, je copie les colonnes directement hors de la feuille de calcul, qui met les valeurs séparées par des onglets dans le presse-papiers, les colle dans le générateur et les laisse détecter automatiquement le délimiteur d'onglets. Je garde la première ligne comme en-tête, j'ajoute une légende décrivant le tableau, j'allume les lignes rayées et les bordures en mode classe et je copie à la fois le HTML et le CSS. Le balisage tombe dans la page, le CSS entre dans la feuille de style une fois et est réutilisé par chaque tableau après cela, et le tout prend moins d'une minute. Les cellules d'en-tête sortent comme <th scope="col">(traduction), donc la table est accessible sans que j'y pense, et chaque valeur est échappée, donc la ligne qui contient un < dans un code, la référence ne fait pas exploser la page.
La raison pour laquelle j'utilise le générateur plutôt que d'écrire ces tableaux à la main n'est pas que le HTML est dur, c'est que le HTML est ennuyeux et les parties ennuyeuses sont l'endroit où j'introduis des bugs Le déchargement du tag-typing, de l'échappement, et des attributs d'accessibilité à un outil signifie que le tableau est correct sur le premier coller, et je consacre mon attention sur le contenu du tableau au lieu de sa plomberie Pour le courriel, je régénère les mêmes données en mode en ligne, car les bandes d'outils de la newsletter <style> blocks et la version en ligne survit intacte au voyage.
Quelles sont les limites à connaître ?
Quelques bords honnêtes La première est que cet outil construit données les tableaux, le genre avec en-têtes et lignes de valeurs Ce n'est pas un outil de mise en page, et il ne fait pas colspan ou rowspan, les astuces de cellules fusionnées que vous voyez parfois dans les tableaux complexes Les cellules fusionnées rendent un tableau beaucoup plus difficile pour les lecteurs d'écran de naviguer de toute façon, et pour la grande majorité des données tabulaires, vous n'en avez pas besoin Si vous avez vraiment besoin d'un en-tête fusionné couvrant plusieurs colonnes, c'est-à-dire une modification manuelle du balisage généré, et le Formateur HTML le gardera rangé après.
La seconde est que le générateur lit vos données sous forme de texte et n'essaie pas d'être intelligent sur les types Une colonne de nombres est émise sous forme de texte dans chaque cellule, ce qui est exactement correct pour l'affichage ; il n'aligne pas les nombres à droite ou n'ajoute pas des milliers de séparateurs, car ce sont des décisions de style et de formatage qui vous appartiennent Ce qu'il garantit, c'est que la valeur que vous avez collée est la valeur dans la cellule, échappée et inchangée.
La troisième est l'ambiguïté du délimiteur La détection automatique fonctionne en trouvant le séparateur qui donne le nombre de colonnes le plus cohérent sur vos lignes, et elle est fiable pour les CSV et TSV propres Si vos données sont véritablement ambiguës, par exemple les valeurs qui contiennent des virgules non citées dans certaines lignes, la détection peut deviner faux, c'est pourquoi le délimiteur est une commande manuelle plutôt qu'une décision fixe Définissez-le explicitement et l'analyse est déterministe.
Enfin, le CSS généré en mode classe est un point de départ sensé, neutre : un fond d'en-tête léger, des bordures fines, un rembourrage confortable Il est destiné à être édité Changez les couleurs pour correspondre à votre marque, ajustez le rembourrage, laissez tomber le rayage ; c'est un CSS ordinaire avec des noms de classe clairs, et le travail tool' ; est de vous enregistrer la première ébauche, pas de dicter le look final.
Questions fréquentes
Qu'est-ce qu'un générateur de table HTML ? Un générateur de tableaux HTML convertit les lignes de données dans le balisage HTML qui les rend sous forme de tableau Vous collez des valeurs séparées par CSV ou par tabulations et il écrit un complet élément avec , « et les cellules, vous n'êtes donc pas obligé de taper chaque balise à la main ».
Comment convertir CSV en table HTML ? Collez votre CSV dans la zone de saisie, conservez la première ligne comme en-tête si elle contient des noms de colonnes, choisissez votre style, puis cliquez sur Générer L'outil détecte le délimiteur, construit le tableau et vous donne du HTML que vous pouvez copier directement dans une page.
Comment rendre la table accessible ? Utilisez des cellules d'en-tête et une légende Activez l'en-tête de la première ligne pour que les titres des colonnes deviennent [traduction], activez l'en-tête de la première colonne pour les étiquettes de ligne, et ajoutez une légende décrivant le tableau Les lecteurs d'écran annoncent ensuite l'en-tête correct pour chaque cellule.Quelle est la différence entre les modes de coiffage ? Le mode classe ajoute des noms de classe et un bloc CSS séparé, ce qui est le mieux pour un site Web Le mode en ligne écrit des styles directement sur chaque élément, qui survit à être collé dans un e-mail Le mode Aucun génère du HTML sémantique simple afin que vous puissiez appliquer votre propre feuille de style.
Les caractères spéciaux de mes données sont-ils échappés ? Oui. Chaque valeur de cellule est échappée au HTML, donc des caractères comme & lt ;, & gt ;, & amp ; et " ; sont écrits sous forme d'entités et s'affichent sous forme de texte au lieu d'être interprétés comme un balisage. Cela empêche le tableau de se briser lorsque les données contiennent des crochets angulaires ou des ampersands.
Peut-il gérer des virgules à l’intérieur d’une cellule ? Oui. L'analyseur suit la RFC 4180, donc un champ enveloppé dans des guillemets doubles peut contenir le délimiteur, et une guillemets doublés à l'intérieur d'un champ cité devient une guillemets simples Les guillemets cités restent une partie de la cellule plutôt que de démarrer une nouvelle colonne.
Mes données sont-elles téléchargées quelque part ? Non. La conversion se produit entièrement dans votre navigateur à l'aide de JavaScript sur votre appareil. Vos données ne sont jamais téléchargées, enregistrées ou stockées, et l'outil continue de fonctionner avec le réseau déconnecté une fois la page chargée.
Le générateur de table HTML est-il gratuit ? Oui. Il est entièrement gratuit sans inscription, sans filigrane et sans plafond d'utilisation. Générez autant de tableaux HTML que nécessaire pour les projets personnels ou commerciaux.
