Menu

HTML Table Generator

Crea on-line le tue tabelle HTML: configura ogni aspetto, scegli i colori, il numero di celle e righe e poi clicca sul bottone per generare il codice da incorporare all'interno delle tue pagine web.

Le tabelle

Le tabelle sono da sempre tra gli elementi più importanti ed utilizzati da chi crea pagine web. Lo scopo originario delle tabelle HTML è quello di consentire la presentazione di dati in modo ordinato all'interno di una griglia (per intenderci un po' come avviene all'interno di un file).

Negli anni passati, è bene ricordarlo, le tabelle sono state spesso utilizzate per i più vari scopi come, soprattutto, la creazione di interi layout. Fortunatamente oggi questa prassi di web design può dirsi in disuso a vantaggio delle tecniche table-less che si basano sull'utilizzo combinato di <div> e sintassi CSS.

Ad oggi - con l'avvento di HTML5 - le tabelle non sono certo andate in disuso, tuttavia il loro utilizzo è rientrato nell'alveo originale quale strumento per la presentazione ordinata di dati.

Il tag <table>

Ovviamente il tag principale coinvolto nella creazione di tabele HTML è il tag <table>. Si tratta del tag che crea l'elemento genitore della nostra griglia.

Questo tag possiede diversi attributi, i più utilizzati sono:

  • cellspacing: definisce lo spazio (in pixel) tra le varie celle della tabella;
  • cellpadding: definisce lo spazio interno tra il contenuto ed il margine di ciascuna cella;
  • border: definisce lo spessore del bordo che separa ciascuna cella;
  • bordercolor: definisce il colore del bordo.

Oltre a questi attributi, il tag <table> ne ammette diversi altri piuttosto generici come width, align, id, class, style, ecc.

Linee e colonne: i tag <tr> e <td>

All'interno di <table>, i principali tag coinvolti nella definizione di una tabella HTML sono <tr> e <td>, cioè, rispettivamente, il tag per la creazione di linee e colonne: con il tag <tr> creo una nuova linea all'interno della tabella, mentre con il tag <td> divido la linea in più celle. Vediamo un semplice esempio di una tabelle HTML composta da due linee ciascuna suddivisa in tre colonne:

<table border="1" cellspacing="0" cellpadding="10">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
  </tr>
</table>

Anche i tag <tr> e <td> ammettono degli attributi. I più utilizzati riguardano l'allineamento dei contenuti e sono align (alineamento orizzontale) e valign (allineamento verticale). Particolarmente importanti per il tag <td> (anche se non molto utilizzati) sono gli attributi colspan e rowspan che consentono di unire più celle, rispettivamente, in orizzontale e verticale.

Altri tag coinvolti nella definizione di tabelle HTML

Oltre ai tag citati, che come detto sono i principali, la gestione delle tabelle in HTML coinvolge diversi altri tag come, ad esempio i tag <thead>, <tbody> e <tfoot> che definiscono, rispettivamente, l'header, il corpo ed il footer della tabella.

Altro tag interessante, che apprtiene alla sezione header della tabella, è il tag <th> che, all'interno di una linea (<tr>) definisce i titoli delle varie colonne:

<table border="1" cellspacing="0" cellpadding="10">
  <thead>
    <tr>
      <th>Giocatore</th>
      <th>Partite</th>
      <th>Punti</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mario</td>
      <td>2</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Luca</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Pietro</td>
      <td>2</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

Per un ulteriore approfondimento completo circa le tabele in HTML rimandiamo a questa lezione della nostra Guida a HTML.


Genera il codice HTML delle tue tabelle

L'utilizzo di questo tool è semplicissimo: è sufficiente compilare le varie impostazioni e cliccare sul bottone "Genera codice Tabella". Il sistema restituirà il codice HTML della tabella formattata secondo le impostazioni prescelte.

Unico suggerimento è quello di prestare attenzione alla larghezza delle celle la cui somma deve corrispondere alla larghezza totale impostata per la tabella. Ad esempio: se si volesse creare una tabella con una larghezza complessiva di 600 pixel e tre colonne, sarà necessario impostare la larghezza di ciascuna colonna a 200 pixel.

Una volta creato, ovviamente, il codice HTML della tabella deve essere popolato coi dati che si intende presentare.


Altri tool interessanti

  • Caratteri speciali HTML
    Una tabella di riferimento con le entità dei caratteri speciali in HTML
  • Colori del web
    La palette dei colori standard per il web e dello standard X11.
  • HTML Compressor
    Migliora la velocità di caricamento del tuo sito minimizzando il codice HTML.
  • HTML Fixer
    Correggi automaticamenti eventuali errori del tuo markup HTML.
  • HTML Encode / Decode
    Converte tutti i caratteri compatibili in entità HTML o viceversa.
  • HTML List Generator
    Trasforma un elenco di testo in una lista HTML o in un menu a tendina.
  • Meta-Tag Generator
    Crea automaticamente i meta-tag da inserire nelle tue pagine web.
  • Word to HTML
    Converti il contenuto di un documento Word in codice HTML.
  • Text to HTML
    Formatta automaticamente un testo semplice in codice HTML.