<table>
Sommario
L'elemento HTML <table>
rappresenta una Tabella.
Utilizzo
Categoria del contenuto | Contenuto di flusso |
Contenuto permesso |
In ordine:
|
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'attributoalign
, usare gli attributi CSS di layout, ad esempiomargin-left
(en-US) emargin-right
(en-US) con valoreauto
( omargin
(en-US) con valore0 auto
) per centre la tabella. - Fino alla version 4, Firefox supportava (solo usando la modalità quirks mode) i valori
middle
,absmiddle
, eabscenter
come sinonimi dicenter
.
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'attributobgcolor
, usare la proprietà CSSbackground-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'attributoframe
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'attributoborder
, usare le proprietà CSSborder
,border-color
(en-US),border-width
(en-US) eborder-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'attributocellpadding
, usare la proprietà CSSborder-collapse
(en-US) con valorecollapse
applicata all'elemento<table>
e la proprietòpadding
(en-US) all'elemento <td> (en-US).
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'attributocellspacing
, usare la proprietà CSSborder-spacing
(en-US) 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'attributoframe
, usare le proprietà CSSborder-style
eborder-width
(en-US).
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> (en-US), <tbody> (en-US) e <tfoot> (en-US)) e tra i gruppi di colonne (definiti dagli elementi <col> (en-US) e <colgroup> (en-US));rows
, indica che le linee devono essere mostrate tra le righe (<tr> (en-US);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'attributorules
, usare le proprietà CSSborder
sugli eleementi <thead> (en-US), <tbody> (en-US), <tfoot> (en-US), <col> (en-US) o <colgroup> (en-US).
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'elementosummary
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> (en-US) 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> (en-US). - Modificando la tabella così che la descrizione non sia più necessaria, ad esempio usando gli elementi <th> (en-US) e <thead> (en-US).
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'attributowidth
, usare la proprietà CSSwidth
(en-US).
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
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help! (en-US)
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
- Altri elementi HTML riguardanti le tabelle:
<caption>
, <col> (en-US), <colgroup> (en-US), <tbody> (en-US), <td> (en-US), <tfoot> (en-US), <th> (en-US), <thead> (en-US), <tr> (en-US); - Proprietà CSS che posso essere particolarmente utili applicate all'elemento
<table>
:-
width
(en-US) per controllare la larghezza della tabella; border
,border-style
,border-color
(en-US),border-width
(en-US),border-collapse
(en-US),border-spacing
(en-US) per controllare i bordi delle tabelle, le linee e i frame;margin
(en-US) epadding
(en-US) per controllare la disposizione del contenuto delle celle;text-align
evertical-align
(en-US) per definire l'allineamento del testo nelle celle.
-