CSV in Tabella HTML

Inserire una tabella di dati in un post di blog, wiki interno o newsletter via email significa solitamente combattere con l’editor di tabelle del tuo CMS. Incolla il CSV qui invece: la prima riga diventa celle <th>, ogni altra riga diventa <td>, e il tutto è racchiuso in un elemento <table> minimale senza stili in linea. Markup pulito che utilizza qualsiasi CSS il tuo sito fornisce.

Come avviene la conversione

  1. 1

    Incolla il CSV

    Le interruzioni di riga dividono le righe; `str_getcsv` analizza ogni riga in modo che le virgole tra virgolette e le virgolette con escape siano gestite correttamente.

  2. 2

    Attiva la modalità intestazione

    Quando attivata, la prima riga viene emessa con celle `<th>`; quando disattivata, ogni riga è una semplice `<td>`.

  3. 3

    I valori vengono sottoposti a escape HTML

    Il convertitore chiama la funzione helper e() di Laravel in modo che `<`, `>` e `&` vengano sottoposti a escape in modo sicuro nell'output.

  4. 4

    Copia il markup

    L'HTML è indentato di due spazi per leggibilità; inseriscilo direttamente in un file Blade, un post Markdown o una vista sorgente WYSIWYG.

Stile e accessibilità per l'output

Il convertitore emette HTML strutturalmente semplice, nessuna classe, nessuno stile in linea, nessun wrapper <thead> o <tbody>. Questo mantiene l’output portatile, ma potresti volerlo abbellire.

Un foglio di stile minimale

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
th { background: #f9fafb; font-weight: 600; }
tr:nth-child(even) td { background: #fafafa; }

Vantaggi rapidi per l’accessibilità

  • Avvolgi la prima riga in un <thead> se hai tabelle lunghe; i lettori di schermo annunciano quindi le colonne di intestazione mentre gli utenti si muovono tra le righe. Il convertitore non lo fa automaticamente per mantenere l’output minimale.
  • Aggiungi un elemento <caption> sopra la tabella con una descrizione in un linguaggio semplice di cosa rappresentano i dati.
  • Usa scope="col" su celle <th> se la tua riga di intestazione descrive colonne, scope="row" se la prima colonna identifica righe.

Quando l’HTML non è il formato giusto

Se la destinazione è Markdown, usa invece il Convertitore da CSV a Markdown. Se la destinazione è un database, il Convertitore da CSV a SQL produce istruzioni INSERT che puoi eseguire direttamente. Le tabelle HTML sono ottime per il rendering nelle pagine, ma mediocri per tutto ciò che deve essere interrogato o riordinato.

Domande frequenti

Sì. I valori vengono sottoposti a escape con la funzione helper e() di Laravel, quindi < diventa &lt; e il contenuto fornito dall’utente non può iniettare tag script o chiudere prematuramente la tabella.

Non di default, l’output è una singola <table> con figli <tr> diretti. Avvolgi l’intestazione <tr> in <thead> e il resto in <tbody> se il tuo CSS target lo richiede.

Le celle che contengono interruzioni di riga incorporate vengono renderizzate così come sono. Se vuoi che le interruzioni di riga siano visibili nel browser, sostituiscile con <br> prima della conversione o imposta white-space: pre-wrap; sul CSS <td>.

Sì. Il CSV viene inviato al nostro server così il convertitore può creare la tabella. Non viene memorizzato e non viene aggiunto al link della pagina.

Strumenti correlati

Strumento disponibile in altre lingue