Generatore di Tabelle HTML Accessibili: CSV in HTML con Titolo | We.Inc
Incolla CSV o parti da un preset listino prezzi o orari. Ottieni una vera tabella HTML con titolo, celle di intestazione e scope, escapata in sicurezza, più un piccolo blocco CSS responsive da copiare.
Incolla righe da un foglio di calcolo o CSV, o parti da un preset listino prezzi di servizio o orari di apertura. Ottieni una tabella HTML corretta, con un titolo, celle di intestazione e attributi scope che gli screen reader usano, più un breve blocco CSS che la mantiene leggibile sui telefoni. Ogni valore è escapato, così il testo incollato non può rompere la tua pagina. Tutto gira nel tuo browser. Niente di ciò che digiti viene inviato a We.Inc o a chiunque altro, e sparisce quando chiudi la scheda.
Scegli un preset o incolla le tue righe. Virgole, tabulazioni (da un foglio di calcolo) e punti e virgola funzionano tutti, e i valori tra virgolette con virgole dentro restano uniti.
Scegli se la prima riga contiene le intestazioni di colonna e se la prima colonna etichetta ogni riga. Quelle diventano celle th con attributi scope.
Scrivi un titolo. Nomina la tabella per gli utenti di screen reader e appare sopra di essa per tutti.
Scegli uno stile e vedi l'anteprima a larghezza desktop e telefono. Le tabelle larghe scorrono di lato dentro la propria casella su schermi piccoli invece di schiacciarsi.
Copia l'HTML e il CSS, o scarica entrambi come un unico file.
Usa una tabella solo per dati con righe e colonne, come prezzi o orari. Per il layout di pagina, usa invece il CSS.
Mantieni i titoli brevi. Si ripetono in ogni annuncio dello screen reader.
Metti le unità nell'intestazione (Prezzo, USD) piuttosto che in ogni cella.
Non unire le celle a meno che non sia necessario. Le celle unite sono difficili da seguire con uno screen reader.
Controlla la tua tabella a larghezza telefono. Se richiede più di uno scorrimento laterale, considera di dividerla.
Domande frequenti
Cosa rende accessibile una tabella HTML?
Un titolo che la nomina, celle di intestazione th per le intestazioni di colonna e riga, e attributi scope che dicono se un'intestazione appartiene a una colonna o una riga. Gli screen reader li usano per annunciare a quale intestazione appartiene ogni valore. Questo generatore aggiunge tutti e tre.
Perché non costruire la tabella con dei div?
Una griglia di div può sembrare una tabella, ma la tecnologia assistiva non può dire quale cella appartiene a quale intestazione. Un vero elemento tabella porta quel significato gratuitamente.
Come viene gestita una tabella responsive?
La tabella si trova in una casella che scorre di lato su schermi stretti. La casella è focalizzabile ed etichettata con il titolo, così anche gli utenti di tastiera possono scorrerla.
I miei dati sono escapati?
Sì. Ampersand, parentesi angolari e virgolette nelle tue celle sono convertiti in entità HTML, così una cella che contiene <script> appare come testo invece di essere eseguita.
Posso incollare direttamente da Excel o Google Sheets?
Sì. Le celle copiate arrivano separate da tabulazioni, che lo strumento rileva automaticamente.
È gratuito?
Sì, senza registrazione. Gira nel tuo browser.
Listini prezzi e orari di apertura sono tabelle
La maggior parte dei siti di piccole imprese hanno almeno due tabelle: quanto costano le cose e quando sei aperto. Entrambi sono dati tabulari genuini, quindi dovrebbero essere marcati come tabelle, con ogni prezzo legato al suo servizio e ogni orario legato al suo giorno.
I preset qui ti fanno partire con quelle due forme. Sostituisci le righe di esempio con le tue prima di pubblicare; sono segnaposto, non prezzi reali.