<table>

Sommario

L'elemento HTML <table> rappresenta una Tabella.

Utilizzo

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> o <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

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

• Altri elementi HTML riguardanti le tabelle: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>;
• Proprietà CSS che posso essere particolarmente utili applicate all'elemento <table>:
  • ​width per controllare la larghezza della tabella;
  • border, border-style, border-color, border-width, border-collapse, border-spacing per controllare i bordi delle tabelle, le linee e i frame;
  • margin e padding per controllare la disposizione del contenuto delle celle;
  • text-align e vertical-align per definire l'allineamento del testo nelle celle.