Generatore tabelle HTML

Crea tabelle HTML visivamente e copia il codice.

Nessun dato lascia il tuo dispositivo

Come usare

  1. Definisci il numero di righe e di colonne, poi clicca su Applica.
  2. Inserisci i dati direttamente nelle celle modificabili.
  3. Attiva le opzioni come riga di intestazione, zebrate, bordi e hover.
  4. Clicca su Copia l'HTML per copiare il codice generato.

Domande frequenti

Il codice generato include CSS?

Sì. Quando attivi opzioni come zebrate, bordi o hover, lo strumento genera stili CSS inline nell'HTML affinché la tabella funzioni ovunque.

Qual è la dimensione massima della tabella?

Fino a 50 righe e 20 colonne. Per insiemi di dati più grandi, considera l'uso di uno strumento di foglio di calcolo e l'esportazione in HTML.

Come funziona

  1. Definisci le dimensioni della tabella: inserisci il numero di righe e di colonne per generare la griglia iniziale.
  2. Compila i dati: clicca sulle celle per inserire il contenuto, aggiungi righe di intestazione e attiva bordi e zebrature.
  3. Stilizza la tabella: scegli lo stile dei bordi, il colore di sfondo delle intestazioni, la zebratura delle righe e il padding delle celle.
  4. Copia l'HTML: il markup di tabella generato include un <thead> con intestazioni <th> e una struttura semantica corretta.

Perché usare il generatore di tabelle HTML?

Scrivere a mano il markup di tabella HTML è noioso e ripetitivo, soprattutto per tabelle con molte righe o intestazioni complesse. Ottenere l'annidatura corretta di <table>, <thead>, <tbody>, <tr>, <th> e <td> ogni volta è soggetto a errori. Questo generatore produce tabelle HTML semanticamente corrette e accessibili con attributi scope sulle celle di intestazione per la compatibilità con gli screen reader, un supporto corretto delle didascalie e CSS pulito per i bordi e gli stati di hover. Usalo per tabelle di prezzi, tabelle di confronto, tabelle di dati e documentazione.

Caratteristiche delle tabelle

Cos'è un generatore di tabelle HTML?

Un generatore di tabelle HTML ti dà una griglia visiva che puoi riempire come un foglio di calcolo, poi emette il markup

equivalente con tutti gli elementi semantici giusti. Invece di digitare
, , , , separato per la riga di intestazione e CSS inline per le opzioni visive che spunti. L'output è pronto per il copia incolla per post di blog, documentazione, modelli email e qualsiasi contesto che accetti HTML. La griglia visiva gira interamente nel tuo browser così nessun dato lascia il tuo dispositivo.

Cosa c'è dentro il generatore

La riga di controllo in alto contiene due input numerici (righe e colonne), un pulsante Applica e quattro caselle di controllo per opzioni (riga di intestazione, righe a strisce, con bordi, effetto hover). Regola prima le dimensioni, clicca Applica, poi spunta le opzioni che corrispondono al tuo design. La griglia modificabile sotto si aggiorna istantaneamente e l'HTML generato nella textarea riflette ogni cambio che fai.

La griglia modificabile è una vera tabella HTML con input in ogni cella, così puoi spostarti tra le celle con tab, incollare una colonna di valori, o usare la navigazione da tastiera. La riga di intestazione (quando spuntata) viene renderizzata con uno sfondo colorato così puoi vedere a colpo d'occhio quale riga diventerà

e a mano e contare i tag di apertura e chiusura, imposti le dimensioni, digiti i dati e copi il risultato. L'output è HTML che si convalida e si legge correttamente per i lettori di schermo.

Gli elementi semantici di tabella sono in HTML dal draft 1993 e sono stati formalizzati in HTML 2.0 (1995). Esistono per una ragione: dati tabellari. Una tabella di prezzi, una matrice di confronto, una griglia di dati ordinabile, una tavola periodica degli elementi, qualsiasi collezione rettangolare di fatti dove righe e colonne portano significato. Le tabelle leggono correttamente con la tecnologia assistiva quando usate per dati tabellari e creano incubi di accessibilità quando usate per il layout di pagina (l'era di

e Flexbox ha posto fine a quell'abuso).

Questo generatore produce markup accessibile con attributi scope sulle celle di intestazione, un

nell'output. Il riquadro di output sotto mostra l'HTML risultante in monospace, pronto da copiare.

Tre pulsanti di azione si trovano in fondo: Copia HTML scrive il markup negli appunti tramite l'API Clipboard, Attiva Anteprima mostra una versione renderizzata sotto così puoi confermare lo styling, e Cancella Celle svuota i dati senza resettare le dimensioni. L'anteprima usa lo stesso CSS dell'output, così quello che vedi è quello che il tuo blog o doc visualizzerà.

Storia e contesto

Tim Berners-Lee propone le tabelle (1993)

Il primo draft HTML a includere

è stato la proposta HTML 3.0 di Dave Raggett alla fine del 1993. L'elemento è stato modellato sull'ambiente tabular LaTeX e sul modello di tabella CALS usato per la documentazione tecnica. Mosaic e i primi Netscape renderizzavano le tabelle non appena il markup è stato proposto, anche prima della standardizzazione, motivo per cui le tabelle sono state una delle primissime primitive visive sul web.

RFC 1942 standardizza il modello di tabella (1996)

L'RFC 1942 di Dave Raggett (maggio 1996) ha dato alle tabelle HTML la loro prima specifica formale, incluso thead, tbody, tfoot, colgroup e l'attributo scope per l'accessibilità. Lo stesso anno, la raccomandazione W3C HTML 3.2 ha adottato il modello di tabella essenzialmente verbatim. La struttura è rimasta in gran parte invariata per tre decenni.

L'era oscura delle tabelle di layout (dal 1996 al 2005)

Prima che il CSS fosse ampiamente supportato, i designer usavano le tabelle per posizionare elementi di pagina: una tabella a quattro celle conteneva header, nav sinistro, contenuto e footer. La tecnica funzionava ma produceva markup illeggibile, rompeva i lettori di schermo e rendeva doloroso il redesign. L'evangelizzazione CSS di Eric Meyer (2000-2005) e Designing With Web Standards di Jeffrey Zeldman (2003) hanno posto fine all'era, riportando le tabelle al loro scopo semantico: dati tabellari.

Valori CSS table-* display (dal 2004 in poi)

CSS 2.1 ha aggiunto display: table, table-row e table-cell, così potevi ottenere un comportamento di layout simile a tabella su elementi non-tabella. Questo è stato utile per il breve periodo in cui Flexbox e Grid non erano ancora supportati (circa dal 2010 al 2015). Oggi, display: grid e display: flex hanno sostituito questi valori CSS table per il layout e le tabelle vere sono riservate ai dati.

Ruolo ARIA grid e accessibilità (2014)

WAI-ARIA 1.0 (2014) ha introdotto role=grid per tabelle interattive e ha chiarito come i lettori di schermo dovrebbero annunciare le intestazioni di tabella tramite l'attributo scope e il pattern headers/id. I lettori di schermo moderni (NVDA, JAWS, VoiceOver) leggono correttamente una

con markup appropriato con contesto di colonna e riga, che è impossibile da replicare con griglie basate su
.

Pattern di tabelle responsive (dal 2011 a oggi)

Quando l'iPhone ha reso dominanti gli schermi piccoli, i designer dovevano capire come mostrare tabelle larghe su viewport stretti. L'articolo Filament Group 2011 sulle tabelle responsive ha avviato un'ondata di pattern: scorrimento orizzontale, righe impilate su mobile, colonne che collassano per priorità. Il CSS Working Group sta lavorando su container query e subgrid per rendere questi pattern più facili; per ora, l'approccio standard è avvolgere la tabella in overflow-x: auto.

Flussi pratici

Tabelle di prezzi per una landing page SaaS

Tre colonne (Free, Pro, Enterprise) per dieci o più righe di funzionalità. Spunta riga di intestazione per rendere i nomi dei piani celle

, spunta bordi per separazione chiara, lascia strisce disattivato se il tuo design ha i propri sfondi di riga. Copia l'HTML, incollalo nel tuo CMS o sito statico e aggiungi una sottile classe wrapper per il tema.

Matrice di confronto per recensioni di blog

Quando recensisci cinque strumenti attraverso otto criteri, una tabella con righe a strisce e celle con bordi si legge più chiaramente di una lista a pallini. Spunta strisce, bordi e riga di intestazione; digita o incolla i dati; copia. Il markup semantico rende il confronto leggibile in lettori di feed, servizi di archivio e lettori di schermo.

Tabella di riferimento nella documentazione API

Le docs API spesso mostrano nome del parametro, tipo, default e descrizione in forma tabellare. Il generatore ti dà le quattro colonne con una riga di intestazione, riempi i parametri, copi l'HTML e incolli in Markdown che supporta HTML grezzo, o nel tuo framework di docs (Docusaurus, MkDocs, Hugo). L'attributo scope rende le colonne navigabili nei lettori di schermo.

Newsletter email (con avvertenza)

I client email (specialmente Outlook 2007-2019) hanno un supporto CSS estremamente incoerente, quindi l'HTML delle newsletter usa ancora tabelle per il layout (un'eccezione alla regola del no-layout-tabelle). Per tabelle di dati dentro una newsletter, l'output con stile inline del generatore funziona nella maggior parte dei client. Testa in Litmus o Email on Acid prima di inviare a una grande lista.

Mockup veloce di dashboard interna

Quando si prototipa una dashboard admin interna, una tabella HTML statica con righe a strisce sembra più vicina al prodotto finale del testo placeholder. Genera la struttura, incollala nel componente React o Vue e sostituisci i dati statici con un loop legato ai dati più tardi.

Generazione PDF da HTML

Quando si genera PDF da HTML con strumenti come Puppeteer, wkhtmltopdf o stampa-in-PDF di Chrome, le tabelle si renderizzano in modo affidabile attraverso tutti i motori. Usa il generatore per costruire la tabella, incolla nel tuo modello e esegui la pipeline PDF. L'opzione bordi dà linee stampate nitide senza CSS extra.

Insidie comuni

Usare tabelle per il layout di pagina

Le tabelle sono per dati tabellari, non per struttura di pagina. Una

con una riga e tre colonne per posizionare header, contenuto e barra laterale fa leggere la pagina come tabella di dati ai lettori di schermo, il che è confuso. Usa Flexbox o CSS Grid per il layout invece. L'unica eccezione è l'email HTML, dove le tabelle di layout sono ancora necessarie per il rendering cross client.

Attributo scope mancante sulle celle di intestazione

Ogni

vuoto si legge come vuoto ai lettori di schermo, il che suona strano quando si elencano 50 voci. Se una cella legittimamente non ha dati, scrivi o . Attenzione che l'entità trattino introduce un em dash, che questo sito evita; usa un trattino, "N/D" o "Non disponibile" invece.

Ordinamento e filtraggio senza miglioramento progressivo

Una tabella HTML statica non può essere ordinata o filtrata dagli utenti. Se il tuo pubblico ha bisogno di interattività, integra DataTables, AG Grid o Tanstack Table. Il generatore produce la tabella semantica sottostante, che diventa la fondazione per queste librerie. La navigazione da tastiera e i ruoli ARIA arrivano con la libreria.

Privacy e gestione dei dati

Tutto gira nel tuo browser. La griglia visiva, l'output HTML e l'anteprima vivono tutti in JavaScript lato client. Non inviamo i tuoi dati da nessuna parte, non registriamo input e non memorizziamo nulla in cookie o localStorage. Ricarica la pagina e la tabella precedente è scomparsa.

Una volta caricata la pagina, lo strumento funziona offline. Puoi disconnetterti dalla rete e costruire tabelle contenenti dati dei clienti, prezzi interni o qualsiasi altro contenuto confidenziale senza che tocchi un server di terze parti. Il pulsante Copia HTML usa l'API Clipboard che richiede un gesto utente e non è osservabile da parti esterne.

Quando non usare una tabella HTML statica

Layout di pagina (usa Flexbox o Grid)

Se vuoi una barra laterale accanto al contenuto principale, una griglia di schede o una barra di navigazione, usa CSS Flexbox (display: flex) o CSS Grid (display: grid). Le tabelle per il layout producono output confuso del lettore di schermo e HTML inflessibile che non si adatta ai cambiamenti del viewport come fanno le primitive di layout moderne.

Grandi dataset (sopra le 1000 righe)

Una tabella HTML statica da 10.000 righe è lenta da renderizzare e consuma memoria significativa. Usa una libreria di griglia virtualizzante (TanStack Virtual, React Window, AG Grid) che renderizza solo le righe visibili. L'HTML statico va bene per sotto poche centinaia di righe.

Manipolazione interattiva dei dati (usa una libreria di griglia)

Quando gli utenti devono ordinare, filtrare, modificare, raggruppare o paginare, hai bisogno di una vera libreria di griglia. AG Grid, TanStack Table, DataTables e Bootstrap Table producono tutti markup

dovrebbe avere scope="col" o scope="row" così i lettori di schermo sanno quale intestazione si applica a quale cella di dati. Senza scope, il lettore deve indovinare, spesso producendo contesto sbagliato. Questo generatore emette scope automaticamente per le righe di intestazione. Se modifichi l'HTML manualmente, mantieni gli attributi scope al loro posto.

Intestazioni complesse (multi livello) senza headers/id

Le tabelle con intestazioni di colonna raggruppate (Q1, Q2 ciascuna divisa in Gen, Feb, Mar) necessitano dell'attributo headers su ogni cella di dati che punta all'id delle intestazioni rilevanti. Lo scope da solo è insufficiente per intestazioni a due livelli. Il generatore non produce intestazioni complesse; per queste, modifica l'HTML manualmente o usa un plugin CMS che supporta il pattern.

Tabelle larghe su mobile

Una tabella a sei colonne è illeggibile su uno schermo di telefono largo 375 pixel. Il pattern mobile friendly predefinito è avvolgere la tabella in un div con overflow-x: auto così l'utente può scorrere orizzontalmente. Per tabelle pesanti di colonne, considera di impilare le righe in mini schede su piccoli schermi tramite @media (max-width). L'output del generatore non è auto avvolto; aggiungi il wrapper nel tuo CSS.

Celle vuote senza contenuto esplicito

Un

--
accessibile sotto il cofano aggiungendo interattività. L'output del generatore è il punto di partenza, non il traguardo.

Grafici e diagrammi (usa SVG o canvas)

Un grafico a barre non è una tabella, è una visualizzazione. Usa Chart.js, D3, Recharts o qualsiasi libreria di grafici basata su SVG. Se hai bisogno sia di un grafico che di una tabella dati di supporto per accessibilità, renderizza il grafico e posiziona una

con gli stessi dati vicino (o nascosti in una classe visivamente nascosta) così gli utenti del lettore di schermo ottengono i numeri.

Altre domande

Dovrei sempre usare thead e tbody?

Per tabelle con una riga di intestazione, sì.

separa le righe di intestazione dalle righe di dati, che permette ai browser di congelare l'intestazione su tabelle lunghe e permette ai lettori di schermo di annunciare correttamente le intestazioni. Il generatore include thead automaticamente quando l'opzione riga di intestazione è spuntata. Per tabelle senza intestazione, puoi omettere entrambi, ma è economico includere per completezza.

Quando uso scope="col" vs scope="row"?

scope="col" va su celle

che etichettano una colonna (la riga superiore di intestazioni). scope="row" va su celle che etichettano una riga (la cella più a sinistra quando ogni riga ha un nome). La maggior parte delle tabelle ha solo intestazioni di colonna, quindi scope="col" è il caso comune. Se hai entrambi, segna ciascuno con lo scope appropriato.

Come faccio una tabella ordinabile?

Usa una libreria JavaScript che aggiunge clic per ordinare al markup

esistente. Sortable.js, TanStack Table e DataTables fanno tutti questo. Il puro CSS non può ordinare. L'output del generatore è la fondazione statica; integra la libreria sopra nel tuo progetto finale. Per accessibilità, la libreria dovrebbe aggiungere aria-sort alla colonna attiva.

Qual è il miglior pattern responsive?

Il più semplice e accessibile è overflow-x: auto su un div di avvolgimento, che preserva la semantica della tabella permettendo agli utenti di scorrere orizzontalmente. Per tabelle pesanti di colonne, il pattern di righe impilate (display: block sui td a larghezze strette, con etichette di dati tramite attributi data-label) legge ogni riga come una lista etichettata su mobile. Entrambi sono validi; scegli in base al caso d'uso leggere vs confrontare della tabella.

Posso usare tabelle HTML in Markdown?

La maggior parte dei processori Markdown (GitHub Flavored Markdown, Pandoc, MDX, MkDocs, Hugo) accetta HTML grezzo insieme alla sintassi Markdown, quindi puoi incollare l'output del generatore direttamente. La sintassi di tabella nativa di Markdown è più semplice ma manca di colspan, rowspan, scope e styling, quindi per qualsiasi cosa oltre una griglia semplice, HTML è meglio. Nota: alcuni parser Markdown rigorosi (CommonMark senza estensioni) ignorano l'HTML per impostazione predefinita.

Come faccio lo stile dei colori di riga alternati senza CSS?

Spunta l'opzione Righe a Strisce nel generatore. L'output include attributi di stile inline su ogni altra riga, quindi le strisce sopravvivono anche in contesti dove il CSS viene rimosso (alcuni client webmail). Se il tuo ambiente permette CSS esterno, preferisci tr:nth-child(even) in un foglio di stile, che è più pulito degli stili inline e più facile da aggiornare.

Strumenti correlati