11 Tabelle

Argomenti

  1. Introduzione alle tabelle
  2. Elementi per la costruzione delle tabelle
    1. L'elemento TABLE
    2. Le didascalie della tabella: l'elemento CAPTION
    3. Raggruppamenti di righe: gli elementi THEAD, TFOOT, e TBODY
    4. Raggruppamenti di colonne: gli elementi COLGROUP e COL
    5. Righe della tabella: l'elemento TR
    6. Celle della tabella: gli elementi TH e TD
  3. Formattazione della tabella da parte di interpreti visuali
    1. Bordi e separatori
    2. Allineamento orizzontale e verticale
    3. Margini delle celle
  4. Presentazione della tabella da parte di interpreti non visuali
    1. L'associazione delle informazioni di intestazione ai dati delle celle
    2. Categorizzazione delle celle
    3. L'algoritmo per la ricerca delle informazioni di intestazione
  5. Esempio di tabella

11.1 Introduzione alle tabelle

Il modello della tabella in HTML consente agli autori di posizionare dati -- testo, testo preformattato, immagini, collegamenti, moduli, campi modulo, altre tabelle, ecc. -- all'interno di righe e colonne di celle.

Ogni tabella può avere associata una didascalia (vedere l'elemento CAPTION) che fornisce una breve descrizione degli scopi della tabella. Una descrizione estesa può inoltre essere fornita (tramite l'attributo summary) per beneficiare le persone che usano interpreti vocali o basati sul Braille.

Le righe della tabella possono essere raggruppate all'interno della testata, del piede della tabella, o del corpo (rispettivamente mediante gli elementi THEAD, TFOOT e TBODY). I raggruppamenti di righe portano in sé informazioni strutturali aggiuntive e possono essere presentati dagli interpreti in maniera tale da enfatizzare suddetta struttura. Gli interpreti possono sfruttare la divisione di testata/corpo/piede tabella per supportare lo scorrimento del corpo della tabella indipendentemente dalla testata e dal piede della tabella. Quando una tabella di grandi dimensioni viene stampata, le informazioni di testata e del piede della stessa possono essere ripetute nella stampa di ognuno dei fogli che contiene i dati della tabella.

Gli autori possono inoltre raggruppare le colonne per fornire informazioni strutturali aggiuntive che possono essere sfruttate dagli interpreti. Inoltre, gli autori possono dichiarare le proprietà delle colonne all'inizio della definizione della tabella (mediante gli elementi COLGROUP e COL) in modo che gli interpreti abilitati alla presentazione incrementale della tabella, non debbano attendere il recupero completo dei dati della stessa prima di passare alla presentazione della tabella.

Le celle della tabella possono inoltre contenere informazioni di "intestazione" (vedere l'elemento TH) o "dati" (vedere l'elemento TD). Le celle possono estendersi su righe o colonne multiple. Il modello di tabella in HTML consente agli autori l'etichettatura di ognuna delle celle in modo che gli interpreti non visuali possano molto più facilmente comunicare le informazioni di intestazione, inerenti le celle, all'utente. Il funzionamento di questo meccanismo, non solo assiste gentilmente gli utenti con disabilità visive, ma rende possibile la gestione delle tabelle agli interpreti multi-modali senza fili con limitate capacità di visualizzazione (ad es., cercapersone e telefoni abilitati al Web).

Le tabelle non dovrebbero essere usate solamente per creare l'impaginazione dei contenuti del documento, in quanto potrebbero sorgere dei problemi quando lo stesso viene presentato da media non visuali. In più, quando usate con la grafica, queste tabelle possono forzare l'utente allo scorrimento orizzontale per visualizzare una tabella concepita su un sistema con una larga capacità di visualizzazione. Per diminuire l'entità di questi problemi, gli autori dovrebbero usare i fogli di stile anziché le tabelle per controllare l'impaginazione del documento.

Annotazione. Questa specifica include ulteriori informazioni dettagliate, inerenti le tabelle, nel capitolo Progettazione razionale della tabella e problemi d'implementazione.

Qui troviamo un semplice esempio di tabella che illustra alcune delle caratteristiche del modello di tabella in HTML. La seguente definizione di tabella:

<TABLE border="1"
          summary="Questa tabella fornisce alcune statistiche sugli acari della frutta: 
                   altezza e peso medi, e la percentuale di quelli dagli occhi rossi 
                   (per entrambi i sessi maschile e femminile).">
<CAPTION><EM>Una prova di tabella a celle unificate</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Media
<TH rowspan="2">Occhi<BR>rossi
<TR><TH>altezza<TH>peso
<TR><TH>Maschi<TD>1.9<TD>0.003<TD>40%
<TR><TH>Femmine<TD>1.7<TD>0.002<TD>43%
</TABLE>

potrebbe essere presentata, come segue, da un dispositivo testuale come segue:

       Una prova di tabelle a celle unificate
    /-----------------------------------------\
    |          |       Media       |  Occhi   |
    |          |-------------------|  rossi   |
    |          | altezza |   peso  |          |
    |-----------------------------------------|
    |  Maschi  | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Femmine  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/

o come questa mediante un interprete grafico:

Una tabella a celle unificate

11.2 Elementi per la costruzione delle tabelle

11.2.1 L'elemento TABLE

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ATTLIST TABLE                        -- elemento tabella --
  %attrs;                              -- %coreattrs, %i18n, %events --
  summary     %Text;         #IMPLIED  -- scopo/struttura per l'emissione del discorso --
  width       %Length;       #IMPLIED  -- ampiezza della tabella --
  border      %Pixels;       #IMPLIED  -- controllo del bordo esterno della tabella --
  frame       %TFrame;       #IMPLIED  -- controlla quale lato della cornice verrà presentato --
  rules       %TRules;       #IMPLIED  -- separatori tra righe e colonne --
  cellspacing %Length;       #IMPLIED  -- spazio tra le celle --
  cellpadding %Length;       #IMPLIED  -- spazio interno alle celle --
  >

Tag iniziale: richiesto, Tag finale: richiesto

Definizione degli attributi

summary = text [CS]
Questo attributo fornisce lo scopo e la struttura della tabella per la presentazione, da parte degli interpreti, ai media non visuali come quelli vocali o Braille.
align = left|center|right [CI]
Disapprovato. Questo attributo specifica la posizione della tabella nel documento. valori permessi:
  • left: La tabella è alla sinistra del documento.
  • center: La tabella è al centro del documento.
  • right: La tabella è alla destra del documento.
width = length [CN]
Questo attributo specifica l'ampiezza desiderata per l'intera tabella ed è inteso per gli interpreti visuali. Quando il valore è espresso in percentuale, il valore è relativo allo spazio orizzontale disponibile dell'interprete. In assenza di qualsiasi specificazione d'ampiezza, la stessa è determinata dall'interprete.

Attributi definiti altrove

L'elemento TABLE contiene tutti gli altri elementi che specificano la didascalia, le righe, il contenuto e la formattazione.

Il seguente elenco informativo descrive quali operazioni gli interpreti eseguono quando presentano una tabella:

Il modello di tabella in HTML è stato creato per consentire, con l'assistenza dell'autore, agli interpreti di presentare le tabelle in maniera incrementale (cioè, nel preciso istante in cui vengono recuperate le righe) senza dover attendere il completo recupero di tutti i dati della tabella prima di poter iniziare la presentazione.

Per consentire all'interprete la formattazione della tabella in un solo passo, gli autori devono comunicare all'interprete quanto segue:

Più precisamente, un interprete può presentare una tabella in un solo passo quando l'ampiezza delle colonne è stata specificata usando una combinazione di elementi COLGROUP e COL. Se ognuna delle colonne è stata specificata con termini relativi o percentuale (vedere il capitolo calcolare l'ampiezza delle colonne), gli autori devono inoltre specificare l'ampiezza della tabella stessa.

Direzionalità della tabella 

La direzionalità della tabella è sia quella ereditata (la predefinita è da sinistra verso destra) o quella specificata dall'attributo dir per l'elemento TABLE.

Per una tabella da sinistra verso destra, la colonna zero è nella parte sinistra e la riga zero è nella parte superiore. Per una tabella da destra verso sinistra, la colonna zero è nella parte destra e la riga zero nella parte superiore.

Quando l'interprete assegna ulteriori celle in una riga (vedere il capitolo relativo al calcolare il numero di colonne in una tabella), queste vengono aggiunte alla destra di una tabella avente direzione da sinistra a destra, e alla sinistra di una tabella avente direzione da destra a sinistra.

Da notare che TABLE è l'unico elemento con cui l'attributo dir inverte l'ordine visuale delle colonne; una singola riga di tabella (TR) o un gruppo di colonne (COLGROUP) non possono essere inverti indipendentemente.

Quando è impostato per l'elemento TABLE, l'attributo dir influisce anche la direzione del testo nelle celle della tabella (effettivamente l'attributo dir è ereditato dagli elementi a livello blocco).

Per specificare la direzione da destra verso sinistra di una tabella, impostare l'attributo dir come segue:

<TABLE dir="RTL">
...il resto della tabella...
</TABLE>

La direzione del testo nelle celle può essere cambiato individualmente impostando l'attributo dir nell'elemento che definisce la cella. Si prega di consultare il capitolo relativo alla bidirezionalità del testo per ulteriori informazioni sulle problematiche della direzione del testo.

11.2.2 Didascalie della tabella: l'elemento CAPTION

<!ELEMENT CAPTION  - - (%inline;)*     -- didascalia tabella -->
<!ENTITY % CAlign "(top|bottom|left|right)">

<!ATTLIST CAPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Tag iniziale: richiesto, Tag finale: richiesto

Definizione degli attributi

align = top|bottom|left|right [CI]
Disapprovato. Per gli interpreti visuali, questo attributo specifica la posizione della didascalia rispetto alla tabella. Possibili valori:
  • top: La didascalia è al vertice della tabella. Questo è il valore predefinito.
  • bottom: La didascalia è alla fine della tabella.
  • left: La didascalia è alla sinistra della tabella.
  • right: La didascalia è alla destra della tabella.

Attributi definiti altrove

Quando presente, l'elemento CAPTION il testo deve descrivere la natura della tabella. L'elemento CAPTION è permesso solo immediatamete dopo il tag iniziale dell'elemento TABLE. Un elemento TABLE può contenere solo un elemento CAPTION.

Gli interpreti visuali permettono alle persone vedenti di carpire immediatamente la strutturazione di una tabella, sia tramite le intestazioni che tramite la didascalia. Una conseguenza di questo è che le didascalie sono inadeguate quali sommari degli scopi e della struttura della tabella dalla prospettiva delle persone che credono negli interpreti non visuali.

Gli autori dovrebbero prendersi cura di fornire un informazione addizzionale per elencare i propositi e la struttura della tabella usando l'attributo summary dell'elemento TABLE. Questo è in special modo importante per le tabelle senza didascalia. Gli esempi sotto illustrano l'uso dell'attributo summary.

Gli interpreti visuali dovrebbero evitare di tagliare qualsiasi parte della tabella che include la didascalia, ammeno che il mezzo usato non sia provvisto di una possibilità, di accesso globale, ad es., mediante lo scorrimento orizzontale o verticale. Raccomandiamo che il testo della didascalia non ecceda l'ampiezza della tabella. (vedere inoltre il capitolo algoritmo raccomandato per la configurazione.)

11.2.3 Raggruppamenti di riga: gli elementi THEAD, TFOOT, e TBODY

<!ELEMENT THEAD    - O (TR)+           -- testata della tabella -->
<!ELEMENT TFOOT    - O (TR)+           -- piede della tabella -->

Tag iniziale: richiesto, Tag finale: facoltativo

<!ELEMENT TBODY    O O (TR)+           -- corpo della tabella -->

Tag iniziale: facoltativo, Tag finale: facoltativo

<!ATTLIST (THEAD|TBODY|TFOOT)          -- sezioni della tabella --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- allineamento orizzontale nelle celle --
  %cellvalign;                         -- allineamento verticale nelle celle --
  >

Attributi definiti altrove

Le righe della tabella possono essere raggruppate all'interno della sezione di testa, del piede della tabella e in uno o più sezioni corpo della tabella, usando rispettivamente gli elementi THEAD, TFOOT e TBODY. Questa divisione abilita gli interpreti al supporto dello scorrimento del corpo della tabella, indipendentemente dalle sezioni di testa e piede tabella. Quando una tabella lunga viene stampata, le informazioni di testata e di piede tabella possono essere ripetute in ogni pagina che contenga i dati della tabella.

La testata ed il piede della tabella dovrebbero contenere informazioni riguardanti l'incolonnamento. Il corpo della tabella dovrebbe contenere righe di dati tabella.

Quando presenti, ogni THEAD, TFOOT, e TBODY contengono un gruppo di righe. Ogni gruppo di righe deve contenere almeno una riga, definita mediante l'elemento TR.

Questo esempio illustra l'ordine e la struttura delle sezioni di testa, di piede e corpo della tabella.

<TABLE>
<THEAD>
     <TR> ...informazioni d'intestazione...
</THEAD>
<TFOOT>
     <TR> ...informazioni di piede tabella...
</TFOOT>
<TBODY>
     <TR> ...prima riga del primo blocco di dati...
     <TR> ...seconda riga del primo blocco di dati...
</TBODY>
<TBODY>
     <TR> ...prima riga del secondo blocco di dati...
     <TR> ...seconda riga del secondo blocco di dati...
     <TR> ...terza riga del secondo blocco di dati...
</TBODY>
</TABLE>

TFOOT deve apparire prima di TBODY con la definizione di TABLE in modo che gli interpreti possano presentare il piede della tabella prima di aver ricevuto tutte le (potenzialmente numerose) righe di dati. Il seguente elenco definisce quali tag sono richiesti e quali possano essere omessi:

Interpreti conformi, nella fase di analisi, devono rispettare queste regole per ragioni di compatibilità all'indietro.

La tabella dell'esempio precedente può essere ridotta rimuovendo alcuni tag finali, come in:

<TABLE>
<THEAD>
     <TR> ...informazioni d'intestazione...
<TFOOT>
     <TR> ...informazioni di piede tabella...
<TBODY>
     <TR> ...prima riga del primo blocco di dati...
     <TR> ...seconda riga del primo blocco di dati...
<TBODY>
     <TR> ...prima riga del secondo blocco di dati...
     <TR> ...seconda riga del secondo blocco di dati...
     <TR> ...terza riga del secondo blocco di dati...
</TABLE>

Le sezioni THEAD, TFOOT, e TBODY devono contenere lo stesso numero di colonne.

11.2.4 Raggruppamenti di colonne: gli elementi COLGROUP e COL

I raggruppamenti di colonne consentono agli autori di creare delle divisioni strutturali con la tabella. Gli autori possono evidenziare questa struttura con i fogli di stile o gli attributi del HTML (ad es., l'attributo rules per l'elemento TABLE). Per un esempio della presentazione visuale di gruppi di colonne, consultare esempio di tabella.

Una tabella può inoltre contenere un implicito gruppo di colonne singolo (nessun elemento COLGROUP delimita le colonne) o qualsiasi quantità esplicita di gruppi di colonne (ognuno delimitato da un'istanza dell'elemento COLGROUP).

L'elemento COL consente agli autori di condividere gli attributi con varie colonne senza raggruppamenti impliciti o strutturali. La "portata" dell'elemento COL è un numero di colonne che condivideranno gli attributi dell'elemento.

L'elemento COLGROUP  

<!ELEMENT COLGROUP - O (col)*          -- gruppo colonna della tabella -->
<!ATTLIST COLGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  span        NUMBER         1         -- numero predefinito di colonne nel gruppo --
  width       %MultiLength;  #IMPLIED  -- Ampiezza predefinita delle colonne incluse --
  %cellhalign;                         -- Allineamento orizzontale nelle celle --
  %cellvalign;                         -- Allineamento verticale nelle celle --
  >

Tag iniziale: richiesto, Tag finale: facoltativo

Definizione degli attributi

span = number [CN]
Questo attributo, deve essere un numero intero maggiore di 0, che specifica il numero delle colonne in un gruppo di colonne. I valori possono essere i seguenti:
  • In assenza dell'attributo span, ogni COLGROUP definisce che il gruppo di colonne contenga una colonna.
  • Se l'attributo span è impostato a N > 0, l'elemento COLGROUP corrente definisce che il gruppo di colonne contenga N colonne.

Gli interpreti devono ignorare questo attributo se l'elemento COLGROUP contiene uno o più elementi COL.

width = multi-length [CN]

Questo attributo specifica l'ampiezza predefinita per ogni colonna presente nel gruppo di colonne corrente. In aggiunta alle unità di misura predefinite, quali pixel, percentuali e valori relativi, questo attributo ammette la speciale forma "0*" (zero asterisco), significa che l'ampiezza di ciascuna colonna del gruppo potrebbe essere la minima necessaria per contenere i contenuti delle colonne. Questo implica che l'intero contenuto delle colonne deve essere conosciuto prima che la rispettiva ampiezza venga computata. Gli autori dovrebbero essere informati che specificando "0*" impediranno agli interpreti visuali la presentazione incrementale della tabella.

Questo attributo è sovrascrivente per qualsiasi colonna, nel gruppo di colonne, dove width è specificato mediante l'elemento COL.

Attributi definiti altrove

L'elemento COLGROUP crea un esplicito gruppo di colonne. Il numero delle colonne presenti nel gruppo di colonne può essere specificato in due modi esclusivamente reciproci:

  1. Gli attributi span degli elementi (valore predefinito 1) specificano il numero delle colonne nel gruppo.
  2. Ciascun elemento COL nel COLGROUP rappresenta una o più colonne nel gruppo.

Il vantaggio dato dall'uso dell'attributo span è che l'autore può raggruppare assieme le informazioni inerenti le ampiezze delle colonne. Così, se la tabella contiene quaranta colonne, e ognuna di esse è ampia 20 pixel, è più facile scrivere:

   <COLGROUP span="40" width="20">
   </COLGROUP>

che:

   <COLGROUP>
      <COL width="20">
      <COL width="20">
      ...un totale di 40 elementi COL...
   </COLGROUP>

Quando è necessario scegliere una colonna (ad es., per informazioni di stile, per specificare l'ampiezza, ecc.) dall'interno del gruppo, gli autori devono identificarla con l'elemento COL. Così, per applicare informazioni speciali sullo stile dell'ultima colonna della tabella precedente, la estraiamo nel seguente modo:

   <COLGROUP width="20">
      <COL span="39">
      <COL id="formattami-in-modo-speciale">
   </COLGROUP>

L'attributo width dell'elemento COLGROUP è ereditato da tutte le 40 colonne. Il primo elemento COL si riferisce alle prime 39 colonne (non esegue niente di speciale con esse) ed il secondo attributo assegna un valore id alla quarantesima colonna in modo che il foglio di stile si possa riferire ad essa.

La tabella del seguente esempio contiene due gruppi di colonne. Il primo gruppo di colonne contiene 10 colonne, mentre il secondo ne contiene 5. L'ampiezza predefinita per ogni colonna del primo gruppo è di 50 pixel. L'ampiezza di ogni colonna del secondo gruppo sarà la minima richiesta per questa colonna.

<TABLE>
<COLGROUP span="10" width="50">
<COLGROUP span="5" width="0*">
<THEAD>
<TR><TD> ...
</TABLE>

L'elemento COL 

<!ELEMENT COL      - O EMPTY           -- colonna della tabella -->
<!ATTLIST COL                          -- gruppo di colonne e proprietà --
  %attrs;                              -- %coreattrs, %i18n, %events --
  span        NUMBER         1         -- attributi COL che influenzano N colonne --
  width       %MultiLength;  #IMPLIED  -- specificazione dell'ampiezza della colonna --
  %cellhalign;                         -- allineamento orizzontale nella cella --
  %cellvalign;                         -- allineamento verticale nella cella --
  >

Tag iniziale: richiesto, Tag finale: proibito

Definizione degli attributi

span = number [CN]
Questo attributo, il quale valore deve essere un numero intero superiore a 0, specifica il numero delle colonne "spanned" (portate) dall'elemento COL l'elemento COL fa in modo che tutte le colonne "portate" condividano gli stessi attributi. Il valore predefinito per questo attributo è 1 (cioé l'elemento COL si riferisce ad una singola colonna). Se l'attributo span è impostato N > 1, il corrente elemento COL fa si che vengano condivise le ampiezze per un numero N-1 di colonne.
width = multi-length [CN]
Questo attributo specifica l'ampiezza predefinita di ogni colonna portata dal corrente elemento COL. Esso ha lo stesso significato dell'attributo width per l'elemento COLGROUP e lo sovrascrive.

Attributi definiti altrove

L'elemento COL consente agli autori di raggruppare assieme le specificazioni degli attributi per le colonne della tabella. L'elemento COL non deve strutturare contemporaneamente le colonne del gruppo -- questo è compito dell'elemento COLGROUP. Gli elementi COL sono vuoti e servono esclusivamente da supporto per gli attributi. Esso può apparire all'interno o all'esterno di un esplicito gruppo di colonne (cioé, elemento COLGROUP).

L'attributo width per l'elemento COL si riferisce all'ampiezza di ciascuna colonna negli elementi "portati".

Calcolare il numero delle colonne in una tabella 

Esistono due modi per determinare il numero delle colonne in una tabella (in ordine di precedenza):

  1. Se l'elemento TABLE contiene alcuni elementi COLGROUP o COL, l'interprete dovrebbe calcolare il numero delle colonne sommando quanto segue:
  2. Altrimenti, se l'elemento TABLE non contiene gli elementi COLGROUP o COL, gli interpreti dovrebbero ottenere il numero delle colonne in base a quanto richiesto dalle righe. Il numero delle colonne è uguale al numero di colonne richieste dalla riga con il maggior numero di colonne, includendo le celle che si espandono su più colonne. Per ogni riga che possiede un numero di colonne inferiore a questo, il suo fine riga verrà riempita da celle vuote. La "fine" della riga dipende dalla direzionalità della tabella.

È un errore se la tabella contiene gli elementi COLGROUP o COL e i due calcoli non danno per risultato lo stesso numero di colonne.

Dopo che l'interprete ha calcolato il numero delle colonne nella tabella, può raggrupparle all'interno di un gruppo di colonne.

Per esempio, per ognuna delle seguenti tabelle, il risultato dei due metodi di calcolo dovrebbe essere: tre colonne. La prime tre tabelle potrebbe essere presentata in maniera incrementale.

<TABLE>
<COLGROUP span="3"></COLGROUP>
<TR><TD> ...
...righe...
</TABLE>

<TABLE>
<COLGROUP>
<COL>
<COL span="2">
</COLGROUP>
<TR><TD> ...
...righe...
</TABLE>

<TABLE>
<COLGROUP>
<COL>
</COLGROUP>
<COLGROUP span="2">
<TR><TD> ...
...righe...
</TABLE>

<TABLE>
<TR>
  <TD><TD><TD>
</TR>
</TABLE>

Calcolare l'ampiezza delle colonne 

Gli autori possono specificare le ampiezze delle colonne in tre modi:

Fisso
Una specificazione d'ampiezza fissa viene data in pixel (ad es., width="30"). La specificazione di un'ampiezza fissa abilita alla presentazione incrementale.
Percentuale
Una specificazione in percentuale (ad es., width="20%") è basata sulla percentuale dello spazio orizzontale disponibile per la tabella (tra i margini correnti di sinistra e destra, incluso il galleggiamento di oggetti). Da notare che questo spazio non dipende dalla tabella, e così una specificazione in percentuale abilita la presentazione incrementale.
Proporzionale
Le specificazioni proporzionali (ad es, width="3*") si riferiscono a porzioni dello spazio orizzontale richiesto dalla tabella. Se l'ampiezza della tabella è data da un valore fisso mediante l'attributo width dell'elemento TABLE gli interpreti possono presentare la tabella in modo incrementale in egual modo con colonne proporzionali.

Comunque, se la tabella non ha un'ampiezza fissa, gli interpreti devono ricevere tutti i dati della tabella prima di poter determinare lo spazio orizzontale richiesto dalla stessa. Solo allora questo spazio viene assegnato tra le colonne proporzionali.

Se un autore non specifica informazioni d'ampiezza per una colonna, l'interprete non potrà essere abilitato alla formattazione incrementale della tabella, deve attendere il recupero dell'intera colonna di dati prima di poter assegnare un'ampiezza appropriata.

Se l'ampiezza della colonna dimostra di essere troppo stretta per il contenuto di particolari celle, gli interpreti possono scegliere di rieseguire il flusso dei dati (ovverosia ricaricare i dati della tabella).

La tabella in questo esempio contiene sei colonne. La prima non appartiene ad un esplicito gruppo di colonne. Le tre successive appartengono al primo esplicito gruppo di colonne, e le ultime due appartengono al secondo gruppo esplicito di colonne. Questa tabella non può essere formattata in maniera incrementale in quanto contiene delle specificazioni d'ampiezze di colonne espresse in modo proporzionale, e l'attributo width dell'elemento TABLE è senza valore.

Una volta che l'interprete (visuale) abbia ricevuto i dati della tabella: lo spazio orizzontale disponibile verrà assegnato dall'interprete in questo modo: Per prima cosa, l'interprete assegnera 30 pixel alle colonne 1 e 2. Poi, lo spazio minimo richiesto per la terza colonna verrà riservato. Lo spazio orizzontale rimasto verrà diviso in sei porzioni uguali (così 2* + 1* + 3* = 6 porzioni). La colonna quattro (2*) riceverà due di questa porzioni, la colonna cinque (1*) ne riceverà una, e la sesta colonna (3*) ne riceverà tre.

    
<TABLE>
<COLGROUP>
   <COL width="30">
<COLGROUP>
   <COL width="30">
   <COL width="0*">
   <COL width="2*">
<COLGROUP align="center">
   <COL width="1*">
   <COL width="3*" align="char" char=":">
<THEAD>
<TR><TD> ...
...righe...
</TABLE>

Abbiamo impostato il valore dell'attributo align nel terzo gruppo di colonne con "center" (centrato). Tutte le celle in tutte le colonne di questo gruppo ereditano questo valore, ma potrebbero sovrascriverlo. In effetti, l'elemento COL finale esegue proprio questa operazione, specificando che ogni cella della colonna è governata e allineata dal carattere ":".

Nella seguente tabella, la specificazione dell'ampiezza della colonna permette all'interprete la formattazione incrementale della stessa:

    
<TABLE width="200">
<COLGROUP span="10" width="15">
<COLGROUP width="*">
   <COL id="penultima-colonna">
   <COL id="ultima-colonna">
<THEAD>
<TR><TD> ...
...righe...
</TABLE>

Le prime dieci colonne sono ampie 15 pixel cadauna. Le ultime due colonne riceveranno la metá dei rimanenti 50 piexel. Da notare che gli elementi COL appaiono solo quando il valore id può essere specificato per le ultime due colonne.

Annotazione. Benchè l'attributo width dell'elemento TABLE non sia disapprovato, gli autori sono incoraggiati all'uso dei fogli di stile per specificare l'ampiezza della tabella.

11.2.5 Righe della tabella: l'elemento TR

<!ELEMENT TR       - O (TH|TD)+        -- riga della tabella -->
<!ATTLIST TR                           -- riga della tabella --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- allineamento orizzontale nelle celle --
  %cellvalign;                         -- allineamento verticale nelle celle --
  >

Tag iniziale: richiesto, Tag finale: facoltativo

Attributi definiti altrove

Gli elementi TR sono dei contenitori per una riga di celle della tabella. Il tag finale può essere omesso.

Questo esempio di tabella contiene tre righe, ognuna di esse inizia con l'elemento TR:

<TABLE summary="Questa tabella descrive il numero di tazze di Caffé consumate da
                ciascun Senatore, il tipo di Caffé (decaffeinato o normale), e
                quanti lo prendano zuccherato.">
<CAPTION>Tazze di Caffé consumate da ciascun Senatore</CAPTION>
<TR> ...la riga d'intestazione...
<TR> ...la prima riga di dati...
<TR> ...la seconda riga di dati...
...il resto della tabella...
</TABLE>

11.2.6 Celle della tabella: Gli elementi TH e TD

<!ELEMENT (TH|TD)  - O (%flow;)*       -- celle di intestazione, celle di dati della tabella -->

<!-- L'uso dell'attributo "scope" è più semplice dell'attributo "axis" per tabelle comuni -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">

<!-- TH è per le intestazioni, TD per i dati, ma per le celle che agiscono in ambo i modi, usare TD -->
<!ATTLIST (TH|TD)                      -- cella d'intestazione o di dati--
  %attrs;                              -- %coreattrs, %i18n, %events --
  abbr        %Text;         #IMPLIED  -- abbreviazione per la cella d'intestazione --
  axis        CDATA          #IMPLIED  -- nomi dei gruppi delle relative intestazioni--
  headers     IDREFS         #IMPLIED  -- elenco degli identificatori per le celle d'intestazione --
  scope       %Scope;        #IMPLIED  -- ambito ricoperto dalle celle d'intestazione --
  rowspan     NUMBER         1         -- numero delle righe che subiscono l'espansione di una cella --
  colspan     NUMBER         1         -- numero delle colonne che subiscono l'espansione di una cella --
  %cellhalign;                         -- allineamento orizzontale nelle celle --
  %cellvalign;                         -- allineamento verticale nelle celle --
  >

Tag iniziale: richiesto, Tag finale: facoltativo

Definizione degli attributi

headers = idrefs [CS]
Questo attributo specifica l'elenco delle celle d'intestazione che forniscono informazioni d'intestazione per la cella di dati corrente. Il valore di questo attributo è un elenco di nomi di cella separati tra di loro da uno spazio; queste celle devono essere nominate impostando il loro attributo id. Gli autori usano generalmente l'attributo headers per aiutare gli interpreti non visuali nella presentazione delle informazioni d'intestazione riguardanti le celle di dati (ad es., le informazioni della testata sono parlate prima delle celle di dati), ma l'attributo potrebbe anche essere usato congiuntamente con i fogli di stile. Vedere anche l'attributo scope.
scope = scope-name [CI]
Questo attributo specifica l'insieme delle celle di dati per le quali, la cella di testata corrente fornisce le informazioni d'intestazione. Questo attributo può essere usato al posto dell'attributo headers, particolarmente per tabelle semplici. Quando specificato, questo attributo deve avere uno dei seguenti valori:
  • row: La cella corrente fornisce informazioni d'intestazione per il resto delle righe che la contengono (vedere anche il capitolo sulla direzionalità della tabella).
  • col: La cella corrente fornisce informazioni d'intestazione per il resto delle colonne che la contengono.
  • rowgroup: La cella corrente fornisce informazioni d'intestazione per il resto del gruppo di righe che la contiene.
  • colgroup: La cella corrente fornisce informazioni d'intestazione per il resto del gruppo di colonne che la contiene.
abbr = text [CS]
Questo attributo dovrebbe essere usato per fornire la forma abbreviata dei contenuti della cella, e può essere presentato dagli interpreti quando sia appropriato rispetto ai contenuti stessi. I nomi abbreviati dovrebbero essere corti in modo da essere presentati ripetutamente dagli interpreti. Per esempio, un sintetizzatore vocale può presentare l'intestazione abbreviata, relativa ad una particolare cella, prima di presentarne i contenuti.
axis = cdata [CI]
Questo attributo può essere usato per collocare una cella all'interno di categorie concettuali, che possono essere considerate per formare assi in uno spazio a più dimensioni. Gli interpreti potrebbero dare agli utenti l'accesso a queste categorie (ad es., l'utente può richiedere all'interprete tutte le celle che sono assegnate a specifiche categorie, l'interprete potrebbe presentare la tabella sottoforma di sommario, ecc.). Si prega di consultare il capitolo sulla categorizzazione delle celle per ulteriori informazioni. Il valore di questo attributo è un elenco di categorie, separate tra di loro da una virgola.
rowspan = number [CN]
Questo attributo specifica il numero di righe interessate dall'estensione della cella corrente. Il valore predefinito di questo attributo è ("1"). Il valore ("0") significa che la cella si espande su tutte le righe a partire dalla quella corrente sino all'ultima riga della tabella.
colspan = number [CN]
Questo attributo specifica il numero delle colonne interessate all'espansione della cella corrente. Il valore predefinito è ("1"). Il valore ("0") significa che la cella si espande su tutte le colonne a partire da quella corrente sino all'ultima colonna della tabella.
nowrap [CI]
Disapprovato. Quando presente, questo attributo boleano indica all'interprete visuale di disabilitare l'automatico ritorno a capo del testo per questa cella. Per aggiungere effeti di ritorno a capo del testo, dovrebbero essere usati i Fogli di Stile al posto di questo attributo. Annotazione. Se usato inopportunamente, questo attributo può far risultare le celle molto ampie.
width = pixels [CN]
Disapprovato. Questo attributo fornisce agli interpreti un'ampiezza di cella raccomandata.
height = pixels [CN]
Disapprovato. Questo attributo fornisce agli interpreti un'altezza di cella raccomandata.

Attributi definiti altrove

Le celle delle tabelle possono contenere due tipi di informazioni: informazioni d'intestazione e dati. Questa distinzione abilita gli interpreti alla presentazione delle celle d'intestazione e delle celle di dati in due modi distinti, pari a quando siano assenti i fogli di stile. Per esempio, gli interpreti visuali potrebbero presentare il testo della cella d'intestazione con un carattere in grassetto. I sintetizzatori vocali potrebbero pronunciare le informazioni d'intestazione con una distinta inflessione vocale.

L'elemento TH definisce la cella che contiene le informazioni d'intestazione. Gli interpreti hanno due spezzoni di informazioni d'intestazione disponibili: il contenuto dell'elemento TH e il valore dell'attributo abbr. Gli interpreti devono presentare entrambi i contenuti delle celle oppure il valore dell'attributo abbr. Per i media visuali, il secondo modo può essere appropriato quando lo spazio è insufficiente per la presentazione dell'intero contenuto della cella. Per i media non visuali l'attributo abbr potrebbe essere usato come un'abbreviazione per la testata della tabella, quando questa è presentata insieme con i contenuti delle celle a cui l'attributo si applica.

Gli attributi headers e scope permettono inoltre agli autori di aiutare gli interpreti non visuali ad elaborare le informazioni d'intestazione. Si prega di consultare il capitolo sull'etichettatura delle celle per gli interpreti non visuali per informazioni ed esempi.

L'elemento TD definisce una cella che contiene dati.

Le celle potrebbero essere vuote (cioé, non contengono dati).

Per esempio, La seguente tabella contiene quattro colonne di dati, ad ognuna di queste colonne è stata impostata un'intestazione mediante la descrizione della colonna.

<TABLE summary="Questa tabella descrive il numero di tazze di Caffé consumate da
                ciascun Senatore, il tipo di Caffé (decaffeinato o normale), e
                quanti lo prendano zuccherato.">
<CAPTION>Tazze di Caffé consumate da ciascun Senatore</CAPTION>
<TR>
   <TH>Nome</TH>
   <TH>Tazze</TH>
   <TH>Tipo di Caffé</TH>
   <TH>Zuccherato?</TH>
<TR>
   <TD>T. Sexton</TD>
   <TD>10</TD>
   <TD>Espresso</TD>
   <TD>No</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD>5</TD>
   <TD>Decaffeinato</TD>
   <TD>Si</TD>
</TABLE>

Un interprete presenta ad un dispositivo testuale questo, che potrà essere visualizzato come segue:

Nome         Tazze      Tipo di Caffé    Zuccherato?
T. Sexton    10         Espresso         No
J. Dinnen    5          Decaffeinato     Si

Celle che si espandono su più righe o colonne 

Le celle possono espandersi su varie righe o colonne. Il numero delle righe o delle colonne interessate da questa espansione è impostato mediante gli attributi rowspan e colspan per gli elementi TH e TD.

In questa definizione di tabella, specifichiamo che la cella in quarta riga, all'altezza della seconda colonna deve espandersi su un totale di tre colonne, includendo la colonna corrente.

<TABLE border="1">
<CAPTION>Tazze di Caffé consumate da ciascun Senatore</CAPTION>
<TR><TH>Nome<TH>Tazze<TH>Tipo di Caffé<TH>Zuccherato?
<TR><TD>T. Sexton<TD>10<TD>Espresso<TD>No
<TR><TD>J. Dinnen<TD>5<TD>Decaffeinato<TD>Si
<TR><TD>A. Soria<TD colspan="3"><em>Non disponibile</em>
</TABLE>

Questa tabella potrebbe essere presentata da un interprete su un dispositivo testuale come segue:

Tazze di Caffé consumate da ciascun Senatore
 -------------------------------------------
 |   Nome  |Tazze|Tipo di Caffé|Zuccherato?|
 -------------------------------------------
 |T. Sexton|10   |Espresso     |No         |
 -------------------------------------------
 |J. Dinnen|5    |Decaffeinato |Yes        |
 -------------------------------------------
 |A. Soria |Non disponibile                |
 -------------------------------------------

Il prossimo esempio illustra (con l'aiuto dei bordi della tabella) come le definizioni delle celle che si espandono, su più di una riga o colonna influenzino la definizione delle celle successive. Considerare la seguente definizione di tabella:

<TABLE border="1">
<TR><TD>1 <TD rowspan="2">2 <TD>3
<TR><TD>4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>

Siccome la cella "2" si espande sulla seconda riga, la definizione della seconda riga ne terrà conto. Così, il secondo TD nella riga due definisce attualmente la terza cella della riga. Visualmente, la tabella verrebbe presentata a un dispositivo testuale come:

-------------
| 1 | 2 | 3 | 
----|   |----
| 4 |   | 6 |
----|---|----
| 7 | 8 | 9 |
-------------

Come un interprete grafico potrebbe presentarla in questo modo:

Immagine di una tabella con rowspan=2

Da notare, che se l'elemento TD che definisce la cella "6" viene omesso, un'ulteriore cella vuota verrà aggiunta dall'interprete per completare la riga.

Similmente, nella seguente definizione di tabella:

<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD colspan="2">4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>

la cella "4" si espande su due colonne, pertanto il secondo TD definisce attualmente la terza cella nella riga, ovverosia la numero "6":

-------------
| 1 | 2 | 3 | 
--------|----
| 4     | 6 |
--------|----
| 7 | 8 | 9 |
-------------

Un interprete grafico presenta quanto definito in questo modo:

Immagine di una tabella con colspan=2

Definire una sovrapposizione delle espansioni delle celle è un errore. Gli interpreti possono variare il modo in cui gestiscono questa condizione d'errore (ad es., la presentazione può variare).

Il seguente esempio illegale illustra come uno potrebbe creare celle che si sovrappongono. In questa tabella, la cella "5" si espande su due righe e la cella "7" su due colonne, pertanto questa risulta una sovrapposizione di celle tra la "7" e la "9":

<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD>4 <TD rowspan="2">5 <TD>6
<TR><TD colspan="2">7 <TD>9
</TABLE>

11.3 Formattazione della tabella da parte di interpreti visuali

Annotazione. Il seguente paragrafo descrive gli attributi della tabella HTML che riguardano la formattazione visuale. Benchè i fogli di stile offrono un migliore controllo per la formattazione visuale, come scritto nella specifica, il linguaggio [CSS1] non offre i meccanismi di controllo per tutti gli aspetti della formattazione visuale della tabella.

L'HTML 4.0 include i meccanismi di controllo:

11.3.1 bordi e separatori

I seguenti attributi influiscono le cornici esterne delle tabelle ed i separatori interni.

Definizione degli attributi

frame = void|above|below|hsides|lhs|rhs|vsides|box|border [CI]
Questo attributo specifica quale lato della cornice che contorna la tabella sia visibile. Valori possibili:
  • void: Non visualizza nessun lato. Questo è il valore predefinito.
  • above: Rende visibile solo il lato superiore.
  • below: Rende visibile solo il lato inferiore.
  • hsides: Rende visibili solo il lati superiore ed inferiore.
  • vsides: Rende visibili solo il lati destro e sinistro.
  • lhs: Rende visibile solo il lato sinistro.
  • rhs: Rende visibile solo il lato destro.
  • box: Rende visibili tutti e quatro i lati.
  • border: Rende visibili tutti e quatro i lati.
rules = none|groups|rows|cols|all [CI]
Questo attributo specifica quali separatori appariranno tra le celle della tabella. La presentazione dei separatori dipende dall'interprete. Valori possibili:
  • none: Separatori assenti. Questo è il Valore predefinito.
  • groups: I separatori appariranno solo tra i gruppi di righe (vedere THEAD, TFOOT, e TBODY) ed i gruppi di colonne (vedere COLGROUP e COL).
  • rows: I separatori appariranno solo tra le righe.
  • cols: I separatori appariranno solo tra le colonne.
  • all: I separatori appariranno tra tutte le righe e tra tutte le colonne.
border = pixels [CN]
Questo attributo specifica l'ampiezza (espressa esclusivamente con l'unità pixel) della cornice attorno alla tabella (vedere le annotazioni successive per ulteriori informazioni inerenti questo attributo).

Per facilitare la distinzione tra le celle di una tabella, possiamo impostare l'attributo border dell'elemento TABLE. Considerando il precedente esempio:

<TABLE border="1"
       summary="Questa tabella descrive il numero di tazze di Caffé consumate da
                ciascun Senatore, il tipo di Caffé (decaffeinato o normale), e
                quanti lo prendano zuccherato.">
<CAPTION>Tazze di Caffé consumate da ciascun Senatore</CAPTION>
<TR>
   <TH>Nome</TH>
   <TH>Tazze</TH>
   <TH>Tipo di Caffé</TH>
   <TH>Zuccherato?</TH>
<TR>
   <TD>T. Sexton</TD>
   <TD>10</TD>
   <TD>Espresso</TD>
   <TD>No</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD>5</TD>
   <TD>Decaffeinato</TD>
   <TD>Si</TD>
</TABLE>

Nell'esempio seguente, l'interprete dovrebbe mostrare i bordi spessi 5 pixel nei lati sinistro e destro della tabella, con i separatori disegnati tra le colonne.

<TABLE border="5" frame="vsides" rules="cols">
<TR> <TD>1 <TD>2 <TD>3
<TR> <TD>4 <TD>5 <TD>6
<TR> <TD>7 <TD>8 <TD>9
</TABLE>

Le seguenti impostazioni dovrebbero essere osservate dgli interpreti per la compatibilità all'indietro.

Per esempio, le definizioni seguenti sono equivalenti:

<TABLE border="2">
<TABLE border="2" frame="border" rules="all">

è come la seguente:

<TABLE border>
<TABLE frame="border" rules="all">

Annotazione. L'attributo border definisce altresì il comportamento del bordo gli elementi OBJECT e IMG ma prende valori differenti per questi elementi.

11.3.2 Allineamento orizzontale e verticale

I seguenti attributi possono essere impostati per differenti elementi della tabella (vedere le loro definizioni).

<!-- Attributi per l'allineamento orizzontale dei contenuti delle celle -->
<!ENTITY % cellhalign
  "align      (left|center|right|justify|char) #IMPLIED
   char       %Character;    #IMPLIED  -- carattere d'allineamento, ad es. char=':' --
   charoff    %Length;       #IMPLIED  -- compensazione per l'allineamento caratteri --"
  >
<!-- Attributi per l'allineamento verticale dei contenuti delle celle -->
<!ENTITY % cellvalign
  "valign     (top|middle|bottom|baseline) #IMPLIED"
  >

Definizione degli attributi

align = left|center|right|justify|char [CI]
Questo attributo specifica l'allinemamento dei dati e la giustificazione del testo in una cella. Valori possibili:
  • left: Flusso sinistro dei dati, testo giustificato a sinistra. questo è il valore predefinito per i dati delle.
  • center: Dati centrati, testo giustificato centralmente. Questo è il valore predefinito per le intestazioni della tabella.
  • right: Flusso destro dei dati, testo giustificato a destra.
  • justify: Doppia giustificazione del testo.
  • char: Allineamento del testo attorno ad uno specifico carattere.
valign = top|middle|bottom|baseline [CI]
Questo attributo specifica la posizione verticale dei dati nella cella. Valori possibili:
  • top: I dati della cella sono allineati con il vertice della stessa.
  • middle: I dati della cella sono centrati verticalmente con la stessa. Questo è il valore predefinito.
  • bottom: I dati della cella sono allinemati con il fondo della stessa.
  • baseline: Tutte le celle nella stessa riga, come una cella il cui attributo valign ha questo valore, devono avere i propri dati testuali posizionati in modo che la prima linea di testo cada nella linea base comune a tutte le celle della riga. Questa costrizione non si applica alle susseguenti linee di testo presenti in queste celle.
char = character [CN]
Questo attributo specifica un carattere singolo, con il quale un frammento di testo interagisce come con un'asse per l'allineamento. Il valore predefinito per questo attributo è il punto decimale del carattere per il linguaggio corrente impostato dall'attributo lang (ad es., il punto (".") nella lingua Inglese, la virgola (",") in quella Francese). Agli interpreti non viene richiesto di supportare questo attributo.
charoff = length [CN]
Quando presente, questo attributo specifica la compensazione al primo avvenimento del carattere dell'allineamento su ciascuna linea. Se una linea non include il carattere d'allineamento, dovrebbe essere spostato alla fine della posizione allineata.

Quando charoff è usato per impostare la compensazione di un carattere d'allineamento, la direzione della compensazione è determinata dalla direzione del testo corrente (impostata mediante l'attributo dir). Nel testo sinistra verso destra (quello predefinito), la compensazione è effettuata dal margine destro. Agli interpreti non viene richiesto di supportare questo attributo.

La tabella in questo esempio allinea le righe con valori valutari attorno al punto decimale. Settiamo esplicitamente il carattere d'allineamento con ".".

<TABLE border="1">
<COLGROUP>
<COL><COL align="char" char=".">
<THEAD>
<TR><TH>Vegetali <TH>Costo per chilogrammo
<TBODY>
<TR><TD>Lattuga        <TD>$1
<TR><TD>Carote argentate<TD>$10.50
<TR><TD>Rape dorate <TD>$100.30
</TABLE>

La tabella così formattata può risultare la seguente:

----------------------------------------
|    Vegetale    |Costo per chilogrammo|
|----------------|---------------------|
|Lattuga         |                $1   |
|----------------|---------------------|
|Carote argentate|               $10.50|
|----------------|---------------------|
|Rape dorate     |              $100.30|
----------------------------------------

Quando i contenuti delle celle contengono più di un'istanza di carattere d'allineamento specificata da char ed i contenuti ritornano a capo, il comportamento dell'interprete è indefinito. Gli autori devono perciò fare attenzione nell'uso dell'attributo char.

Annotazione. Gli interpreti visuali presentano, tipicamente, gli elementi TH centrati sia arizzontalmente che verticalmente e con il carattere in stile grassetto.

Ereditarietà delle specifiche di allineamento 

L'allineamento dei contenuti delle celle può essere specificato in una cella mediante la cella di base, o ereditato dagli elementi inclusi, come dalla riga, dalla colonna o dalla tabella stessa.

L'ordine di preferenza (per importanza dall'alto al basso) per gli attributi align, char, e charoff è il seguente:

  1. Un attributo di allineamento impostato in un elemento con celle di dati (ad es., P).
  2. Un attributo di allineamento impostato in una cella (TH e TD).
  3. Un attributo di allineamento impostato in un elemento di raggruppamento colonne (COL e COLGROUP). Quando una cella è parte di più colonne con celle espanse, la proprietà d'allineamento è ereditata dalla definizione della cella che si espande per prima.
  4. Un attributo di allinemaento impostato in una riga o in un elemento di raggruppamento di righe (TR, THEAD, TFOOT, e TBODY). Quando una cella è parte di più righe con celle espanse, la proprietà d'allineamento è ereditata dalla definizione della cella che si espande per prima.
  5. Un attributo di allinemaento impostato in una tabella (TABLE).
  6. Il valore di allineamento predefinito.

L'ordine di preferenza (per importanza dall'alto al basso) per gli attributi valign (è come quello per gli attributi ereditati lang, dir, e style) è il seguente:

  1. Un attributo impostato in un elemento con una cella di dati (ad es., P).
  2. Un attributo impostato in una cella (TH e TD).
  3. Un attributo impostato in una riga o in un elemento di raggruppamento di righe (TR, THEAD, TFOOT, e TBODY). Quando una cella è parte di più righe con celle espanse, il valore dell'attributo è ereditato dalla definizione della cella che si espande per prima.
  4. Un attributo impostato in un elemento di raggruppamento di colonne (COL e COLGROUP). Quando una cella è parte di più colonne con celle espanse, il valore dell'attributo è ereditato dalla definizione della cella che si espande per prima.
  5. Un attributo impostato nella tabella (TABLE).
  6. Il valore predefinito dell'attributo.

Inoltre, quando vengono presentate le celle, l'allineamento orizzontale è determinato dalla colonna che viene preferiti alla riga, al contrario per l'allineamento verticale le righe sono preferite alle colonne.

L'allineamento predefinito delle celle dipende dall'interprete. Comunque, gli interpreti dovrebbero sostituire l'attributo predefinito per la corrente direzionalità (cioé, non sempre "left" in ogni caso).

Gli interpreti che non supportano il valore "justify" dell'attributo align dovrebbero usare il valore della direzionalità ereditata al suo posto.

Annotazione. Nota che una cella può ereditare un attributo non dal proprio elemento genitore, ma dalla prima cella che si espande. Questa è un'eccezione alle regole generali sull'ereditarietà.

11.3.3 Margini delle celle

Definizione degli attributi

cellspacing = length [CN]
Questo attributo specifica quanto spazio l'interprete debba inserire tra il lato sinistro e la colonna estrema di sinistra, tra il vertice della tabella e il lato superiore della riga più alta, e lo stesso per i lati destro e inferiore della tabella. L'attributo specifica inoltre la quantità di spazio da inserire tra le celle.
cellpadding = length [CN]
Questo attributo specifica la quantità di spazio tra il bordo delle celle e il loro contenuto. Se il valore di questo attributo è una lunghezza espressa in pixel, tutti e quattro i margini devono avere questa distanza dai contenuti. Se il valore dell'attributo è una lunghezza espressa in percentuale, il margine superiore e quello inferiore devono essere equamente separati dal contenuto basato in una percentuale dello spazio verticale disponibile, e i margini sinistro e destro devono essere equamente separati dal contenuto basato su una percentuale dello spazio orizzontale disponibile.

Questi due attributi controllano lo spazio tra e dentro le celle. La seguente illustrazione spiega come siano riferiti:

L'immagine illustra come siano riferiti gli attributi cellspacing e cellpadding.

Nel seguente esempio, l'attributo cellspacing specifica che le celle devono essere separate tra loro e dalla cornice della tabella da uno spazio di venti pixel. L'attributo cellpadding specifica che il margine superiore delle celle e quello inferiore saranno separati dai contenuti delle celle dal 10% dello spazio verticale disponibile (il totale sarà del 20%). Similmente, i margini sinistro e destro delle celle saranno separati dai contenuti delle celle dal 10% dello spazio orizzontale disponibile (il totale sarà del 20%).

<TABLE cellspacing="20" cellpadding="20%">
<TR> <TD>Data1 <TD>Data2 <TD>Data3
</TABLE>

Se la tabella o determinate colonne hanno un'ampiezza fissa, cellspacing e cellpadding possono chiedere ulteriore spazio di quello assegnato. Gli interpreti possono dare a questi attributi la precedenza rispetto all'attributo width quando esiste un conflitto, ma non è richiesto.

11.4 Presentazione della tabella da parte di interpreti non visuali

11.4.1 L'associazione delle informazioni di intestazione ai dati delle celle

Gli interpreti non visuali come i sintetizzatori vocali e i dispositivi basati sul Braille possono usare gli attributi dell'elemento TD e dell'elemento TH che seguono per presentare le celle delle tabelle in modo più intuibile:

Nel seguente esempio, assegniamo informazioni d'intestazione alle celle impostando l'attributo headers. Ognuna delle celle nella stessa colonna si riferiscono alla stessa cella d'intestazione (mediante l'attributo id).

<TABLE border="1"
       summary="Questa tabella descrive il numero di tazze di Caffé consumate da
                ciascun Senatore, il tipo di Caffé (decaffeinato o normale), e
                quanti lo prendano zuccherato.">
<CAPTION>Tazze di Caffé consumate da ciascun Senatore</CAPTION>
<TR>
   <TH id="t1">Nome</TH>
   <TH id="t2">Tazze</TH>
   <TH id="t3" abbr="Tipo">Tipo di Caffé</TH>
   <TH id="t4">Zuccherato?</TH>
<TR>
   <TD headers="t1">T. Sexton</TD>
   <TD headers="t2">10</TD>
   <TD headers="t3">Espresso</TD>
   <TD headers="t4">No</TD>
<TR>
   <TD headers="t1">J. Dinnen</TD>
   <TD headers="t2">5</TD>
   <TD headers="t3">Decaffeinato</TD>
   <TD headers="t4">Si</TD>
</TABLE>

Un sintetizzatore vocale può presentare questa tabella come segue:

Caption: Tazze di Caffé consumate da ciascun Senatore
Summary: Questa tabella descrive il numero di tazze di Caffé consumate da
         ciascun Senatore, il tipo di Caffé (decaffeinato o normale), e
         quanti lo prendano zuccherato
Nome: T. Sexton,   Tazze: 10,   Tipo: Espresso,          Zuccherato: No
Nome: J. Dinnen,   Tazze: 5,    Tipo: Decaffeinato,      Zuccherato: Si

Da notare come l'intestazione "Tipo di Caffé" è abbreviata a "Tipo" usando l'attributo abbr.

Qui si trova lo stesso esempio sostituendo l'attributo scope per l'attributo headers. Da notare il valore "col" per l'attributo scope, significhi "tutte le celle della colonna corrente":

<TABLE border="1" 
       summary="Questa tabella descrive il numero di tazze di Caffé consumate da
                ciascun Senatore, il tipo di Caffé (decaffeinato o normale), e
                quanti lo prendano zuccherato.">
<CAPTION>Tazze di Caffé consumate da ciascun Senatore</CAPTION>
<TR>
   <TH scope="col">Nome</TH>
   <TH scope="col">Tazze</TH>
   <TH scope="col" abbr="Tipo">Tipo di Caffé</TH>
   <TH scope="col">Zuccherato?</TH>
<TR>
   <TD>T. Sexton</TD>
   <TD>10</TD>
   <TD>Espresso</TD>
   <TD>No</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD>5</TD>
   <TD>Decaffeinato</TD>
   <TD>Si</TD>
</TABLE>

Qui un esempio più complesso illustra altri valori per l'attributo scope:

<TABLE border="1" cellpadding="5" cellspacing="2"
  summary="Corso di storia offerto nella comunità
           Bath ordinato per nome di corso, relatore, descrizione, 
           codice, e tasse">
  <TR>
    <TH colspan="5" scope="colgroup">Corsi comunitari-- Bath Autunno 1997</TH>
  </TR>
  <TR>
    <TH scope="col" abbr="Name">Nome corso</TH>
    <TH scope="col" abbr="Tutor">Relatore corso</TH>
    <TH scope="col">Descrizine</TH>
    <TH scope="col">Codice</TH>
    <TH scope="col">Tassa</TH>
  </TR>
  <TR>
    <TD scope="row">Dopo la guerra civile</TD>
    <TD>Dr. John Wroughton</TD>
    <TD>
       Il corso esaminerà i turbolenti anni Inghilterra
       dopo il 1946. <EM>6 Conferenze settimanali,  
       inizio Lunedì 13 Ottobre.</EM>
    </TD>
    <TD>H27</TD>
    <TD>&lit;32</TD>
  </TR>
  <TR>
    <TD scope="row">Introduzione agli Anglo Sassoni Inglesi</TD>
    <TD>Mark Cottle</TD>
    <TD>
       Un corso di un giorno introduce velocemente la ricostruzione 
       del periodo medioevale degli Anglo Sassoni e della loro
       società. <EM>Saturday 18th October.</EM>
    </TD>
    <TD>H28</TD>
    <TD>&pound;18</TD>
  </TR>
  <TR>
    <TD scope="row">La gloria che fu, Grecia</TD>
    <TD>Valerie Lorenz</TD>
    <TD>
     Patria di democrazia, filosofia, cuore di teatro, casa delle 
     discussioni. I Romani hanno potuto farlo, ma i greci lo 
     facevano prima. <EM>Giorno scuola Sabato 25 Ottobre 1997</EM>
    </TD>
    <TD>H30</TD>
    <TD>&pound;18</TD>
  </TR>
</TABLE>

Un interprete grafico presenterà ciò in questo modo:

Una tabella a celle unificate

Da notare che l'uso dell'attributo scope con il valore "row". Benchè la prima cella di ogni riga contenga dei dati, non informazioni d'intestazione, l'attributo scope fa in modo che le celle di dati si comportino come delle celle di una riga d'intestazione. Questo permette ai sintetizzatori vocali di fornire il nome di corso attinente su richiesta o di affermarlo immediatamente prima di ogni contenuto di cella.

11.4.2 Categorizzazione delle celle

Gli utenti che attingono informazioni da una tabella usando un interprete vocale potrebbero ascoltare una spiegazione dei contenuti delle celle in aggiunta agli stessi. Un sistema a disposizione dell'utente per ricevere una spiegazione è quello di pronunciare informazioni d'intestazione associate prima che i contenuti delle celle vengano pronunciati dall'interprete (vedere il capitolo sull'associazione di informazioni d'intestazione con le celle dei dati).

Gli utenti potrebbero inoltre desiderare informazioni riguardanti più di una singola cella, in questo caso le informazioni d'intestazione fornite a livello cella (mediante headers, scope, e abbr) potrebbero non fornire un contesto adeguato. Consideriamo la seguente tabella, con la classificazione delle spese di vitto, alloggio e trasporto in due località (San Jose e Seattle) per alcuni giorni:

Immagine di tabella che elenca le spese di viaggio in due luoghi: San Jose e Seattle, ordinate per date, e le categorie (Pasti, Alberghi, e transporti), mostrate con sottotitoli

Gli utenti potrebbero desiderare di estrarre alcune informazioni dalla tabella nella seguente forma di richieste:

Ogni richiesta comporta una computazione da parte dell'interprete che può coinvolgere una o più celle. Per determinare, ad esempio, il costo dei pasti del 25 Agosto, l'interprete deve conoscere quali celle si riferiscano ai "pasti" (a tutti i pasti in generale) e quali si riferiscono alle "date" (in questo caso specifico il 25 Agosto), e trovare l'intersezione di questi due insiemi di celle.

Per assecondare questi tipi di richieste, il modello di tabella HTML consente agli autori di collocare celle d'intestazione e celle di dati all'interno di categorie. Per esempio, per le spese di trasporto, l'autore può raggruppare le celle d'intestazione "San Jose" e "Seattle" all'interno della categoria "luoghi", le intestazioni "Pasti", "Alberghi" e "Trasporti" nella categoria "spese", e i quattro giorni all'interno della categoria "Date". Le precedenti tre domande avrebbero ora il seguente significato:

Gli autori categorizzano le intestazioni delle celle di dati impostando l'attributo axis per le celle. Per esempio, nella tabella delle spese di viaggio, le celle che contengono informazioni sulla città di "San Jose" saranno collocate nella categoria "luoghi" come segue:

  <TH id="a6" axis="luoghi">San Jose</TH>

Ognuna delle celle contenenti informazioni relative alla città di "San Jose" devono riferirsi a questa cella d'intestazione mediante uno degli attributi headers o scope. Così, le spese per i pasti del 25 Agosto 1977 devono essere contrassegnate per riferirsi all'attributo id (il cui valore sia "a6") della cella d'intestazione "San Jose":

  
  <TD headers="a6">37.74</TD>

Ciascun attributo headers fornisce una lista di riferimenti id. Gli autori possono categorizzare le celle fornite in qualsiasi maniera (o, attorno al numero di "intestazione", quindi al nome).

Sotto contrassegniamo le spese di viaggio della tabella con informazioni di categoria:

<TABLE border="1"
          summary="Questa tabella riepiloga le spese dei viaggi
                   accorsi durante il mese di Agosto, a 
                   San Jose e Seattle">
<CAPTION>
  Riepilogo delle spese dei viaggi
</CAPTION>
<TR>
  <TH></TH>
  <TH id="a2" axis="spese">Pasti</TH>
  <TH id="a3" axis="spese">Alberghi</TH>
  <TH id="a4" axis="spese">Trasporti</TH>
  <TD>totale parziale</TD>
</TR>
<TR>
  <TH id="a6" axis="luoghi">San Jose</TH>
  <TH></TH>
  <TH></TH>
  <TH></TH>
  <TD></TD>
</TR>
<TR>
  <TD id="a7" axis="date">25 Ago 97</TD>
  <TD headers="a6 a7 a2">37.74</TD>
  <TD headers="a6 a7 a3">112.00</TD>
  <TD headers="a6 a7 a4">45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD id="a8" axis="date">26 Ago 97</TD>
  <TD headers="a6 a8 a2">27.28</TD>
  <TD headers="a6 a8 a3">112.00</TD>
  <TD headers="a6 a8 a4">45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD>totale parziale</TD>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH id="a10" axis="luoghi">Seattle</TH>
  <TH></TH>
  <TH></TH>
  <TH></TH>
  <TD></TD>
</TR>
<TR>
  <TD id="a11" axis="date">27 Ago 97</TD>
  <TD headers="a10 a11 a2">96.25</TD>
  <TD headers="a10 a11 a3">109.00</TD>
  <TD headers="a10 a11 a4">36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD id="a12" axis="date">28 Ago 97</TD>
  <TD headers="a10 a12 a2">35.00</TD>
  <TD headers="a10 a12 a3">109.00</TD>
  <TD headers="a10 a12 a4">36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TD>totale parziale</TD>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>Totale</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

Da notare che contrassegnare la tabella in questo modo permette inoltre agli interpreti di non confondere l'utente con informazioni non gradite. Per esempio, se un sintetizzatore vocale pronuncerà tutte le figure presenti nella colonna "Pasti" di questa tabella in risposta alla richiesta "Quali sono le mie spese totali per i pasti?", l'utente non sarebbe in grado di distinguere dai totali le spese giornaliere. Con un attenta categorizzazione delle celle di dati, gli autori consentono agli interpreti di effettuare importanti distinzioni semantiche nella fase di presentazione dei dati della tabella.

Certamente, non esistono limiti su come gli autori possano categorizzare le informazioni in una tabella. Nella tabella delle spese di viaggio, per esempio, potremmo aggiungere le categorie aggiuntive "totale parziale" e "totale".

Queste specifiche non richiedono agli interpreti la gestione delle informazioni fornite dall'attributo axis, ne fanno le complete raccomandazioni su come gli interpreti possono presentare le informazioni di axis agli utenti o come gli stessi possono richiedere codeste informazioni agli interpreti.

Comunque, gli interpreti, in particolare i sintetizzatori vocali, possono desiderare di estrarre le informazioni comuni ad alcune celle che sono il risultato della richiesta. Per esempio, se l'utente chiede "Quanto ho speso, per i pasti, nella città di San Jose?", l'interprete determinerà in primo luogo le celle in questione (25 Ago 1997: 37.74, 26 Ago 1997: 27.28), e quindi presenterà le informazioni. Un interprete che pronunci queste informazioni le leggerà

   Luoghi: San Jose. Date: 25 Ago 1997. spese, Pasti: 37.74
   Luoghi: San Jose. Date: 26 Ago 1997. spese, Pasti: 27.28

o, in modo più compatto:

   San Jose, 25 Ago 1997, Pasti: 37.74
   San Jose, 26 Ago 1997, Pasti: 27.28

Un eguale presentazione, più economica, estrarrà le informazioni comuni e le riordinerà:

   San Jose, Pasti, 25 Ago 1997: 37.74
                    26 Ago 1997: 27.28

Gli interpreti che supportano questo tipo di presentazione dovrebbero dotare gli interpreti di mezzi per la personalizzazione della stessa (ad es., mediante i fogli di stile).

11.4.3 Algoritmo per trovare le informazioni d'intestazione

In assenza delle informazioni d'intestazione fornite da uno degli attributi scope o headers, gli interpreti possono costruire le informazioni d'intestazione in accordo con il seguente algoritmo. L'obiettivo dell'algoritmo è quello di trovare un elenco ordinato di informazioni d'intestazione. (Nella seguente descrizione dell'algoritmo la direzionalità della tabella è presunta sia quella da sinistra verso destra.)

11.5 Semplice tabella

Questo esempio illustra raggruppamenti di righe e di colonne. Questo esempio è adattato dalla "Developing International Software", di Nadine Kano.

In "ascii art", la seguente tabella:

<TABLE border="2" frame="hsides" rules="groups"
          summary="Code page support in different versions
                   of MS Windows.">
<CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Code-Page<BR>ID
<TH>Name
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>

sarà presentata in un modo simile a questo:

                  CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
===============================================================================
Code-Page | Name                         | ACP  OEMCP | Windows Windows Windows
    ID    |                              |            |  NT 3.1 NT 3.51    95
-------------------------------------------------------------------------------
   1200   | Unicode (BMP of ISO 10646)   |            |    X       X       *
   1250   | Windows 3.1 Eastern European |  X         |    X       X       X
   1251   | Windows 3.1 Cyrillic         |  X         |    X       X       X
   1252   | Windows 3.1 US (ANSI)        |  X         |    X       X       X
   1253   | Windows 3.1 Greek            |  X         |    X       X       X
   1254   | Windows 3.1 Turkish          |  X         |    X       X       X
   1255   | Hebrew                       |  X         |                    X
   1256   | Arabic                       |  X         |                    X
   1257   | Baltic                       |  X         |                    X
   1361   | Korean (Johab)               |  X         |            **      X
-------------------------------------------------------------------------------
    437   | MS-DOS United States         |        X   |    X       X       X
    708   | Arabic (ASMO 708)            |        X   |                    X
    709   | Arabic (ASMO 449+, BCON V4)  |        X   |                    X
    710   | Arabic (Transparent Arabic)  |        X   |                    X
    720   | Arabic (Transparent ASMO)    |        X   |                    X
===============================================================================

Un interprete grafico la presenterà in questo modo:

Una tabella con gruppi di righe e colonne

Questo esempio illustra come COLGROUP possa essere usato per raggruppare colonne ed impostarne l'allineamento predefinito. Similmente, TBODY viene usato per raggruppare le righe. Gli attributi frame e rules indicano all'interprete quali bordi e separatori debba presentare.