11 Tabelle

Argomenti

  1. Introduzione alle tabelle
  2. Gli elementi per costruire le tabelle
    1. L'elemento TABLE
    2. Le didascalie della tabella: l'elemento CAPTION
    3. I gruppi di file: gli elementi THEAD, TFOOT, e TBODY
    4. I gruppi di colonne: gli elementi COLGROUP e COL
    5. Le file della tabella: l'elemento TR
    6. Le celle della tabella: gli elementi TH e TD
  3. Formazione della tabella mediante interpreti visuali
    1. I bordi e i divisori
    2. L'allineamento orizzontale e verticale
    3. I margini della cella
  4. La rappresentazione della tabella mediante interpreti non-visuali
    1. Per associare l'intestazione ai dati delle celle
    2. Per categorizzare le celle
    3. L'algoritmo per trovare l'intestazione
  5. Esempio di tabella

11.1 Introduzione alle tabelle

Il modello di tabella HTML permette agli autori di aggiustare i dati -- testo, testo predisposto, immagini, collegamenti, moduli, campi dei moduli, altre tabelle, etc. -- in file e colonne di celle.

Ciascuna tabella può avere una didascalia associata (vedere l'elemento CAPTION) che fornisce una breve descrizione dello scopo di una tabella. Una descrizione più approfondita può inoltre essere reperita (attraverso l'attributo summary) a vantaggio di persone che utilizzano interpreti vocali o basati sul Braille.

Le file della tabella possono essere raggruppate nelle sezioni di intestazione, note e corpo, (rispettivamente mediante gli elementi THEAD, TFOOT e TBODY). I gruppi di file trasmettono informazioni aggiuntive sulla struttura e possono essere resi dagli interpreti in maniera tale da far risaltare la struttura stessa. Gli interpreti possono sfruttare la divisione testata/corpo/note per supportare lo scorrimento delle sezioni di corpo indipendentemente da quelle di intestazione e di note. Quando si stampano tabelle lunghe, il contenuto della testata e delle note possono essere ripetuti in ogni pagina che contiene i dati della tabella.

Gli autori possono anche raggruppare le colonne per fornire informazioni aggiuntive sulla struttura che possono poi essere sfruttate dagli interpreti. Inoltre, gli autori possono dichiarare le proprietà della colonna al principio della definizione di una tabella (mediante gli elementi COLGROUP e COL) in modo da abilitare gli interpreti ad una visualizzazione della tabella con metodo incrementale piuttosto che dover attendere che arrivino tutti i dati della tabella prima della sua rappresentazione.

Le celle della tabella possono anche contenere un'"intestazione" (vedere l'elemento TH) oppure "dati" (vedere l'elemento TD). Le celle possono estendersi su file e colonne multiple. Il modello di tabella in HTML 4.0 permette agli autori di etichettare ogni cella in modo tale che gli interpreti non-visuali possono comunicare più facilmente all'utente il contenuto dell'intestazione riguardante la cella. Questi meccanismi non solo assistono considerevolmente gli utenti affetti da handicap della vista, ma consentono di gestire le tabelle ai browser multi-modali senza fili con limitate capacità di visualizzazione (ad es., cercapersone o telefoni abilitati al Web).

Le tabelle non dovrebbero essere utilizzate esclusivamente nel senso di impaginare il contenuto del documento poichè ciò potrebbe costituire un problema nel momento in cui debba essere reso da media non-visuali. In più, quando sono impiegate con la grafica, queste tabelle potrebbero forzare gli utenti a scorrere orizzontalmente per visualizzare una tabella concepita per un sistema con un display più largo. Per ridurre al minimo questi inconvenienti, gli autori dovrebbero utilizzare per il controllo dell'impaginazione, più che le tabelle, i fogli di stile.

Nota. Queste specifiche includono informazioni più dettagliate riguardanti le tabelle, nei paragrafi dedicati alle questioni sulla concezione logica e l'implementazione delle tabelle.

Qui appresso c'è una semplice 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
                   con occhi rossi (sia per i maschi che per le femmine).">
<CAPTION><EM>Una prova di tabella con 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 resa con qualcosa di simile su un dispositivo tty:


     Una prova di tabella con celle unificate

    /-----------------------------------------\
    |          |       Media       |  Occhi   |
    |          |-------------------|  rossi   |
    |          | altezza |  peso   |          |
    |-----------------------------------------|
    |  Maschi  | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Femmine  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/

oppure in questo modo con un interprete grafico:

A table with merged cells

11.2 Gli elementi per costruire le tabelle

11.2.1 L'elemento TABLE


<!ELEMENTO TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ATTLIST TABLE                        -- elemento di tabella --
  %attrs;                              -- %coreattrs, %i18n, %events --
  summary     %Testo;        #IMPLIED  -- scopo/struttura per emissione vocale --
  width       %Length;       #IMPLIED  -- larghezza della tabella --
  border      %Pixels;       #IMPLIED  -- controlla una cornice intorno ad una tabella --
  frame       %TFrame;       #IMPLIED  -- quale lato della cornice delineare --
  rules       %TRules;       #IMPLIED  -- divisori tra file e colonne --
  cellspacing %Length;       #IMPLIED  -- spaziatura tra le celle --
  cellpadding %Length;       #IMPLIED  -- spaziatura dentro le celle --

  >

Tag iniziale: richiesto, Tag finale: richiesto

Definizioni degli attributi

summary = text [CS]
Questo attributo fornisce un sommario dello scopo e della struttura per gli interpreti che devono rendere con media non-visuali come quelli vocali e Braille.
align = left|center|right [CI]
Disapprovato. Questo attributo specifica la posizione della tabella rispetto al documento. Valori consentiti:
  • left: la tabella è posizionata a sinistra nel documento.
  • center: la tabella è posizionata al centro del documento.
  • right: la tabella è posizionata a destra nel documento.
width = length [CN]
Questo attributo specifica la larghezza desiderata dell'intera tabella ed è riferita ad interpreti visuali. Quando il valore è espresso in percentuale, esso si riferisce allo spazio orizzontale disponibile per l'interprete. In assenza di qualsiasi specificazione, la larghezza tabellare è determinata dall'interprete.

Attributi definiti altrove

L'elemento TABLE contiene tutti gli altri elementi che specificano le intestazioni, le file, il contenuto e la composizione.

La seguente lista informativa descrive quali operazioni possono portare a termine gli interpreti quando trattano una tabella:

Il modello di tabella HTML è stato concepito in maniera tale che, con l'ausilio degli autori, gli interpreti possano rappresentare le tabelle con metodo incrementale (ad es., appena arrivino le file della tabella) piuttosto che dover attendere tutti i dati prima di cominciare a formarla.

Al fine di consentire ad un interprete di comporre una tabella in un unico passaggio, gli autori devono riferire:

Più precisamente, un interprete può rappresentare una tabella in un unico passaggio quando le larghezze delle colonne sono specificate tramite una combinazione di elementi COLGROUP e COL. Se qualcuna delle colonne è specificata in termini relativi o percentuali (vedere il paragrafo per calcolare la larghezza delle colonne), gli autori devono anche specificare la larghezza della tabella stessa.

La direzionalità della tabella 

La direzionalità di una tabella è sia quella ereditata (quella predefinita è da sinistra a destra) che quella specificata dall'attributo dir per l'elemento TABLE.

Per una tabella direzionata da sinistra a destra, la colonna zero è sul lato sinistro e la fila zero è in cima. Per una tabella direzionata da destra a sinistra, la colonna zero è sul lato destro e la fila zero è in cima.

Quando un interprete assegna celle extra ad una fila (vedere il paragrafo per calcolare il numero delle colonne in una tabella), le celle extra di una fila vengono aggiunte al lato destro della tabella se è direzionata da sinistra a destra e sul lato destro per quelle direzionate da destra a sinistra.

Notare che TABLE non è solo l'elemento sul quale dir inverte l'ordine di visualizzazione delle colonne; una fila di una singola tabella (TR) o un gruppo di colonne (COLGROUP) non può essere invertito indipendentemente.

Quando si imposta l'elemento TABLE, l'attributo dir influenza anche la direzione del testo dentro le celle della tabella (poichè l'attributo dir è derivato dagli elementi a livello blocco).

Per specificare una tabella direzionata da destra a sinistra, impostare l'attributo dir come segue:


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

La direzione del testo nelle celle individuali può essere cambiato impostando l'attributo dir in un elemento che definisce la cella. Si prega di consultare il paragrafo testo bidirezionale per maggiori informazioni sulle questioni dell'orientamento testuale.

11.2.2 Le didascalie della tabella: l'elemento CAPTION


<!ELEMENTO CAPTION  - - (%inline;)*     -- didascalia della tabella -->
<!ENTITA' % CAlign "(top|bottom|left|right)">

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

Tag iniziale: richiesto, Tag finale: richiesto

Definizioni degli attributi

align = top|bottom|left|right [CI]
Disapprovato. Per gli interpreti visuali, questo attributo specifica la posizione della didascalia rispetto alla tabella. Valori ammessi:
  • top: la didascalia è in cima alla tabella. Questo è il valore predefinito.
  • bottom: la didascalia è in fondo alla tabella.
  • left: la didascalia è alla sinistra della tabella.
  • right: la didascalia è alla destra della tabella.

Attributi definiti altrove

Quando è presente, il testo dell'elemento CAPTION dovrebbe descrivere la natura della tabella. L'elemento CAPTION è consentito solo immediatamente dopo il tag iniziale TABLE. Un elemento TABLE può contenere solo un unico elemento CAPTION.

Gli interpreti visuali permettono alle persone vedenti di afferrare rapidamente la struttra della tabella dalle intestazioni come pure dalla didascalia. Una conseguenza di ciò è che i titoli saranno spesso inadeguati, come sommario dello scopo e della struttura della tabella, per coloro che si affidano a interpreti non visuali.

Gli autori perciò dovrebbero aver cura di fornire informazioni aggiuntive che riassumano lo scopo e la struttura della tabella utilizzando l'attributo summary dell'elemento TABLE. Questo è importante in particolar modo per le tabelle senza didascalie. Gli esempi sottostanti illustrano l'uso dell'attributo summary.

Gli interpreti visuali dovrebbero evitare di scartare qualsiasi parte della tabella che includa la didascalia, a meno che venga permesso di accedere a tutte le parti, ad es. tramite scorrimenti orizzontali o verticali. Si raccomanda che il testo della didascalia non ecceda la larghezza dell tabella. (Vedere anche il paragrafo algoritmi di impaginazione consentiti.)

11.2.3 I gruppi di file: gli elementi THEAD, TFOOT, e TBODY


<!ELEMENTO THEAD    - O (TR)+           -- testata della tabella -->
<!ELEMENTO TFOOT    - O (TR)+           -- note della tabella -->

Tag iniziale: richiesto, Tag finale: facoltativo


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

Tag iniziale: facoltativo, Tag finale: facoltativo


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

Attributi definiti altrove

Le file delle tabelle possono essere raggruppate nelle sezioni testata, note e una o più corpi di tabella, utilizzando rispettivamente gli elementi THEAD, TFOOT e TBODY. Questa divisione permette agli interpreti di supportare lo scorrimento dei corpi della tabella, indipendentemente dalla testata e dalle note. Quando si stampano lunghe tabelle, i contenuti dell'intestazione e delle note possono essere ripetute su ciascuna pagina che contiene i dati della tabella.

La testata e le note dovrebbero contenere informazioni circa le colonne della tabella. Il corpo dovrebbe contenere i dati della tabella nelle file.

Quando è presente, ogni THEAD, TFOOT, e TBODY contiene un gruppo di file. Ogni gruppo di file deve contenere almeno una fila, definita dall'elemento TR.

Questo esempio illustra l'ordine e la struttura della testata, delle note e dei corpi di una tabella.


<TABLE>
<THEAD>
     <TR> ...contenuto della testata...
</THEAD>
<TFOOT>
     <TR> ...contenuto delle note...
</TFOOT>
<TBODY>
     <TR> ...prima fila del blocco uno di dati...
     <TR> ...seconda fila del blocco uno di dati...
</TBODY>
<TBODY>
     <TR> ...prima fila del blocco due di dati...
     <TR> ...seconda fila del blocco due di dati...
     <TR> ...terza fila del blocco due di dati...
</TBODY>
</TABLE>

TFOOT deve comparire prima di TBODY dentro una definizione di TABLE cosicchè l'interprete può riportare le note prima di ricevere tutte le (potenzialmente numerose) file di dati. Qui di seguito si riassumono quali tag sono richiesti e quali possono esser omessi:

Gli interpreti devono obbedire a queste regole per ragioni di compatibilità all'indietro.

La tabella dell'esempio precedente potrebbe essere abbreviata rimuovendo certi tag finali, come in:


<TABLE>
<THEAD>
     <TR> ...contenuto della testata...
<TFOOT>
     <TR> ...contenuto delle note...
<TBODY>
     <TR> ...prima fila del blocco uno di dati...
     <TR> ...seconda fila del blocco uno di dati...
<TBODY>
     <TR> ...prima fila del blocco due di dati...
     <TR> ...seconda fila del blocco due di dati...
     <TR> ...terza fila del blocco due di dati...
</TABLE>

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

11.2.4 I gruppi di colonne: gli elementi COLGROUP e COL

I gruppi di colonne permettono agli autori di creare divisioni strutturali dentro una tabella. Gli autori possono evidenziare questa struttura tramite i fogli di stile o gli attributi HTML (cioè, l'attributo rules per l'elemento TABLE). Per un saggio della presentazione visiva dei gruppi di colonne, si prega di consultare la tabella di esempio.

Una tabella può contenere un solo implicito gruppo di colonne (nessun elemento COLGROUP delimita le colonne) oppure nessun esplicito gruppo di colonne (ognuno delimitato da un'istanza dell'elemento COLGROUP).

L'elemento COL permette agli autori di dividere gli attributi fra alcune colonne senza che ciò implichi alcun raggruppamento strutturale. Lo "span" dell'elemento COL è il numero delle colonne che si divideranno gli attributi dell'elemento.

L'elemento COLGROUP  


<!ELEMENT COLGROUP - O (col)*          -- gruppo di colonne della tabella -->
<!ATTLIST COLGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  span        NUMBER         1         -- numero predefinito di colonne in un gruppo --
  width       %MultiLength;  #IMPLIED  -- larghezza predefinita per i COL inclusi --
  %cellhalign;                         -- allineamento orizzontale nelle celle --
  %cellvalign;                         -- allineamento verticale nelle celle --
  >

Tag iniziale: richiesto, Tag finale: facoltativo

Definizioni degli attributi

span = number [CN]
Questo attributo, che deve essere un integrale > 0, specifica il numero di colonne in un gruppo di colonne. I valori significano:
  • In assenza di un attributo span, ogni COLGROUP definisce un gruppo di colonne contenente una colonna.
  • Se l'attributo span è fissato su N > 0, l'elemento corrente COLGROUP definisce un gruppo di colonne contenente 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 una larghezza predefinita per ogni colonna nel gruppo di colonne corrente. In aggiunta al pixel standard, alla percentuale, ed ai valori relativi, questo attributo permette la forma speciale "0*" (zero asterisco) che significa che la larghezza di ogni colonna nel gruppo dovrebbe essere la larghezza minima necessaria per mantenere intatti i contenuti dell colonna. Questo implica che i contenuti complessivi di una colonna devono essere conosciuti prima che la sua larhezza possa essere calcolata correttamente. Gli autori dovrebbero essere coscienti del fatto che specificare "0*" impedirà agli interpreti visuali di rappresentare una tabella in maniera incrementale.

Questo attributo è scavalcato per ogni colonna in un gruppo di colonne in cui width è specificata tramite un elemento COL.

Attributi definiti altrove

L'elemento COLGROUP crea un esplicito gruppo di colonne. Il numero di colonne nel gruppo può essere specificato in due maniere, l'una escludente l'altra:

  1. L'attributo dell'elemento span (valore predefinito 1) specifica il numero di colonne nel gruppo.
  2. Ogni elemento COL nel COLGROUP rappresenta una o più colonne nel gruppo.

Il vantaggio di usare l'attributo span è che gli autori possono raggruppare insieme informazioni riguardo alle larghezze delle colonne. Così, se una tabella contiene quaranta colonne, tutte con una larghezza pari a 20 pixel, è più facile scrivere:


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

piuttosto che:


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

Quando è necessario isolare una colonna (ad es., per informazioni sullo stile, per specificare la larghezza, etc.) all'interno di un gruppo, gli autori devono identificare quella colonna con un elemento COL. Quindi, per applicare un'informazione su uno stile particolare all'ultima colonna della tabella di cui sopra, la isoliamo come segue:


   <COLGROUP width="20">
      <COL span="39">
      <COL id="dammi-stile-diverso">
   </COLGROUP>

L'attributo width dell'elemento COLGROUP è derivato da tutte le 40 colonne. Il primo elemento COL si riferisce alle prime 39 colonne (non facendo loro nulla di speciale) e assegna un secondo valore id alla quarantesima colonna cosicchè i fogli di stile possano riferirsi ad essa.

La tabella nell'esempio seguente contiene due gruppi di colonne. Il primo gruppo contiene 10 colonne mentre il secondo 5. La larghezza predefinita per ciascuna colonna nel primo gruppo è di 50 pixel. La larghezza di ciascuna colonna nel secondo gruppo sarà il minimo richiesto per quella colonna.


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

L'elemento COL  


<!ELEMENT COL      - O EMPTY           -- colonna di tabella -->
<!ATTLIST COL                          -- gruppi di colonne e proprietà --
  %attrs;                              -- %coreattrs, %i18n, %events --
  span        NUMBER         1         -- gli attributi COL influiscono su N colonne --
  width       %MultiLength;  #IMPLIED  -- specificazione della larghezza di colonna --
  %cellhalign;                         -- allineamento orizzontale nelle celle --
  %cellvalign;                         -- allineamento verticale nelle celle --
  >

Tag iniziale: richiesto, Tag finale: proibito

Definizioni degli attributi

span = number [CN]
Questo attributo, il cui valore deve essere un integrale > 0, specifica il numero di colonne "espanse" dall'elemento COL; l'elemento COL divide i suoi attributi con tutte le colonne che espande. Il valore predefinito per questo attributo è 1 (cioè, l'elemento COL si riferisce ad una sola colonna). Se l'attributo span non è impostato su N > 1, l'elemento corrente COL condivide i suoi attributi con le successive N-1 colonne.
width = multi-length [CN]
Questo attributo specifica una larghezza predefinita per ogni colonna espansa dall'elemento COL corrente. Ciò ha lo stesso significato dell'attributo width per l'elemento COLGROUP è lo scavalca.

Attributi definiti altrove

L'elemento COL permette agli autori di raggruppare insieme le specifiche degli attributi per le colonne nella tabella. L'elemento COL non raggruppa insieme le colonne in maniera strutturale -- che è il compito dell'elemento COLGROUP. Gli elementi COL sono vuoti e servono solo da supporto agli attributi. Possono apparire dentro o fuori un gruppo di colonne esplicito (ovvero, l'elemento COLGROUP).

L'attributo width per COL si riferisce alla larghezza di ogni colonna nello span dell'elemento.

Per calcolare il numero di colonne in una tabella 

Ci sono due maniere per determinare il numero delle colonne in una tabella (in ordine di precedenza):

  1. Se l'elemento TABLE contiene qualche elemento COLGROUP o COL, gli interpreti dovrebbero calcolare il numero di colonne sommando quanto segue:
  2. Altrimenti, se l'elemento TABLE non contiene elementi COLGROUP o COL, gli interpreti dovrebbero basare il numero di colonne su ciò che è richiesto dalle file. Il numero di colonne è uguale a quello richiesto dalla fila con più colonne, incluse le celle che si espandono su colonne multiple. Per ogni fila che ha meno colonne di quel numero, la fine di quella fila dovrebbe essere riempita con celle vuote. La "fine" di una fila dipende dalla direzionalità della tabella.

È un errore se una tabella contiene elementi COLGROUP o COL e i due calcoli non forniscono lo stesso numero di colonne.

Una volta che l'interprete ha calcolato il numero delle colonne nella tabella, può riunirle in gruppi di colonne.

Ad esempio, per ciascuna delle seguenti tabelle, i due metodi di calcolo per le colonne dovrebbero portare entrambi al risultato di tre colonne. Le prime tre tabelle possono essere rappresentate in maniera incrementale.


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

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

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

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

Per calcolare la larghezza delle colonne 

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

Fixed
Una specificazione di larghezza fissa è data in pixel (ad es., width="30"). Tale specificazione abilita la rappresentazione incrementale.
Percentage
Una specificazione in percentuale (ad es., width="20%") è basata sulla percentuale dello spazio orizzontale disponibile nella tabella (tra i margini sinistro e destro attuali, compresi i floats). Notare che questo spazio non dipende dalla tabella stessa, e quindi le specificazioni in percentuale abilitano la rappresentazione incrementale.
Proportional
Le specificazioni proporzionali (ad es., width="3*") si riferiscono a porzioni dello spazio orizzontale richiesto da una tabella. Se la larghezza della tabella è data con un valore fisso tramite l'attributo width dell'elemento TABLE, gli interpreti possono rappresentare la tabella in maniera incrementale perfino con colonne proporzionali.

Comunque, se la tabella non ha una larghezza fissa, gli interpreti devono ricevere tutti i dati tabellari prima che essi possano determinare lo spazio orizzontale richiesto dalla tabella. Solo allora questo spazio può essere allocato in colonne proporzionali.

Se un autore non specifica nessuna informazione per una colonna, un interprete potrebbe non essere in grado di formare in maniera incrementale la tabella dal momento che deve attendere che arrivino i dati dell'intera colonna per poter assegnare una larghezza appropriata.

Se le larghezze delle colonne risultano essere troppo strette per i contenuti di una particolare cella nella tabella, gli interpreti possono scegliere di ritoccare la tabella.

La tabella in questo esempio contiene sei colonne. La prima non appartiene a nessun gruppo di colonne specifico. Le tre successive appartengono al primo gruppo di colonne esplicito e le ultime due al secondo gruppo di colonne esplicito. Questa tabella non può essere costruita in maniera incrementale dal momento che contiene specificazioni proporzionali per la larghezza delle colonne e nessun valore per l'attributo width per l'elemento TABLE.

Appena l'interprete (visuale) ha ricevuto i dati della tabella: lo spazio orizzontale disponibile sarà allocato dall'interprete come segue: prima l'interprete assegna 30 pixel alle colonne 1 e 2. Poi, sarà riservato lo spazio minimo richiesto per la terza colonna. Lo spazio orizzontale rimanente sarà suddiviso in sei parti uguali (dal momento che 2* + 1* + 3* = 6 parti). La colonna 4 (2*) riceverà due di quelle parti, la colona 5 (1*) una mentre la colonna 6 (3*) 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> ...
...file...
</TABLE>

Abbiamo impostato il valore dell'attributo align nel terzo gruppo di colonne su "center". Tutte le celle in ogni colonna in questo gruppo ereditano questo valore, ma possono scavalcarlo. Infatti, il COL finale fa proprio ciò, specificando che ogni cella nella colonna che esso comanda sarà allineata lungo il carattere ":".

Nella seguente tabella, le specificazioni della larghezza della colonna permettono all'interprete di costruire la tabella in maniera incrementale:

    

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

Le prime dieci colonne saranno larghe 15 pixel ciascuna. Le ultime due colonne riceveranno metà dei rimanenti 50 pixel. Notare che gli elementi COL appaiono solo perchè così il valore id può essere specificato per le ultime due colonne.

Nota. Sebbene, non sia disapprovato l'attributo width sull'elemento TABLE, gli autori sono incoraggiati ad utilizzare i fogli di stile per specificare le larghezze della tabella.

11.2.5 Le file della tabella: l'elemento TR


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

Tag iniziale: richiesto, Tag finale: facoltativo

Attributi definiti altrove

L'elemento TR agisce come contenitore per una fila di celle. Il tag finale può essere omesso.

Questo esempio contiene tre file, ognuna iniziata dall'elemento TR:


<TABLE summary="Questa tabella mostra il grafico del numero di tazze
                di caffè consumate da ogni senatore, il tipo 
                di caffè (decaffeinato o normale), e se 
                zuccherato.">
<CAPTION>Tazze di caffè consumate da ogni senatore</CAPTION>
<TR> ...Una fila d'intestazione...
<TR> ...Prima fila di dati...
<TR> ...Seconda fila di dati...
...il resto della tabella...
</TABLE>

11.2.6 Le celle della tabella: gli elementi TH e TD


<!ELEMENT (TH|TD)  - O (%flow;)*       -- cella d'intestazione della tabella, cella di dati della tabella-->
<!-- Scope è più semplice che l'attributo axes per le tabelle comuni -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">

<!-- TH è per la testata, TD per i dati, ma per le celle con entrambe le funzioni usare TD -->
<!ATTLIST (TH|TD)                      -- cella di testata o di dati --
  %attrs;                              -- %coreattrs, %i18n, %events --
  abbr        %Text;         #IMPLIED  -- abbreviazione per la cella di testata --
  axis        CDATA          #IMPLIED  -- nomina i gruppi di testate correlate --
  headers     IDREFS         #IMPLIED  -- elenco degli id per le celle di testata --
  scope       %Scope;        #IMPLIED  -- campo coperto dalle celle di testata --
  rowspan     NUMBER         1         -- numero di file espanse per cella --
  colspan     NUMBER         1         -- numero di colonne espanse per cella --
  %cellhalign;                         -- allineamento orizzontale nelle celle --
  %cellvalign;                         -- allineamento verticale nelle celle --
  >

Tag iniziale: richiesto, Tag finale: facoltativo

Definizioni degli attributi

headers = idrefs [CS]
Questo attributo specifica l'elenco delle celle di testata che forniscono l'intestazione per la cella di dati corrente. Il valore di questo attributo è un elenco di nomi di celle separati da uno spazio; queste celle devono essere nominate impostando il loro attributo id. Gli autori in genere usano l'attributo headers per agevolare gli interpreti non visuali nel rappresentare l'intestazione riguardo le celle di dati (cioè, l'intestazione viene detta prima dei dati della cella), ma l'attributo può anche essere utilizzato in unione 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 l'intestazione. Questo attributo può essere al posto dell'attributo headers, particolarmente per le tabelle semplici. Quando specificato, questo attributo deve avere uno dei seguenti valori:
  • row: la cella corrente fornisce l'intestazione per il resto della fila che lo contiene (vedere anche il paragrafo sulla direzionalità della tabella).
  • col: la cella corrente fornisce l'intestazione per il resto della colonna che lo contiene.
  • rowgroup: la cella di testata fornisce l'intestazione per il resto del gruppo di file che lo contiene.
  • colgroup: la cella di testata fornisce l'intestazione pr il resto del gruppo di colonne che lo contiene.
abbr = text [CS]
Questo attributo dovrebbe essere usato per fornire una forma abbreviata del contenuto della cella, e può essere rappresentato dagli interpreti quando è appropriato al posto del contenuto della cella. I nomi abbreviati dovrebbero esser corti dal momento che gli interpreti possono rappresentarli in maniera ripetitiva. Per esempio, i sintetizzatori vocali possono rendere le intestazioni abbreviate in relazione ad una cella particolare prima di riportare il contenuto della cella.
axis = cdata [CI]
Questo attributo può essere usato per piazzare una cella in una categoria concettuale che può essere considerata come assi in uno spazio n-dimensionale. Gli interpreti possono dare agli utenti accesso a queste categorie (ovvero, l'utente può richiedere all'interprete tutte le celle che appartengono ad una certa categoria, l'interprete può presentare una tabella a mo' di indice degli argomenti, etc.). Si prega di consultare il paragrafo riguardo il categorizzare le celle per ulteriori informazioni. Il valore di questo attributo è un elenco di nomi di categoria separati da una virgola.
rowspan = number [CN]
Questo attributo specifica il numero di file espanse dalla cella corrente. Il valore predefinito di questo attributo è uno ("1"). Il valore zero ("0") significa che la cella occupa tutte le file da quella corrente fino all'ultima della tabella.
colspan = number [CN]
Questo attributo specifica il numero di colonne espanse dalla cella corrente. Il valore predefinito dell'attributo uno ("1"). Il valore zero ("0") significa che la cella occupa tutte le colonne da quella corrente fino all'ultima della tabella.
nowrap [CI]
Disapprovato. Quando presente, questo attributo booleano dice agli interpreti visuali di disabilitare il ritorno a capo automatico per il testo di questa cella. I fogli di stile dovrebbero essere utilizzati al posto di questo attributo per stabilire le regole dei ritorni a capo. Nota. Se utilizzato senza attenzione, questo attributo può determinare un'eccessiva larghezza delle celle.
width = pixels [CN]
Disapprovato. Questo attributo supporta gli interpreti con una larghezza consigliata per la cella.
height = pixels [CN]
Disapprovato. Questo attributo supporta gli interpreti con un'altezza consigliata per la cella.

Attributi definiti altrove

Le celle della tabella possono contenere due tipi di informazione: intestazioni e dati. Questa distinzione abilita l'interprete a rappresentare le celle di testata e di dati in maniera separata, anche in assenza di fogli di stile. Per esempio, gli interpreti visuali possono presentare in grassetto il testo delle celle di testata. I sintetizzatori vocali possono rendere l'intestazione con una diversa inflessione della voce.

L'elemento TH definisce una cella che contiene un'intestazione. Gli interpreti hanno a disposizione due pezzi di intestazione: i contenuti dell'elemento TH e il valore dell'attributo abbr. Gli interpreti devono rappresentare o i contenuti della cella oppure il valore dell'attributo abbr. Per i media visuali, l'ultima può essere più appropriata quando non vi sia spazio sufficiente a rappresentare tutto il contenuto della cella. Per i media non visuali abbr può essere utilizzato come un'abbreviazione per le testate della tabella quando queste siano poste lungo il contenuto delle celle alle quali si riferiscono.

Gli attributi headers e scope inoltre permettono agli autori di agevolare gli interpreti non visuali nel processare le informazioni delle testate. Si prega di consultare il paragrafo sull'etichettare le celle per gli interpreti non visuali per approfondimenti ed esempi.

L'elemento TD definisce una cella che contiene dati.

Le celle possono essere vuote (cioè, non contengono dati).

Per esempio, la seguente tabella contiene quattro colonne di dati, ognuna intestata con una colonna di descrizione.


<TABLE summary="Questa tabella mostra il grafico del numero di tazze
                di caffè consumate da ogni senatore, il tipo 
                di caffè (decaffeinato o normale), e se 
                zuccherato.">
<CAPTION>Tazze di caffè consumate da ogni senatore</CAPTION>
<TR>
   <TH>Nome</TH>
   <TH>Tazze</TH>
   <TH>Tipo di caffè</TH>
   <TH>Zucchero?</TH>
<TR>
   <TD>T. Sexton</TD>
   <TD>10</TD>
   <TD>Espresso</TD>
   <TD>No</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD>5</TD>
   <TD>Decaff.</TD>
   <TD>Sì</TD>
</TABLE>

Un interprete che debba renderla per un dispositivo tty potrebbe visualizzarla come segue:


Nome         Tazze      Tipo di caffè    Zucchero?
T. Sexton    10         Espresso         No
J. Dinnen    5          Decaff.          Sì 

Celle che si estendono su più file o colonne 

Le celle possono espandersi su più file o colonne. Il numero di file o colonne unite da una cella è determinato dagli attributi rowspan e colspan per gli elementi TH e TD.

In questa definizione di tabella, specifichiamo che la cella nella fila quattro, colonna due, dovrebbe espandersi su un totale di tre colonne, inclusa la colonna corrente.


<TABLE border="1">
<CAPTION>Tazze di caffè consumate da ogni senatore</CAPTION>
<TR><TH>Nome<TH>Tazze<TH>Tipo di caffè<TH>Zucchero?
<TR><TD>T. Sexton<TD>10<TD>Espresso<TD>No
<TR><TD>J. Dinnen<TD>5<TD>Decaff.<TD>Sì
<TR><TD>A. Soria<TD colspan="3"><em>Non disponibile</em>
</TABLE>

Questa tabella potrebbe essere resa su un dispositivo tty ad opera di un interprete come segue:


Tazze di caffè consumate da ogni senatore

 -----------------------------------------
 |   Nome  |Tazze|Tipo di caffè|Zucchero?|
 -----------------------------------------
 |T. Sexton| 10  | Espresso    | No      |
 -----------------------------------------
 |J. Dinnen| 5   | Decaff.     | Sì      |
 -----------------------------------------
 |A. Soria |Non disponibile              |
 -----------------------------------------

Il prossimo esempio illustra (con l'ausilio dei bordi di tabella) come le definizioni delle celle che uniscono più di una fila o colonna, influenzino la definizione delle celle successive. Si consideri 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" unisce la prima e la seconda fila, la definizione della seconda fila ne terrà conto. Così, il secondo TD nella fila due al momento definisce la terza cella della fila. Visivamente, la tabella potrebbe essere rappresentata ad un dispositivo tty come:


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

mentre un interprete grafico potrebbe renderla come:

Image of a table with rowspan=2

Notare che se il TD che definisce la cella "6" fosse stato omesso, sarebbe stata aggiunta una cella vuota in più dall'interprete per completare la fila.

In maniera simile, 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" unisce due colonne, cosicchè il secondo TD nella fila adesso definisce la terza cella ("6"):


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

Un interprete grafico potrebbe renderla come:

Image of a table with colspan=2

Definire delle celle che si sovrappongono è un errore. Gli interpreti possono variare il modo di gestire questo errore (cioè, cambia il risultato finale).

Il seguente esempio illegale, illustra come si potrebbero creare delle celle sovrapposte. In questa tabella, la cella "5" unisce due file mentre la cella "7" unisce due colonne, cosicchè le celle tra "7" e "9" vanno a sovrapporsi:


<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 Formazione della tabella mediante interpreti visuali

Nota.I seguenti paragrafi descrivono gli attributi della tabella HTML che concernono l'impostazione visiva. Sebbene i fogli di stile offrano un controllo migliore della suddetta impostazione, alla stesura di queste specifiche, [CSS1] non offriva dei meccanismi per controllare tutti gli aspetti dell'impostazione visiva della tabella.

HTML 4.0 include meccanismi per controllare:

11.3.1 I bordi e i divisori

I seguenti attributi influenzano la cornice esterna e i divisori interni di una tabella.

Definizioni degli attributi

frame = void|above|below|hsides|lhs|rhs|vsides|box|border [CI]
Questo attributo specifica quale lato della cornice che circonda una tabella sarà visibile. Valori possibili:
  • void: nessun lato. Questo è il valore predefinito.
  • above: solo il lato superiore.
  • below: solo il lato inferiore.
  • hsides: solo i lati superiore ed inferiore.
  • vsides: solo i lati destro e sinistro.
  • lhs: solo il lato sinistro.
  • rhs: solo il lato destro.
  • box: tutti e quattro i lati.
  • border: tutti e quattro i lati.
rules = none|groups|rows|cols|all [CI]
Questo attributo specifica quali divisori appariranno tra le celle all'interno di una tabella. La rappresentazione dei divisori è dipendente dagli interpreti. Valori possibili:
  • none: nessun divisore. Questo è il valore predefinito.
  • groups: i divisori appariranno tra i gruppi di file (vedere THEAD, TFOOT, e TBODY) e i gruppi di colonne (vedere COLGROUP e COL).
  • rows: i divisori appariranno solo tra le file.
  • cols: i divisori appariranno solo tra le colonne.
  • all: i divisori appariranno tra file e colonne.
border = pixels [CN]
Questo attributo specifica la larghezza (solo in pixel) della cornice intorno ad una tabella (vedere la nota sottostante per maggiori informazioni riguardo questo attributo).

Per agevolare la distinzione delle celle di una tabella, possiamo impostare l'attributo border per l'elemento TABLE. Si consideri un esempio precedente:


<TABLE border="1" 
       summary="Questa tabella mostra il grafico del numero di tazze
                di caffè consumate da ogni senatore, il tipo 
                di caffè (decaffeinato o normale), e se 
                zuccherato.">
<CAPTION>Tazze di caffè consumate da ogni senatore</CAPTION>
<TR>
   <TH>Nome</TH>
   <TH>Tazze</TH>
   <TH>Tipo di caffè</TH>
   <TH>Zucchero?</TH>
<TR>
   <TD>T. Sexton</TD>
   <TD>10</TD>
   <TD>Espresso</TD>
   <TD>No</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD>5</TD>
   <TD>Decaff.</TD>
   <TD>Sì</TD>
</TABLE>

Nell'esempio seguente, l'inteprete dovrebbe mostrare dei bordi spessi cinque pixel sui lati sinistro e destro della tabella, con divisori raffigurati tra ogni colonna.


<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 dagli interpreti per la compatibilità all'indietro.

Per esempio, le seguenti definizioni sono equivalenti:


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

come lo sono le seguenti:


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

Nota. L'attributo border inoltre definisce il funzionamento del bordo per gli elementi OBJECT e IMG, ma prende valori differenti per quegli elementi.

11.3.2 L'allineamento orizzontale e verticale

I seguenti attributi possonno essere impostati per diversi elementi di tabella (vedere le loro definizioni).


<!-- attributi di allineamento orizzontale per il contenuto delle celle -->
<!ENTITY % cellhalign
  "align      (left|center|right|justify|char) #IMPLIED
   char       %Character;    #IMPLIED  -- allineamento carattere, ad es. char=':' --
   charoff    %Length;       #IMPLIED  -- rientro per l'allineamento carattere --"
  >
<!-- attributi di allinemaento verticale per il contenuto delle celle -->
<!ENTITY % cellvalign
  "valign     (top|middle|bottom|baseline) #IMPLIED"
  >

Definizioni degli attributi

align = left|center|right|justify|char [CI]
Questo attributo specifica l'allineamento dei dati e la centratura del testo in una cella. Valori possibili:
  • left: dati livellati a sinistra/testo allineato a sinistra. Questo è il valore predefinito per i dati della tabella.
  • center: dati al centro/testo centrato. Questo è il valore predefinito per le testate della tabella.
  • right: dati livellati a destra/testo allineato a destra.
  • justify: testo centrato e uniforme.
  • char: allinea il testo attorno ad un carattere specifico.
valign = top|middle|bottom|baseline [CI]
Questo attributo specifica la posizione verticale dei dati all'interno di una cella. Valori possibili:
  • top: i dati della cella sono livellati in cima alla cella.
  • middle: i dati della cella sono centrati verticalmente all'interno della cella. Questo è il valore predefinito.
  • bottom: i dati della cella sono livellati sul fondo della cella.
  • baseline: tutte le celle della stessa fila come una cella il cui attributo valign avesse questo valore dovrebbero avere i loro dati testuali posizionati in modo tale che la prima linea di testo segua una linea comune a tutte le celle nella fila. Questa costrizione non si applica alle linee di testo successive in quelle stesse celle.
char = character [CN]
Questo attributo specifica un carattere singolo all'interno di un frammento di testo che agisca come ascissa per l'allineamento. Il valore predefinito di questo attributo è il carattere di punto decimale impostato per la lingua corrente come da attributo lang (ad es., il punto (".") per l'inglese e la virgola (",") per il francese). Agli interpreti non è richiesto di supportare questo attributo.
charoff = length [CN]
Quando presente, questo attributo specifica il rientro della prima ricorrenza del carattere di allineamento su ciascuna riga. Se una riga non include il carattere d'allineamento, dovrebbe essere spostata orizzontalmente fino alla fine della posizione d'allineamento.

Quando charoff è usato per impostare il rientro di un carattere d'allineamento, la direzione del rientro è determinata da quella attuale del testo (regolata dall'attributo dir). Nei testi da sinistra a destra (i predefiniti), il rientro è dal margine sinistro. Nei testi da destra a sinistra, il rientro è dal margine destro. Agli interpreti non è richiesto di supportare questo attributo.

La tabella in questo esempio allinea un fila di simboli di valuta lungo il punto decimale. Impostiamo l'allineamento al carattere "." in maniera esplicita.


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

La tabella formata assomiglierebbe alla seguente:


------------------------------
|   Vegetali   |Costo al kilo|
|--------------|-------------|
|Lattuga       |        $1   |
|--------------|-------------|
|Carote        |       $10.50|
|--------------|-------------|
|Rape          |      $100.30|
------------------------------

Quando il contenuto di una cella presenta più di un'istanza di carattere d'allineamento, specificate da char e dal ritorno a capo, il comportamento degli interpreti è imprevedible. Perciò gli autori dovrebbero essere accorti nell'uso di char.

Nota. Gli interpreti visuali di solito rappresentano gli elementi TH centrati in orizzontale ed in verticale all'interno della cella, in grassetto.

L'ereditarietà delle specifiche d'allineamento 

L'allineamento dei contenuti delle celle può essere specificato in base ad una cella per volta o ereditato dagli elementi circostanti, quali sono la fila, la colonna o la tabella stessa.

L'ordine di precedenza (dal più alto al più basso) per gli attributi align, char, e charoff è il seguente:

  1. Un attributo d'allineamento impostato su un elemnto all'interno di un dato di una cella (ad es., P).
  2. Un attributo d'allineamento impostato su una cella (TH e TD).
  3. Un attributo d'allineamento impostato su un elemento di raggruppamento colonne (COL e COLGROUP). Quando una cella è parte di un'unione multi-colonnata, la proprietà d'allineamento è ereditata dalla definizione di cella fatta al principio dell'unione.
  4. Un attributo d'allineamento impostato su un elemento di fila o di raggruppamento di file (TR, THEAD, TFOOT, e TBODY). Quando una cella è parte di un'unione multi-filare, la proprietà d'allineamento è ereditata dalla definizione di cella fatta al principio dell'unione.
  5. Un attributo d'allineamento impostato sulla tabella (TABLE).
  6. Il valore predefinito d'allineamento.

L'ordine di precedenza (dal più alto al più basso) per l'attributo valign (come pure gli altri attributi lang ereditati, dir, e style) è il seguente:

  1. Un attributo impostato su un elemento all'interno di dati per una cella (ad es., P).
  2. Un attributo impostato su una cella (TH e TD).
  3. Un attributo impostato su un elemento di fila o di raggruppamento di file (TR, THEAD, TFOOT, e TBODY). Quando una cella è parte di un'unione mullti-filare, il valore d'attributo è ereditato dalla definizione di cella fatta al principio dell'unione.
  4. Un attributo impostato su un elemento di colonna o di raggruppamento di colonne (COL e COLGROUP). Quando una cella è parte di un'unione multi-colonnata, il valore d'attributo è ereditato dalla definizione di cella fatta al principio dell'unione.
  5. Un attributo impostato sulla tabella (TABLE).
  6. Il valore predefinito d'attributo.

Inoltre, quando si rappresentano le celle, l'allineamento orizzontale è determinato preferibilmente dalle colonne che dalle file, mentre per quello verticale, le file sono preferite alle colonne.

L'allineamento predefinito per le celle dipende dall'interprete. Comunque, gli interpreti dovrebbero sostituire l'attributo predefinito per la direzionalità corrente (cioè, non solo "a sinistra" in tutti i casi).

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

Nota. Notare che una cella può ereditare un attributo non da un suo predecessore ma dalla prima cella di un'unione. Questa è un'eccezione alle regole generali dell'ereditarietà dell'attributo.

11.3.3 I margini della cella

Definizioni degli attributi

cellspacing = length [CN]
Questo attributo specifica quanto spazio dovrebbe lasciare l'interprete tra il lato sinistro della tabella e il lato sinistro della colonna più a sinistra, tra la cima della tabella e il lato superiore della fila più in alto e così via per il lato destro e inferiore della tabella. L'attributo specifica anche l'ammontare di spazio da lasciare tra le celle.
cellpadding = length [CN]
Questo attributo specifica la quantità di spazio tra il bordo della cella e il suo contenuto. Se il valore di questo attributo è una lunghezza in pixel, tutti e quattro i margini dovrebbero avere quella distanza dal contenuto. Se il valore dell'attributo è una lunghezza in percentuale, i margini superiore ed inferiore dovrebbero essere egualmente separati dal contenuto in base alla percentuale di spazio verticale disponibile, e i margini sinistro e destro dovrebbero essere egualmente separati dal contenuto in base alla percentuale di spazio orizzontale disponibile.

Questi due attributi controllano la spaziatura tra e dentro le celle. La seguente illustrazione spiega qual è la relazione tra di loro:

Immagine che illustra come sono correlati gli attributi cellspacing e cellpadding.

Nell'esempio seguente, l'attributo cellspacing specifica che le celle dovrebbero essere separate l'una dall'altra e dalla cornice della tabella di venti pixel. L'attributo cellpadding specifica che i margini superiore ed inferiore della cella saranno separati entrambi dal contenuto della cella del 10% dello spazio verticale disponibile (essendo quello totale il 20%). In maniera simile, i margini sinistro e destro della cella saranno entrambi separati dal contenuto della cella del 10% dello spazio orizzontale disponibile (essendo quello totale il 20%).


<TABLE cellspacing="20" cellpadding="20%">
<TR> <TD>Dato1 <TD>Dato2 <TD>Dato3
</TABLE>

Se una tabella o una data colonna ha una larghezza prefissata, cellspacing e cellpadding possono richiedere ancora più spazio di quello assegnato. Gli interpreti possono dare precedenza a questi attributi a discapito di quello width quando si verifichi un conflitto, ma non sono obbligati.

11.4 La rappresentazione della tabella mediante interpreti non visuali

11.4.1 Per associare l'intestazione ai dati delle celle

Gli interpreti non visuali come i sintetizzatori vocali e i dispositivi basati sul Braille possono utilizzare i seguenti elementi TD e TH per rappresentare le celle di tabelle in maniera più intuitiva:

Nell'esempio seguente, assegnamo un'intestazione alle celle impostando l'attributo headers. Ogni cella nella setssa colonna si riferisce alla stessa cella di testata (mediante l'attributo id).


<TABLE border="1" 
       summary="Questa tabella visualizza il numero delle tazze
                di caffè consumate da ogni senatore, il tipo
                di caffè (decaffeinato o normale) e se    
                zuccherato.">
<CAPTION>Tazze di caffè consumate da ogni 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">Zucchero?</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">Decaff.</TD>
   <TD headers="t4">Sì</TD>
</TABLE>

Un sintetizzatore vocale potrebbe rendere la tabella come segue:


Titolo:   Tazze di caffè consumate da ogni senatore
Sommario: Questa tabella visualizza il numero di tazze
         di caffè consumate da ogni senatore, il tipo 
         di caffè (decaffeinato o normale e se zuccherato.
Nome: T. Sexton,   Tazze: 10,   Tipo: Espresso,   Zucchero: No
Nome: J. Dinnen,   Tazze: 5,    Tipo: Decaff.,    Zucchero: Sì 

Notare come la testata "Tipo di caffè" è abbreviata in "Tipo" usando l'attributo abbr.

Qui c'è lo stesso esempio sostituendo l'attributo scope con l'attributo headers. Notare il valore "col" per l'attributo scope, che significa "tutte le celle nella colonna corrente":


<TABLE border="1" 
       summary="Questa tabella visualizza il numero delle tazze
                di caffè consumate da ogni senatore, il tipo
                di caffè (decaffeinato o normale) e se    
                zuccherato.">
<CAPTION>Tazze di caffè consumate da ogni 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">Zucchero?</TH>
<TR>
   <TD>T. Sexton</TD>
   <TD>10</TD>
   <TD>Espresso</TD>
   <TD>No</TD>
<TR>
   <TD>J. Dinnen</TD>
   <TD>5</TD>
   <TD>Decaff.</TD>
   <TD>Sì</TD>
</TABLE>

Adesso viene un esempio più complesso che illustra altri valori per l'attributo scope:


<TABLE border="1" cellpadding="5" cellspacing="2"
  summary="Corsi di storia offerti nella comunità
           Bath ordinati per nome del corso, insegnante, sommario, 
           codice, e tassa">
  <TR>
    <TH colspan="5" scope="colgroup">Corsi della Comunità -- Bath Autunno 1997</TH>
  </TR>
  <TR>
    <TH scope="col" abbr="Nome">Nome Corso</TH>
    <TH scope="col" abbr="Insegnante">Insegnante Corso</TH>
    <TH scope="col">Sommario</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à gli anni turbolenti in Inghilterra
       dopo il 1646. <EM>incontri per 6 settimane a partire da lunedì 13
      ottobre.</EM>
    </TD>
    <TD>H27</TD>
    <TD>&pound;32</TD>
  </TR>
  <TR>
    <TD scope="row">Un'introduzione all'Inghilterra sassone</TD>
    <TD>Mark Cottle</TD>
    <TD>
       Corso di un giorno introduttivo al periodo del primo
       Medioevo per ricostruire i Sassoni e la loro
       società. <EM>sabato 18 ottobre.</EM>
    </TD>
    <TD>H28</TD>
    <TD>&pound;18</TD>
  </TR>
  <TR>
    <TD scope="row">La Gloria che fu la Grecia</TD>
    <TD>Valerie Lorenz</TD>
    <TD>
     Culla della democrazia, della filosofia, cuore del teatro, casa dell'oratoria.
     I Romani possono averla praticata ma i Greci l'hanno fatto
     prima. <EM>sabato giorno di scuola 25 ottobre 1997</EM>
    </TD>
    <TD>H30</TD>
    <TD>&pound;18</TD>
  </TR>
</TABLE>

Un interpete grafico potrebbe renderla così:

A table with merged cells

Notare l'uso dell'attributo scope con il valore "row". Sebbene la prima cella in ogni fila contiene dati, non intestazioni, l'attributo scope fa sì che la cella di dati si comporti come una fila di celle di testata. Questo permette al sintetizzatore vocale di fornire il nome del corso pertinente alla richiesta o di enunciarlo immediatamente prima del contenuto di ogni cella.

11.4.2 Per categorizzare le celle

Gli utenti che consultino una tabella con un interprete basato sulla voce possono desiderare di ascoltare una spiegazione del contenuto di una cella in aggiunta al contenuto stesso. Un modo in cui l'interprete potrebbe fornire una spiegazione è quello di dire le intestazioni associate prima di dire il contenuto delle celle di dati (vedere il paragrafo per associare l'intestazione alle celle di dati).

Gli utenti potrebbero volere inoltre informazioni riguardo a più di una cella, in tal caso l'intestazione fornita al livello di cella (da headers, scope, e abbr) potrebbero non fornire un contesto adeguato. Si consideri la seguente tabella, che classifica le spese per pasti, alberghi, e trasporto in due luoghi (San Jose e Seattle) per alcuni giorni:

Immagine di una tabella che elennca spese di viaggio per due luoghi: San Jose e Seattle, per data, e categoria (pasti, alberghi, e trasporto), mostrati con sottotitoli

Gli utenti potrebbero volere estrapolare delle informazioni dalla tabella in forma di quesiti:

Ciascun quesito comporta un calcolo fatto dall'interprete che a sua volta può coinvolgere zero o più celle. Allo scopo di determinare, per esempio, i costi dei pasti del 25 agosto, l'interprete deve conoscere quali celle di tabella si riferiscono ai "Pasti" (tutte loro) e quali si riferiscono alle "Date" (specificamente, 25 agosto), e trovare l'intersezione dei due dati.

Per soddisfare questo tipo di quesito, il modello di tabella HTML 4.0 permette agli autori di porre in categorie le celle di testate e di dati. Per esempio, per la tabella delle spese di viaggio, un autore potrebbe raggruppare le celle di testata "San Jose" e "Seattle" nella categoria "Luogo", le testate "Pasti", "Alberghi", e "Trasporto" nella categoria "Spese", e i quattro giorni nella categoria "Data". Le tre precedenti domande avrebbero allora questi significati:

Gli autori categorizzano una cella di testata o di dati impostando l'attributo axis per la cella. Per esempio, nella tabella delle spese di viaggio, la cella contenente l'informazione "San Jose" potrebbe essere posta nella categoria "Luogo" come segue:


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

Ogni cella contenente informazioni relative a "San Jose" dovrebbe riferirsi a questa cella di testata sia mediante l'attributo headers o quello scope. Così, le spese per i pasti del 25-Ago-1997 dovrebbe essere marcato per riferirsi all'attributo id (il cui valore qui è "a6") della cella di testata "San Jose":

  

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

Ogni attributo headers fornisce un elenco dei riferimenti id. Gli autori possono così categorizzare una data cella in qualunque maniera (oppure, lungo qualunque numero di "headers", da cui il nome).

Sotto abbiamo marcato la tabella delle spese di viaggio con informazioni sulle categorie:


<TABLE border="1"
          summary="Questa tabella riassume le spese di viaggio
                   occorse durante gli spostamenti di agosto per
                   San Jose e Seattle">
<CAPTION>
  Viaggio Spese Rapporto
</CAPTION>
<TR>
  <TH></TH>
  <TH id="a2" axis="spese">Pasti</TH>
  <TH id="a3" axis="spese">Alberghi</TH>
  <TH id="a4" axis="spese">Trasporto</TH>
  <TD>subtotali</TD>
</TR>
<TR>
  <TH id="a6" axis="luogo">San Jose</TH>
  <TH></TH>
  <TH></TH>
  <TH></TH>
  <TD></TD>
</TR>
<TR>
  <TD id="a7" axis="data">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="data">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>subtotali</TD>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH id="a10" axis="luogo">Seattle</TH>
  <TH></TH>
  <TH></TH>
  <TH></TH>
  <TD></TD>
</TR>
<TR>
  <TD id="a11" axis="data">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="data">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>subtotali</TD>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>Totali</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

Notare che marcare così la tabella permette inoltre agli interpreti di non confondere l'utente con informazioni non richieste. Per esempio, se un sintetizzatore vocale dovesse ripetere tutte le cifre nella colonna "Pasti" della tabella in risposta alla domanda "Quanto ho speso in tutto per i miei pasti?", un utente non sarebbe in grado di distinguere le spese giornaliere dai subtotali o totali. Con una categorizzazione attenta delle celle di dati, gli autori permettono agli interpreti di fare importanti distinzioni semantiche nella rappresentazione.

Naturalmente, non ci sono limiti a come gli autori possono categorizzare le informazioni in una tabella. Nella tabella delle spese di viaggio, per esempio, avremmo potuto aggiungere le categorie "subtotali" e "totali".

Queste specifiche non impongono agli interpreti di gestire le informazioni fornite dall'attributo axis, nè emette alcuna direttiva su come gli interpreti debbano presentare agli utenti le informazioni di axis o su come gli utenti possano interrogare l'interprete su queste informazioni.

Comunque, gli interpreti, in particolar modo i sintetizzatori vocali, possono aver bisogno di estrarre informazioni comuni ad alcune celle che sono il risultato di un'interrogazione. Per esempio, se l'utente chiede "Quanto ho speso per i pasti a San Jose?", l'interprete determinerebbe prima le celle dell'interrogazione (25-Ago-1997: 37.74, 26-Ago-1997:27.28), e poi mostrerebbe questa informazione. Un interprete che legga questa informazione potrebbe dire:


   Luogo: San Jose. Data: 25-Aug-1997. Spesa, Pasti: 37.74
   Luogo: San Jose. Data: 26-Aug-1997. Spesa, Pasti: 27.28

oppure, più sinteticamente:


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

Una rappresentazione ancora più elegante estrarrebbe le informazioni comuni e le riordinerebbe:


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

Gli interpreti che supportano questo tipo di rappresentazione dovrebbero dotare gli interpreti di un mezzo per personalizzarla (ad es., attraverso i fogli di stile).

11.4.3 L'algoritmo per trovare l'intestazione

In assenza di intestazione sia nell'attributo scope che headers, gli interpreti possono costruirla in base al seguente algoritmo. L'obiettivo dell'algoritmo è quello di trovare un elenco ordinato di testate. (Nella seguente descrizione dell'algoritmo la direzionalità della tabella si presume essere da sinistra a destra.)

11.5 Esempio di tabella

Questo esempio illustra file e colonne raggruppate. E' stato adattato da "Developing International Software", ad opera di Nadine Kano.

Nell'"arte ascii", la seguente tabella:


<TABLE border="2" frame="hsides" rules="groups"
          summary="I codici di pagina supportati nelle differenti versioni
                   di MS Windows.">
<CAPTION>I CODICI DI PAGINA SUPPORTATI 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>Codici di pagina<BR>ID
<TH>Nome
<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>

verrebbe resa con qualcosa del genere:


                  CODICI DI PAGINA SUPPORTATI IN MICROSOFT WINDOWS

===============================================================================
    ID    | Nome                         | ACP  OEMCP | Windows Windows Windows
 Cod.pag. |                              |            |  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 potrebbe renderla così:

A table with grouped rows and columns

Questo esempio illustra come COLGROUP può essere utilizzato per raggruppare colonne e impostare l'allineamento di colonna predefinito. In modo simile, TBODY viene utilizzato per raggruppare le file. Gli attributi frame e rules riferiscono all'interprete quali bordi e divisori visualizzare.