Générateur de tableau HTML accessible : CSV vers HTML avec légende | We.Inc
Collez du CSV ou partez d'un modèle de liste de prix ou d'horaires. Obtenez un vrai tableau HTML avec légende, cellules d'en-tête et scope, échappé en toute sécurité, plus un petit bloc CSS responsive à copier.
Collez des lignes depuis un tableur ou un CSV, ou partez d'un modèle de liste de prix de service ou d'horaires d'ouverture. Vous obtenez un vrai tableau HTML, avec une légende, des cellules d'en-tête et des attributs scope que les lecteurs d'écran utilisent, plus un court bloc CSS qui le garde lisible sur téléphone. Chaque valeur est échappée, pour que le texte collé ne puisse pas casser votre page. Tout se passe dans votre navigateur. Rien de ce que vous saisissez n'est envoyé à We.Inc ni à personne d'autre, et tout disparaît quand vous fermez l'onglet.
Choisissez un modèle ou collez vos propres lignes. Virgules, tabulations (depuis un tableur) et points-virgules fonctionnent tous, et les valeurs entre guillemets contenant des virgules restent ensemble.
Choisissez si la première ligne contient les en-têtes de colonnes et si la première colonne étiquette chaque ligne. Elles deviennent des cellules th avec des attributs scope.
Écrivez une légende. Elle nomme le tableau pour les utilisateurs de lecteurs d'écran et apparaît au-dessus pour tout le monde.
Choisissez un style et prévisualisez-le en largeur bureau et téléphone. Les larges tableaux défilent latéralement dans leur propre encadré sur petits écrans au lieu de s'écraser.
Copiez le HTML et le CSS, ou téléchargez les deux en un seul fichier.
N'utilisez un tableau que pour des données en lignes et colonnes, comme des prix ou des horaires. Pour la mise en page, utilisez plutôt le CSS.
Gardez les en-têtes courts. Ils se répètent à chaque annonce du lecteur d'écran.
Mettez les unités dans l'en-tête (Prix, USD) plutôt que dans chaque cellule.
Ne fusionnez pas de cellules sauf nécessité. Les cellules fusionnées sont difficiles à suivre avec un lecteur d'écran.
Vérifiez votre tableau en largeur téléphone. S'il nécessite plus d'un balayage latéral, envisagez de le diviser.
Questions fréquentes
Qu'est-ce qui rend un tableau HTML accessible ?
Une légende qui le nomme, des cellules d'en-tête th pour les titres de colonnes et de lignes, et des attributs scope qui indiquent si un en-tête appartient à une colonne ou une ligne. Les lecteurs d'écran les utilisent pour annoncer à quel en-tête chaque valeur appartient. Ce générateur ajoute les trois.
Pourquoi ne pas construire le tableau avec des div ?
Une grille de div peut ressembler à un tableau, mais les technologies d'assistance ne peuvent pas dire quelle cellule appartient à quel en-tête. Un vrai élément tableau porte ce sens gratuitement.
Comment un tableau responsive est-il géré ?
Le tableau se trouve dans un encadré qui défile latéralement sur écrans étroits. L'encadré est focalisable et étiqueté avec la légende, les utilisateurs de clavier peuvent donc aussi le faire défiler.
Mes données sont-elles échappées ?
Oui. Les esperluettes, chevrons et guillemets dans vos cellules sont convertis en entités HTML, une cellule contenant <script> s'affiche donc comme texte au lieu de s'exécuter.
Puis-je coller directement depuis Excel ou Google Sheets ?
Oui. Les cellules copiées arrivent séparées par des tabulations, que l'outil détecte automatiquement.
Est-ce gratuit ?
Oui, sans inscription. Cela s'exécute dans votre navigateur.
Les listes de prix et horaires sont des tableaux
La plupart des sites de petites entreprises ont au moins deux tableaux : ce que coûtent les choses et quand vous êtes ouvert. Les deux sont de vraies données tabulaires, elles devraient donc être balisées comme des tableaux, avec chaque prix lié à son service et chaque horaire lié à son jour.
Les modèles ici vous font démarrer avec ces deux formes. Remplacez les lignes d'exemple par les vôtres avant de publier ; ce sont des valeurs indicatives, pas de vrais prix.