<table>: l'elemento "tabella"

L' elemento HTML <table> rappresenta i dati tabulari, ovvero le informazioni presentate in una tabella bidimensionale composta da righe e colonne di celle contenenti dati.

Attributi

Attributi deprecati

align

Questo attributo enumerato indica come la tabella deve essere allineata all'interno del documento contenitore. Può avere i seguenti valori:

• left: la tabella viene visualizzata sul lato sinistro del documento;
• center: la tabella viene visualizzata al centro del documento;
• right: la tabella viene visualizzata sul lato destro del documento.

Impostare margin-left e margin-right su auto o margin su 0 auto per ottenere un effetto simile all'attributo align.

bgcolor

Il colore di sfondo del tavolo. È un codice RGB esadecimale a 6 cifre , preceduto da un '#'.

Per ottenere un effetto simile, usa la proprietà CSS background-color.

border

Questo attributo intero definisce, in pixel, la dimensione della cornice che circonda la tabella. Se impostato su 0, l'attributo frame viene impostato su void.

Per ottenere un effetto simile, usa la proprietà abbreviata CSS border.

cellpadding

Questo attributo definisce lo spazio tra il contenuto di una cella e il suo bordo, visualizzato o meno. Se la lunghezza del cellpadding è definita in pixel, questo spazio di dimensioni pixel verrà applicato a tutti e quattro i lati del contenuto della cella. Se la lunghezza è definita utilizzando un valore percentuale, il contenuto sarà centrato e lo spazio verticale totale (in alto e in basso) rappresenterà questo valore. Lo stesso vale per lo spazio orizzontale totale (sinistra e destra).

Per ottenere un effetto simile, applica la proprietà border-collapse all'elemento <table>, con il suo valore impostato su compresso, e la proprietà padding agli elementi <td>.

cellspacing

Questo attributo definisce la dimensione dello spazio tra due celle in un valore percentuale o in pixel. L'attributo viene applicato sia orizzontalmente che verticalmente, allo spazio tra la parte superiore della tabella e le celle della prima riga, la sinistra della tabella e la prima colonna, la destra della tabella e l'ultima colonna e il fondo della tabella e l'ultima riga.

Per ottenere un effetto simile, applica la proprietà border-spacing all'elemento <table>. border-spacing non ha alcun effetto se border-collapse è impostato su comprimere.

frame

Questo attributo enumerato definisce quale lato della cornice che circonda la tabella deve essere visualizzato.

Per ottenere un effetto simile, utilizzare le proprietà border-style e border-width.

rules

Questo attributo enumerato definisce dove le regole, cioè le righe, devono apparire in una tabella. Può avere i seguenti valori:

• none: che indica che non verranno visualizzate regole; è il valore predefinito;
• groups: che farà sì che le regole vengano visualizzate 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: che farà sì che le regole vengano visualizzate tra le righe;
• columns: che farà sì che le regole vengano visualizzate tra le colonne;
• all: che farà sì che le regole vengano visualizzate tra righe e colonne.

Per ottenere un effetto simile, applicare la proprietà border agli elementi <thead>, <tbody>,<tfoot>, <col> o appropriati <colgroup>.

summary

Questo attributo definisce un testo alternativo che riassume il contenuto della tabella. Usa invece l'elemento <caption>.

width

Questo attributo definisce la larghezza della tabella. Utilizzare invece la proprietà CSS width.

Esempi

Tavola semplice

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

Altri semplici esempi

<table>
<tr>
  <th>Nome</th>
  <th>Cognome</th>
</tr>
<tr>
  <td>Jane</td>
  <td>Doe</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
</tr>
</table>

<p>Tabella con thead, tfoot e tbody</p>
<table>
  <thead>
    <tr>
      <th>Intestazione 1</th>
      <th>Intestazione 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Corpo 1</td>
      <td>Corpo 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </tfoot>
</table>

Problemi di accessibilità

Didascalie

Fornendo un elemento <caption> il cui valore descriva in modo chiaro e conciso lo scopo della tabella, aiuta le persone a decidere se devono leggere il resto del contenuto della tabella o saltarlo.

Questo aiuta le persone a navigare con l'ausilio di tecnologie assistive come un lettore di schermo, persone con problemi di vista e persone con problemi cognitivi.

Righe e colonne di ambito

L'attributo scope sugli elementi di intestazione è ridondante in contesti semplici, poiché l'ambito è dedotto. Tuttavia, alcune tecnologie assistive potrebbero non riuscire a trarre inferenze corrette, quindi specificare l'ambito dell'intestazione può migliorare l'esperienza dell'utente. Nelle tabelle complesse, l'ambito può essere specificato in modo da fornire le informazioni necessarie sulle celle relative a un'intestazione.

Fornire una dichiarazione di scope="col" su un elemento <th> aiuterà a descrivere che la cella si trova in cima a una colonna. Fornire una dichiarazione di scope="row" su un elemento <th> aiuterà a descrivere che la cella è la prima di una riga.

Tabelle complicate

Le tecnologie assistive come le utilità per la lettura dello schermo possono avere difficoltà nell'analisi di tabelle così complesse che le celle di intestazione non possono essere associate in modo rigorosamente orizzontale o verticale. Questo è in genere indicato dalla presenza degli attributi colspan e rowspan.

Idealmente, prendere in considerazione modi alternativi per presentare il contenuto della tabella, inclusa la suddivisione in una raccolta di tabelle correlate più piccole che non devono fare affidamento sull'uso degli attributi colspane . rowspanOltre ad aiutare le persone che utilizzano tecnologie assistive a comprendere il contenuto della tabella, ciò può anche essere di beneficio alle persone con problemi cognitivi che potrebbero avere difficoltà a comprendere le associazioni descritte dal layout della tabella.

Se non è possibile suddividere la tabella, utilizzare una combinazione degli attributi id e headers per associare a livello di codice ogni cella della tabella con le intestazioni a cui è associata la cella.