MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

<table>

Sommario

L'elemento HTML <table> rappresenta una Tabella.

Nota: Prima della nascita del  CSS, spesso gli elementi HTML <table> venivano usati per impaginare un documento. Questa pratica è stata scoraggiata a partire da HTML 4, e l'elemento <table> non dovrebbe essere usato per gestire il layout.

Utilizzo

Categoria del contenuto Contenuto di flusso
Contenuto permesso

In ordine:

  • un elemento <caption> (opzionale);
  • zero o più elementi <colgroup>;
  • un elemento <thead> (opzionale);
  • una delle seguenti alternative:
    • uno o più elementi <tr>;
    • zero o più elementi <tbody>;
  • un elemento <tfoot> (opzionale).
Omissione dei tag Nessuna, sono necessari sia il tag di apertura che di chiusura.
Elementi genitore permessi Qualsiasi elemento che accetti contenuto di flusso.
Normativa HTML5, sezione 4.9.1 (HTML4.01, sezione 11.2.1)

Attributi

Questo elemento supporta gli attributi globali

align
Questo attributo indica come la tabella deve essere allineata rispetto al documento che la contiene. Può assumere uno dei seguenti valori:
  • left, indica che la tabella deve essere mostrata sulla sinistra del documento;
  • center, indica che la tabella deve essere mostrata al centro del documento;
  • right, indica che la tabella seve essere mostrata sulla sinistra del documento.
Nota: 
  • Non usare questo attributo, essendo deprecato. Lo stile dell'elemento <table> dovrebbe essere definito usando il CSS. Per ottenere un effetto simile all'attributo align, usare gli attributi CSS di layout, ad esempio margin-left e margin-right con valore auto ( o margin con valore 0 auto) per centre la tabella.
  • Fino alla version 4, Firefox supportava (solo usando la modalità quirks mode) i valori middle, absmiddle, e abscenter come sinonimi di center
bgcolor
Questo attributo definisce il colore di sfondo della tabella e del suo contenuto. È un codice esadecimale di 6 cifre, come definito in sRGB, preceduto da '#'.  Può anche essere usato uno dei sedici colori predefiniti.
  black = "#000000"   green = "#008000"
  silver = "#C0C0C0"   lime = "#00FF00"
  gray = "#808080"   olive = "#808000"
  white = "#FFFFFF"   yellow = "#FFFF00"
  maroon = "#800000"   navy = "#000080"
  red = "#FF0000"   blue = "#0000FF"
  purple = "#800080"   teal = "#008080"
  fuchsia = "#FF00FF"   aqua = "#00FFFF"
Nota: Non usare questo attributo, essendo deprecato. Lo stile dell'elemento <table> dovrebbe essere definito usando il CSS. Per ottenere un effetto simile all'attributo bgcolor, usare la proprietà CSS background-color.
border
Questo attributo, il cui valore è un numero intero, definisce la dimensione in pixel dello spazio intorno alla tabella. Se impostato a 0, implica che l'attributo frame abbia un valore nullo.
Nota: Non usare questo attributo, essendo deprecato. Lo stile dell'elemento <table> dovrebbe essere definito usando il CSS. Per ottenere un effetto simile all'attributo border, usare le proprietà CSS border, border-color, border-width e border-style.
cellpadding
Questo attributo definisce lo spazio tra il contenuto e il bordo, anche se non visibile, delle celle. Se è un valore in pixel, verrà applicato a tutti e quattro i lati; se è un valore percentuale, il contenuto verrà centrato e lo spazio verticale (sopra e sotto) verrà rappresentato da questa percentuale. Lo stesso per lo spazio orizzontale (destra e sinistra).
Nota: Non usare questo attributo, essendo deprecato. Lo stile dell'elemento <table> dovrebbe essere definito usando il CSS.  Per ottenere un effetto simile all'attributo cellpadding, usare la proprietà CSS border-collapse con valore collapse applicata all'elemento  <table> e la proprietò padding all'elemento <td>.
cellspacing
Questo attributo definisce lo spazio, in percentuale o in pixel, tra due celle (sia in verticale che in orizzontale), trail bordo superiore della tabella e le celle della prima riga, tra il bordo inferiore della tabella e l'ultima riga, tra il bordo sinistro della tabella e la prima colonna, e tra il bordo destro della tabella e l'ultima colonna.
Nota: Non usare questo attributo, essendo deprecato. Lo stile dell'elemento <table> dovrebbe essere definito usando il CSS. Per ottenere un effetto simile all'attributo cellspacing, usare la proprietà CSS border-spacing applicata all'elemento <table>.
frame
Questo attributo definisce quale parte del frame che circonda la tabella deve essere mostrata. Può avere i seguenti valori:
  above   below
  hsides   vsides
  lhs   rhs
  border   box
  void
Nota: Non usare questo attributo, essendo deprecato. Lo stile dell'elemento <table> dovrebbe essere definito usando il CSS. Per ottenere un effetto simile all'attributo frame, usare le proprietà CSS border-style e border-width.
rules
Questo attributo definisce come devono essere mostrate le linee nella tabella. Può assumere i seguenti valori:
  • none, indica che non deve essere mostrata nessuna linea (il valore di default);
  • groups, indica che le linee devono essere mostrate solo tra i gruppi di righe (definiti dagli elementi <thead>, <tbody> e <tfoot>) e tra i gruppi di colonne (definiti dagli elementi <col> e <colgroup>);
  • rows, indica che le linee devono essere mostrate tra le righe (<tr>;
  • columns, indica che le linee devono essere mostrate tra le colonne;
  • all, indica che le linee devono essere mostrate sia tra le righe che le colonne.
Nota:
  • Lo stile delle linee viene definito dal browser e non può essere modificato.
  • Non usare questo attributo, essendo deprecato. Lo stile dell'elemento <table> dovrebbe essere definito usando il CSS. Per ottenere un effetto simile all'attributo rules, usare le proprietà CSS border sugli eleementi <thead>, <tbody>, <tfoot>, <col><colgroup>.
summary
Questo attributo definisce un testo alternativo che descriva il contenuto della tabella nei brawser che non la possono mostrare. Spesso viene usato per fornire le informazioni anche a presone non vedenti, che visualizzano il documento tramite sintetizzatori vocali.  Se tali informazioni possono essere utili per chiunque, considerare l'utilizzo dell'elemento <caption>. L'elemento summary non è obbligatorio e può essere omesso se l'elemento <caption> ne copre il ruolo.

Nota: Non usare questo attributo per descrivere la tabella, essendo deprecato, ma uno dei seguenti metodi:

  • Del testo vicino alla tabella (questo è il modo meno semantico).
  • Un elemento <caption> nella tabella.
  • Un elemento <details> nell'elemento <caption> della tabella.
  • Includendo l'elemento <table> in un elemento <figure> e aggiungendo del testo che la descriva.
  • Includendo l'elemento <table> in un elemento <figure> e aggiundendo del testo che la descriva in un elemento <figcaption>.
  • Modificando la tabella così che la descrizione non sia più necessaria, ad esempio usando gli elementi <th> e <thead>.
width
Questo attributo definisce la larghezza della tabella. Può assumere un valore in pixel o in precentuale, che rappresenta la larghezza in percentuale rispetto al suo contenitore.
Nota: Non usare questo attributo, essendo deprecato. Lo stile dell'elemento <table> dovrebbe essere definito usando il CSS. Per ottenere un effetto simile all'attributo width, usare la proprietà CSS width.

Interfaccia DOM

Questo elemento implementa l'interfaccia HTMLTableElement.

Esempi

Una semplice tabella

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

Altri esempi

<p>Una tabella con un'intestazione</p>
<table>
  <tr>
    <th>Nome</th>
    <th>Cognome</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Una tabella con thead, tfoot, e tbody</p>
<table>
  <thead>
    <tr>
      <th>Intestazione 1</th>
      <th>Intestazione 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Corpo della tabella 1</td>
      <td>Corpo della tabella 2</td>
    </tr>
  </tbody>
</table>

<p>Tablella con colgroup</p>
<table>
  <colgroup span="4" class="columns"></colgroup>
  <tr>
    <th>Stati</th>
    <th>Capitali</th>
    <th>Popolazione</th>
    <th>Lingua</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 milioni</td>
    <td>Inglese</td>
  </tr>
  <tr>
    <td>Svezia</td>
    <td>Stoccolma</td>
    <td>9 milioni</td>
    <td>Svedese</td>
  </tr>
</table>

<p>Tabella con colgroup and col</p>
<table>
  <colgroup>
    <col class="colonna1">
    <col class="colonne2e3" span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Limone</th>
    <th>Arancia</th>
  </tr>
  <tr>
    <td>Verde</td>
    <td>Giallo</td>
    <td>Arancione</td>
  </tr>
</table>

<p>Tabella con caption</p>
<table>
  <caption>Descrizione</caption>
  <tr>
    <td>Dati</td>
  </tr>
</table>

Compatibilità con i browser

  Chrome Firefox (Gecko) Internet Explorer Opera Safari
Supporto di base 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0
  Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Supporto di base 1.0 1.0 (1) 6.0 6.0 1.0

Internet Explorer 9 ha un bug che riguarda l'elemento  <table> e :hover; vedere la sezione "Compatibilità con i browser" dell'articolo riguardante :hover per altri dettagli.

Vedere anche

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: nicolo-ribaudo
 Ultima modifica di: nicolo-ribaudo,