Conversione da CSV a tabella HTML
Converte un file CSV in un frammento HTML con i marcatori <table><tr><td>. Potete indicare il carattere separatore, la presenza di una riga d'intestazione e l'uso di thead e tbody; il risultato si può vedere subito in anteprima, copiare e scaricare. Il contenuto del file è elaborato nel navigatore e non viene trasmesso ad alcun servente.
| Carattere separatore |
|
|---|---|
| Considera la prima riga come intestazione | |
| Racchiudi in thead e tbody |
Anteprima
Codice HTML
Copiato!Inserite un file CSV per vedere qui la tabella HTML.
Corrispondenza fra le righe del CSV e la tabella HTML
| Una riga del CSV | name,age,city |
|---|---|
| Notazione HTML risultante | <tr><td>name</td><td>age</td><td>city</td></tr> |
Se si usa la prima riga come intestazione, essa diventa una riga di marcatori <th>, mentre le righe di dati successive diventano righe di marcatori <td>.
Che cos'è la conversione da CSV a tabella HTML
Scrivere una tabella in HTML obbliga ad allineare un <tr> per riga e un <td> per cella, cosa laboriosa a mano. Questo strumento legge un CSV e lo converte in un frammento HTML in forma di <table>. Il risultato si vede in anteprima sul posto, così sapete prima di copiare come si presenterà a destinazione.
I caratteri <, > e & presenti nelle celle vengono convertiti automaticamente in entità HTML, perciò dati con quei simboli non rompono la resa. Potete inoltre scegliere se racchiudere la tabella in thead e tbody. Semanticamente conviene includerli, ma in ambienti dall'interpretazione incerta — la posta HTML in primo luogo — la forma minima senza di essi tiene meglio.
Come costruire una tabella HTML
- Incollare il CSV Incollate il CSV nel campo d'inserimento. Se l'avete copiato da un foglio di calcolo, cambiate il separatore in tabulazione.
-
Decidere sulla riga di intestazione
Attivate l'opzione relativa e la prima riga verrà emessa con i tag
<th>. - Decidere su thead e tbody Di regola potete lasciarli attivi. Disattivateli per ambienti dalla resa incerta, come la posta HTML.
- Controllare l'anteprima e copiare Guardate la tabella così come viene effettivamente resa e, se vi va bene, copiate il codice HTML e incollatelo.
Consigli per sfruttarlo al meglio
- Per incollare una tabella in un messaggio di posta in HTML o in un vecchio sistema di gestione dei contenuti privo di Markdown, la struttura minima senza thead e tbody risulta più maneggevole.
- I caratteri
<,>e&presenti nelle celle sono convertiti automaticamente nelle rispettive entità HTML: il codice si può quindi incollare così com'è senza rovinare la visualizzazione. - L'anteprima mostra il risultato reso direttamente dal navigatore: potete verificare come apparirà nella destinazione prima ancora di copiarlo.
- Usandolo insieme agli strumenti affini di conversione da CSV a Markdown e da CSV a JSON, potete trasformare uno stesso file CSV in tre formati diversi secondo l'uso.
Quando convertire un CSV in HTML è utile
Mettere una tabella su un blog o un CMS
Anche su un CMS privo di Markdown, incollare nella modalità di modifica HTML permette di pubblicare una tabella.
Inserire una tabella in una posta HTML
La posta non interpreta il Markdown: una tabella richiede HTML. La forma minima, tolti thead e tbody, tiene meglio.
Fabbricare un modello prima della realizzazione
Nella fase di progettazione delle schermate, trasformate sul momento in HTML una tabella vicina ai dati reali. Serve anche a verificare l'applicazione degli stili.
Pubblicare senza rischio dati con simboli
I valori che contengono parentesi angolari o e commerciali vengono sottoposti a escape automaticamente, così l'impaginazione non si rompe a destinazione.
Il vocabolario delle tabelle HTML
- L'elemento table
- Il tag HTML che rappresenta una tabella. Per il suo uso proprio — esprimere dati reali con righe e colonne — resta ancora oggi il tag adatto.
- th e td
<th>è una cella di intestazione e<td>una cella di dati. Distinguerle permette ai lettori di schermo di trasmetterne la corrispondenza.- thead e tbody
- Tag che separano semanticamente la parte di intestazione da quella del corpo. Incidono anche sulla ripetizione dell'intestazione nella stampa di una tabella lunga.
- Entità HTML
- Una scrittura che rende i simboli senza rischio.
<viene così sostituito da<. - Impaginazione a tabelle
- L'antica tecnica di costruire l'intera struttura a colonne di una pagina con marcatura di tabella. Oggi è ritenuta un antipattern dichiarato.
Domande frequenti
<table>: potete incollarlo così com'è nella modalità di modifica HTML di WordPress o nel corpo di un messaggio in HTML.
A proposito — perché il marcatore <table> sopravvive ancora oggi
Nella seconda metà degli anni Novanta, agli albori del web, dominava l'impaginazione con il marcatore <table>, con cui si costruiva l'intera struttura della pagina. I fogli di stile avevano allora scarse capacità espressive e l'unico modo per ottenere una disposizione a più colonne era la tabella: il codice HTML di quegli anni traboccava di <table> usati per scopi estranei al loro significato originario, cioè i dati in forma tabellare.
Oggi che i fogli di stile sono maturi e che Flexbox e Grid si sono diffusi, l'uso delle tabelle a fini di impaginazione è considerato un chiaro antimodello. Là dove si tratta però del loro scopo proprio, cioè rappresentare dati reali organizzati in righe e colonne, <table> resta il marcatore più appropriato e il migliore sul piano dell'accessibilità, perché i lettori di schermo sanno riflettere nella lettura il rapporto fra <th> e <td>.
L'esigenza di incollare il contenuto di un file CSV in un articolo o in una lettera informativa resta tuttora forte, perché i messaggi di posta in HTML non interpretano Markdown e alcuni sistemi di gestione dei contenuti ne sono privi. Uno strumento che con un clic trasforma il risultato di un foglio di calcolo in una tabella HTML risponde proprio a questa esigenza pratica, modesta ma consolidata.