Softonic

Generatore di Tabelle HTML

I dati incollati, le celle e l'HTML generato restano in questo browser. I passaggi del percorso usano lo spazio di sessione della scheda; i valori non vengono inviati tramite i nostri server né inseriti nell'URL.

Passaggio 1 / 4

Sono supportati campi CSV tra virgolette, tabulazioni dei fogli di calcolo, righe separate da punto e virgola e righe divisorie Markdown. Massimo: 50 righe, 20 colonne e 1.000 caratteri per cella.

Table Dati
Table Dati

Scrivere <table>, <thead>, <tbody> e <tr> a mano per un dataset di dieci righe è noioso. Incolla dati di tabelle separati da tabulazioni, CSV o Markdown e questo generatore produce HTML ben strutturato con tag semantici, <caption> opzionale, attributi di ambito appropriati e una selezione di strisce zebra, bordi o classi Tailwind, pronto per essere inserito in un articolo o in un dashboard.

Come costruire una tabella HTML

  1. 1

    Incolla i tuoi dati

    TSV (copia da un foglio di calcolo), CSV o sintassi di tabelle Markdown vengono tutti analizzati correttamente.

  2. 2

    Scegli le opzioni della tabella

    Riga di intestazione, didascalia, strisce zebra, righe compatte o spaziose.

  3. 3

    Scegli la modalità di stile

    HTML semplice, stili inline, classi Bootstrap o classi Tailwind.

  4. 4

    Copia il markup

    L'output è HTML valido e semantico, non una griglia `<div>` che finge di essere una tabella.

Struttura della tabella semantica

Le tabelle costruite con tag appropriati sono accessibili, amichevoli per i lettori di schermo e facili da stilizzare. Il generatore produce questa struttura:

<table>
  <caption>Fatturato Q1</caption>
  <thead>
    <tr>
      <th scope="col">Regione</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">UE</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

Elementi e i loro ruoli

Elemento Scopo
<caption> Sommario della tabella, letto per primo dai lettori di schermo
<thead> Intestazioni delle colonne, rese separatamente dal corpo
<tbody> Righe di dati
<tfoot> Totali, note a piè di pagina, posizionate in fondo indipendentemente dalla posizione del codice
<th scope="col"> Intestazione di colonna
<th scope="row"> Intestazione di riga (ad es. prima cella di ogni riga)
<td> Cella di dati

Modelli responsivi

  • Scorrimento orizzontale: avvolgi la tabella in <div style="overflow-x:auto"> così le visualizzazioni strette possono scorrere invece di rompere il layout.
  • Impilare su mobile: ripeti le intestazioni come attributi data-label e capovolgi le righe in schede verticali tramite CSS, utile per piccoli dataset.
  • Riformattare con griglia: tabelle complesse possono essere ricostruite con CSS Grid, ma perdono la navigazione nativa da tastiera; utile solo per dashboard.

Lista di controllo per l’accessibilità

  • Ogni <th> ha un attributo scope.
  • Spans complessi usano headers="..." per collegare le celle di dati agli ID delle intestazioni.
  • Una didascalia riassume lo scopo della tabella.
  • Non usare tabelle per layout visivi, usa CSS Grid o Flexbox.

Domande frequenti

Sì. I dati degli appunti del foglio di calcolo sono TSV (separati da tabulazioni), che il generatore analizza nativamente. Le righe diventano <tr> e le celle separate da tabulazioni diventano <td>.

Classi CSS per tutto ciò che controlli; stili inline per le email (dove i fogli di stile esterni sono spesso bloccati). Le modalità Bootstrap e Tailwind producono markup di classi pronte all’uso per quei framework.

Non automaticamente. Ogni valore importato diventa una cella. Dopo aver copiato l’HTML, aggiungi manualmente colspan o rowspan e controlla le associazioni delle intestazioni, perché le celle unite possono richiedere gli attributi id e headers.

Sì, gli attributi scope="col" e scope="row" vengono aggiunti, e una <caption> viene prodotta quando ne fornisci una. Verifica con un lettore di schermo o l’estensione axe DevTools per tabelle complesse.

Strumenti correlati

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Semplificatore di Algebra Booleana

Semplifica le espressioni booleane utilizzando le mappe di Karnaugh e l'algoritmo di Quine-McCluskey. Mostra ogni passo di minimizzazione e una forma finale SOP/POS.

Generatore di Palette di Colori

Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.

Generatore di palette colori casuali

Genera palette casuali da 2 a 15 campioni, scegli uno stile vivace, pastello, tenue o scuro e copia codici HEX o variabili CSS.

Convertitore BBCode in HTML

Converti BBCode (markup per forum) in HTML pulito. Gestisce tag di formattazione, elenchi, citazioni, codice, immagini, link e tabelle.

Binario a Decimale

Converti numeri binari in decimali istantaneamente. Mostra l'espansione posizionale così puoi vedere come ogni bit contribuisce.