Generatore di tabelle HTML

Come generare una tabella HTML

1. Compila la griglia. Usa Aggiungi riga, Aggiungi colonna, Rimuovi l’ultima riga e Rimuovi l’ultima colonna, oppure i pulsanti × accanto a ogni riga e colonna. Nuova tabella vuota ricomincia da una griglia vuota 3 × 3.
2. Per riutilizzare dati esistenti, incolla un CSV o delle celle copiate da Excel, LibreOffice o Google Fogli in Importa dati CSV o da un foglio di calcolo, controlla il Delimitatore e clicca su Importa. Puoi anche incollare un blocco di celle di un foglio di calcolo direttamente in una cella qualsiasi della griglia. Se il tuo CSV usa il punto e virgola, come spesso accade con Excel in italiano, puoi anche scegliere esplicitamente Punto e virgola (;).
3. Aggiungi una Didascalia e scegli se La prima riga è una riga di intestazione e se La prima colonna è una colonna di intestazione.
4. In Stile, scegli Nessuno stile, Classe CSS o Stili inline, e regola se vuoi il Colore del bordo, lo Sfondo dell’intestazione e le Righe alternate.
5. Controlla l’Anteprima, poi clicca su Copia HTML o scarica il codice come file .html.

Markup accessibile per le tabelle

Una tabella è accessibile solo quando gli screen reader riescono a capire quali celle sono intestazioni e cosa descrivono. Questo strumento scrive la struttura raccomandata dallo standard HTML e dalle tecniche WCAG:

• <caption> dà un nome alla tabella. Gli screen reader lo annunciano quando si entra nella tabella, e aiuta ogni lettore a capire cosa sta guardando. Tienila breve e descrittiva.
• <thead> e <tbody> separano la riga di intestazione dalle righe di dati. I browser possono ripetere il <thead> su ogni pagina stampata.
• <th scope="col"> marca ogni intestazione di colonna, e con La prima colonna è una colonna di intestazione, <th scope="row"> marca la prima cella di ogni riga. Quando chi usa uno screen reader si sposta su una cella di dati, il software può leggere ad alta voce le intestazioni corrispondenti, per esempio “Pro, Prezzo, 12 €”.

Usa le tabelle solo per dati tabellari, mai per l’impaginazione della pagina. Evita le celle unite quando puoi: le griglie semplici con una riga di intestazione e, se serve, una colonna di intestazione sono le più facili da leggere con le tecnologie assistive.

Opzioni di stile

• Nessuno stile scrive un markup semplice che eredita gli stili delle tabelle del tuo sito. È la scelta migliore per un CMS o un sito con un design system.
• Classe CSS aggiunge class="…" alla <table> e mostra un blocco di CSS corrispondente da incollare nel tuo foglio di stile. Il Nome della classe viene ripulito lasciando solo lettere, cifre, trattini e underscore, così è sempre un selettore valido.
• Stili inline mette attributi style su ogni elemento. È prolisso, ma è ciò che serve per le email HTML, dato che molti client di posta ignorano i blocchi <style>. Il pulsante Scarica aggiunge il CSS in un elemento <style> quando usi una classe.

Nel CSS vengono scritti solo veri colori esadecimali provenienti dai selettori di colore, quindi nei tuoi stili non può finire nulla di inatteso.

Escape e sicurezza

Ogni cella viene protetta con l’escape: <, > e & diventano <, > e &, così un testo come <b> o a < b compare esattamente come l’hai scritto invece di essere interpretato come markup. Gli a capo dentro le celle importate diventano <br>. L’anteprima è costruita solo da questo markup protetto e passa attraverso un sanitizzatore che lascia soltanto gli elementi della tabella, quindi uno script incollato non può mai essere eseguito.