17 Tabelle

Sommario

17.1 Introduzione alle tabelle

Le tabelle rappresentano relazioni fra dati. Gli autori specificano queste relazioni nel linguaggio del documento e specificano la loro presentazione nei CSS, in due modi: visivamente ed acusticamente.

Gli autori possono specificare la formattazione visuale di un tabella come una griglia rettangolare di celle. Le righe e le colonne delle celle possono essere organizzate in gruppi di riga [row] e gruppi di colonna. Righe, colonne, gruppi di riga, gruppi di colonne e celle possono avere bordi tracciati intorno ad essi (ci sono due modelli di bordo nei CSS2). Gli autori possono allineare i dati verticalmente o orizzontalmente all'interno di una cella e allineare i dati in tutte le celle di una riga o di una colonna.

Gli autori possono anche specificare la resa acustica di una tabella; come le intestazioni e i dati saranno pronunciati. Nel linguaggio del documento, gli autori possono marcare celle e gruppi di celle in modo tale che, quando vengono resi acusticamente, le intestazioni di cella sono pronunciate prima dei dati di cella. In effetti, questo fa si che la tabella sia riprodotta "sequenzialmente": gli utenti che scorrono la tabella con programmi utente acustici, sentono una sequenza di intestazioni seguite da dati.

Esempi(o):

Ecco una semplice tabella a tre righe e tre colonne descritta in HTML 4.0:

<TABLE>
<CAPTION>This is a simple 3x3 table</CAPTION>
<TR id="row1">
   <TH>Header 1      <TD>Cell 1        <TD>Cell 2
<TR id="row2">
   <TH>Header 2      <TD>Cell 3        <TD>Cell 4
<TR id="row3">
   <TH>Header 3      <TD>Cell 5        <TD>Cell 6
</TABLE>

Questo codice crea una tabella (l'elemento TABLE), tre righe (gli elementi TR), tre celle di intestazione (gli elementi TH), e sei celle di dati (gli elementi TD). Si noti che le tre colonne di questo esempio sono specificate implicitamente: nella tabella vi sono tante colonne qaunte ne vengono richieste dalle celle di intestazione e di dati.

La seguente regola CSS centra il testo orizzontalmente nelle celle di intestazione e presenta i dati con un peso del font grassetto:

TH { text-align: center; font-weight: bold }

Le regole che seguono allineano il testo delle celle di intestazione sulla loro riga di base e centrano verticalmente il testo in ciascuna cella di dati:

TH { vertical-align: baseline }
TD { vertical-align: middle }

Le regole che seguono specificano che la riga superiore sarà circondata da un bordo solido blu di 3px e che ciascuna delle altre righe sarà circondata da un bordo solido nero di 1px:

TABLE   { border-collapse: collapse }
TR#row1 { border-top: 3px solid blue }
TR#row2 { border-top: 1px solid black }
TR#row3 { border-top: 1px solid black }

Si noti, tuttavia, che i bordi intorno alle righe si sovrappongono dove le righe si incontrano. Di quale colore (nero o blu) e spessore (1px o 3px) sarà il bordo fra row1 e row2? Questo sarà discusso nella sezione sulla risoluzione di conflitti tra bordi.

La seguente regola posiziona la didascalia [caption] di tabella sopra la tabella:

CAPTION { caption-side: top }

Infine, la seguente regola specifica che, se rese acusticamente, ciascuna riga di dati deve essere pronunciata come "Header, Data, Data":

TH { speak-header: once }

Per esempio, la prima riga verrebbe pronunciata "Header1 Cell1 Cell2". D'altro canto, con al seguente regola:

TH { speak-header: always }

verrebbe pronunciata "Header1 Cell1 Header1 Cell2".

Il precedente esempio mostra come i CSS interagiscono con gli elementi HTML 4.0; in HTML 4.0, la semantica dei vari elementi di tabella (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH, e TD) è ben definita. In altri linguaggi del documento (come le applicazioni XML), possono non esservi elementi di tabella predefiniti. Per questo motivo, i CSS2 consentono agli autori di "correlare" elementi del linguaggio del documento con elementi di tabella tramite la proprietà 'display'. Per esempio, la seguente regola fa in modo che l'elemento FOO si comporti come un elemento HTML TABLE e l'elemento BAR come un elemento CAPTION:

FOO { display : table }
BAR { display : table-caption }

Discuteremo i vari elementi di tabella nella sezione che segue. In queste specifiche, il termine elemento di tabella si riferisce a qualsiasi elemento coinvolto nella creazione di una tabella. Un elemento di tabella "interno" è un elemento che produce una riga, un gruppo di riga, una colonna, un gruppo di colonna o una cella.

17.2 Il modello di tabella CSS

Il modello di tabella CSS è basato sul modello di tabella HTML 4.0, in cui la struttura di una tabella è strettamente parallela all'impaginazione visuale della tabella. In questo modello, una tabella consiste in una didascalia facoltativa e in un numero qualsiasi di righe di celle. Il modello di tabella si dice a "supremazia di riga" [row primary], poichè gli autori specificano esplicitamente righe, e non colonne, nel linguaggio del documento. Le colonne sono derivate al contempo da tutte le righe specificate -- la prima cella di ogni riga appartiene alla prima colonna, la seconda alla seconda colonna, ecc.). Righe e colonne possono essere raggruppate strutturalmente, e questo raggruppamento si può riflettere nella presentazione (per esempio, un bordo può essere tracciato intorno ad un gruppo di righe).

Così, il modello di tabella consiste di tabelle, didascalie, righe, gruppi di riga, colonne, gruppi di colonna e celle.

Il modello CSS non richiede che il linguaggio del documento includa elementi che corrispondano a ciascuno di questi componenti. Per i linguaggi del documento (come le applicazioni XML) che non hanno elementi di tabella predefiniti, gli autori devono correlare gli elementi del linguaggio del documento con gli elementi di tabella; questo viene fatto con la proprietà 'display'. I seguenti valori di 'display' assegnano una semantica di tabella ad un elemento arbitrario:

table (In HTML: TABLE)
Specifica che un elemento definisce una tabella a livello di blocco: è un blocco rettangolare che partecipa al contesto di formattazione a blocchi.
inline-table (In HTML: TABLE)
Specifica che un elemento definisce una tabella a livello di riga: è un blocco rettangolare che partecipa al contesto di formattazione in riga).
table-row (In HTML: TR)
Specifica che un elemento è una riga di celle.
table-row-group (In HTML: TBODY)
Specifica che un elemento raggruppa una o più righe.
table-header-group (In HTML: THEAD)
Come 'table-row-group', ma per la formattazione visuale, il gruppo di riga è sempre visualizzato prima di tutte le altre righe e gruppi di righe, dopo tutte le didascalie superiori. I programmi utente per la stampa possono ripetere le righe a piè di pagina su ogni pagina su cui si estende una tabella.
table-footer-group (In HTML: TFOOT)
Come 'table-row-group', ma per la formattazione visuale, il gruppo di riga è sempre visualizzato dopo tutte le altre righe e gruppi di riga, prima di tutte le didascalie inferiori. I programmi utente per la stampa possono ripetere le righe a piè di pagina su ogni pagina su cui si estende una tabella.
table-column (In HTML: COL)
Specifica che un elemento descrive una colonna di celle.
table-column-group (In HTML: COLGROUP)
Specifica che un elemento raggruppa una o più colonne.
table-cell (In HTML: TD, TH)
Specifica che un elemento rappresenta una cella di tabella.
table-caption (In HTML: CAPTION)
Specifica una didascalia per la tabella.

Gli elementi con 'display' impostato su 'table-column' o 'table-column-group' non sono resi (esattamente come se avessero 'display: none'), ma sono utili, perchè possono avere attributi che inducono un determinato stile per le colonne che rappresentano .

Il foglio di stile esemplificativo per HTML 4.0 nell'appendice illustra gli usi di questi valori per HTML 4.0:

TABLE    { display: table }
TR       { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH   { display: table-cell }
CAPTION  { display: table-caption }

I programmi utente possono ignorare questi valori della proprietà 'display' per i documenti HTML, poichè gli autori non dovrebbero alterare il comportamento previsto di un elemento.

17.2.1 Oggetti di tabella anonimi

I linguaggi del documento diversi dall'HTML possono non contenere tutti gli elementi nel modello di tabella CSS2. In questi casi, gli elementi "mancanti" devono essere presupposti per pemettere al modello di tabella di funzionare. Gli elementi mancanti generano oggetti anonimi (per esempio, riquadrati anonimi nell'impaginazione visuale della tabella) secondo le seguenti regole:

  1. Ogni elemento di tabella genererà automaticamente i necessari oggetti di tabella anonimi intorno a se, che consisteranno in almeno tre oggetti annidati corrispondenti a un elemento 'table'/'inline-table', un elemento 'table-row', e a un elemento 'table-cell'.
  2. Se il genitore P di un elemento 'table-cell' T non è un elemento 'table-row', un oggetto corrispondente a un 'table-row' sarà generato tra P e T. Questo oggetto si estenderà per tutti i fratelli 'table-cell' consecutivi (nell'albero del documento) di T.
  3. Se il genitore P di un elemento 'table-row' T non è un elemento 'table', 'inline-table', o 'table-row-group', un oggetto corrispondente a un elemento 'table' sarà generato tra P e T. Questo oggetto si estenderà per tutti i fratelli consecutivi (nell'albero del documento) di T che richiedono un genitore 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group', e 'caption'.
  4. Se il genitore P di un elemento 'table-row-group' (o 'table-header-group' o 'table-footer-group') T non è un elemento 'table' o 'inline-table', un oggetto corrispondente a un elemento 'table' sarà generato tra P e T. Questo oggetto si estenderà per tutti i fratelli consecutivi (nell'albero del documento) di T che richiedono un genitore 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group', e 'caption'.
  5. Se un figlio T di un elemento 'table-row' P non è un elemento 'table-cell', un oggetto corrispondente a un elemento 'table-cell' sarà generato tra P e T. Questo oggetto si estenderà per tutti i fratelli consecutivi di T che non sono elementi 'table-cell'.

Esempi(o):

In questo esempio XML, si suppone che un elemento 'table' contenga l'elemento HBOX:

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>

poichè il foglio di stile associato è:

HBOX { display: table-row }
VBOX { display: table-cell }

Esempi(o):

In questo esempio, si suppone che tre elementi 'table-cell' contengano il testo nei ROW. Si noti che il testo è a sua volta incapsulato in riquadrati anonimi in riga, come spiegato nel modello di formattazione visuale:

<STACK>
  <ROW>This is the <D>top</D> row.</ROW>
  <ROW>This is the <D>middle</D> row.</ROW>
  <ROW>This is the <D>bottom</D> row.</ROW>
</STACK>

Il foglio di stile è:

STACK { display: inline-table }
ROW   { display: table-row }
D     { display: inline; font-weight: bolder }

Non si richiede che i programmi utente HTML creino oggetti anonimi secondo le regole di cui sopra.

17.3 Selettori di colonna

Le celle di tabella possono appartenere a due contesti: righe e colonne. Tuttavia, nel documento sorgente le celle sono discendenti delle righe, mai delle colonne. Nondimeno, alcuni aspetti delle celle possono essere influenzati dall'impostare le proprietà sulle colonne.

Le seguenti proprietà si applicano agli elementi di colonna e ai gruppi di colonna:

'border'
Le varie proprietà del bordo si applicano alle colonne solo se 'border-collapse' è impostata su 'collapse' nell'elemento tabella. In tal caso, i bordi impostati sulle colonne e i gruppi di colonna sono immessi come input nell'algoritmo di risoluzione dei conflitti che seleziona gli stili del bordo su ogni limite di cella.
'background'
Le proprietà dello sfondo impostano lo sfondo per le celle nella colonna, ma solo se la cella e la riga hanno sfondi trasparenti. Si veda "Strati della tabella e trasparenza."
'width'
La proprietà 'width' da la larghezza minima per la colonna.
'visibility'
Se la 'visibility' di una colonna è impostata su 'collapse', nessuna delle celle nella colonna viene resa, e le celle che si estendono su altre colonne sono ritagliate. In aggiunta, la larghezza della tabella è ridotta dalla larghezza che la colonna assumerà. Si veda "Effetti dinamici" più avanti. Altri valori per 'visibility' non hanno effetto.

Esempi(o):

Ecco alcuni esempi di regole di stile che impostano le proprietà sulle colonne. Le prime due regole insieme implementano le "regole" di attributo di HTML 4.0 con un valore di "cols". La terza regola rende la colonna "totals" blu, le ultime due regole mostrano come rendere una colonna di grandezza fissa, usando l'algoritmo di impaginazione fissa.

COL   { border-style: none solid }
TABLE { border-style: hidden }
COL.totals { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }

17.4 Le tabelle nel modello di formattazione visuale

Secondo i termini del modello di formattazione visuale, una tabella può comportarsi come un elemento a livello di blocco o un elemento rimpiazzato a livello di riga. Le tabelle hanno contenuto, cuscinetto [padding], bordi e margini.

In entrambi i casi, l'elemento tabella genera un riquadrato anonimo che contiene il riquadrato di tabella stesso e il riquadrato di didascalia (se presente). I riquadrati di tabella e di didascalia conservano le loro aree di contenuto, di cuscinetto, di margine e di bordo, e le dimensioni del riquadrato rettangolare anonimo sono le più piccole richieste per contenerli entrambi. I margini verticali collassano dove il riquadrato di tabella e il riquadrato di didascalia si toccano. Ogni riposizionamento della tabella deve muovere l'intero riquadrato anonimo, non solo il riquadrato di tabella, cosi che la didascalia segue la tabella.

Una tabella con sopra una didascalia;
entrambe hanno margini e i margini fra di loro sono collassati, come è 
normale per i margini verticali.   [D]

Diagramma di una tabella con sopra una didascalia; il margine inferiore della didascalia collassa con il margine superiore della tabella.

17.4.1 Posizione e allineamento della didascalia

'caption-side'
Valore:  top | bottom | left | right | inherit
Iniziale:  top
Si applica a:  elementi 'table-caption'
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà specifica la posizione del riquadrato di didascalia rispetto al riquadrato di tabella. I valori hanno i seguenti significati:

top
Posiziona il riquadrato di didascalia sopra il riquadrato di tabella.
bottom
Posiziona il riquadrato di didascalia sotto il riquadrato di tabella.
left
Posiziona il riquadrato di didascalia alla sinistra del riquadrato di tabella.
right
Posiziona il riquadrato di didascalia alla destra del riquadrato di tabella.

Le didascalie sopra o sotto un elemento 'table' sono formattate come se fossero un elemento di blocco prima o dopo la tabella, tranne per il fatto che (1) ereditano le proprietà ereditabili dalla tabella, e (2) non sono considerate riquadrati a blocco ai fini di qaulunque elemento 'compact' o 'run-in' che può precedere la tabella.

Una didascalia sopra o sotto un riquadrato di tabella si comporta come un riquadrato a blocco per i calcoli della larghezza; la larghezza è calcolata rispetto alla larghezza del blocco contenitore del riquadrato di tabella.

Per una didascalia che si trova sul lato sinistro o destro di un riquadrato di tabella, d'altro canto, un valore diverso da 'auto' per 'width' imposta la larghezza esplicitamente, ma 'auto' dice al programma utente di scegliere una "larghezza ragionevole". Questo può variare dal "riquadrato più stretto possibile" alla "singola riga", così raccomandiamo agli utenti di non specificare 'auto' per le larghezze delle didascalie a sinistra e a destra.

Per allineare orizzontalmente il contenuto della didascalia all'interno del riquadrato di didascalia, si usi la proprietà 'text-align' Per l'allineamento verticale di un riquadrato di didascalia che si trova a sinistra o a destra rispetto al riquadrato di tabella, si usi la proprietà 'vertical-align'. Gli unici valori significativi in questo caso sono 'top', 'middle', e 'bottom'. Tutti gli altri valori sono trattati come 'top'.

Esempi(o):

In questo esempio, la proprietà 'caption-side' posiziona le didascalie sotto le tabelle. La didascalia sarà larga come il genitore della tabella, e il testo della didascalia sarà giustificato a sinistra.

CAPTION { caption-side: bottom; 
          width: auto;
          text-align: left }

Esempi(o):

Il seguente esempio mostra come posizionare una didascalia nel margine sinistro. La tabella stessa è centrata, impostando i suoi margini destro e sinistro su 'auto', e l'intero riquadrato con la tabella e la didascalia è spostato nel margine sinistro della stessa misura della larghezza della didascalia.

BODY {
    margin-left: 8em
}
TABLE {
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
    vertical-align: bottom
}

Supponendo che la larghezza della tabella sia minore della larghezza disponibile, la formattazione sarà simile a questa:

Una tabella centrata con una
didascalia nel margine sinistro della pagina   [D]

Diagramma che mostra una tabella centrata con la didascalia che si estende nel margine sinistro, come risultato del valore negativo della proprietà 'margin-left'.

17.5 Organizzazione visuale dei contenuti di tabella

Come altri elementi del linguaggio del documento, gli elementi interni di tabella generano riquadrati rettangolari con contenuto, cuscinetto e bordi. Non hanno margini, comunque.

L'organizzazione visuale di questi riquadrati è governata da una griglia irregolare rettangolare di righe e colonne. Ogni riquadrato occupa un numero totale di celle della griglia, determinato secondo le seguenti regole. Queste regole non si applicano all'HTML 4.0 o alla precedenti versioni di HTML; HTML impone le sue limitazioni sulle estensioni di righe e colonne.

  1. Ogni riquadrato di riga occupa una riga di celle della griglia. Tutti insieme, i riquadrati di riga riempiono la tabella dall'alto in basso, nell'ordine in cui ricorrono nel documento sorgente (ossia la tabella occupa esattamente tante righe delle griglia quanti sono gli elementi di riga).
  2. Un gruppo di riga occupa le stesse celle della griglia come le righe che contiene.
  3. Un riquadrato di colonna occupa una o più colonne di celle della griglia. I riquadrati di colonna sono posti l'uno accanto all'altro nell'ordine in cui ricorrono. Il primo riquadrato di colonna può trovarsi sia a sinistra che a destra, a seconda del valore della proprietà 'direction' della tabella.
  4. Un riquadrato di un gruppo di colonna occupa le stesse celle della griglia come le colonne che contiene.
  5. Le celle possono estendersi su diverse righe o colonne. (Sebbene i CSS2 non definiscono come viene determinato il numero delle righe o colonne estese, un programma utente può avere una speciale conoscenza del documento sorgente; una futura versione dei CSS potrà fornire una modalità per esprimere questa conoscenza nella sintassi CSS.) Ogni cella è così un riquadrato rettangolare, alto e largo una o più celle della griglia. La riga superiore di questo rettangolo si trova nella riga specificata dal genitore della cella. Il rettangolo deve essere il più possibile a sinistra, ma non può sovrapporsi con qualunque altro riquadrato di cella, e deve essere alla destra di tutte le celle nella stessa riga che gli sono precedenti nel documento sorgente. (Questa restrizione si osserva se la proprietà 'direction' della tabella è 'ltr'; se 'direction' è 'rtl', si inverta "destra" e "sinistra" nella precedente affermazione.)
  6. Un riquadrato di cella non può estendersi oltre l'ultimo riquadrato di riga di una tabella o di un gruppo di riga; i programmi utenti devono accorciarlo finchè non vi si adatta.

Nota. Le celle di tabella possono essere posizionate in modo relativo e assoluto, ma questo non è raccomandato: il posizionamento e l'uso del float rimuovono un riquadrato dal flusso, influenzando l'allineamento della tabella.

Ecco due esempi. Il primo si suppone ricorra in un documento HTML:

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>
<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>

La seconda tabella è formattata come nella figura a destra. Tuttavia, la resa HTML della tabella è esplicitamente non definita dall'HTML, e i CSS non cercano di definirla. I programmi utente sono liberi di renderla, ad esempio, come nella figura a sinistra.

Una tabella con celle che si sovrappongono
e una senza   [D]

A sinistra, una possibile resa di un errata tabella HTML 4.0; a destra, la sola possibile formattazione di una tabella simile, non-HTML.

17.5.1 Strati della tabella e trasparenza

Allo scopo di trovare lo sfondo per ogni cella di tabella, i differenti elementi di tabella possono essere pensati su sei strati sovrapposti. Lo sfondo impostato su un elemento in uno degli strati sarà visibile solo se gli strati sopra di lui hanno uno sfondo trasparente.

Schema degli strati di una tabella   [D]

Schema degli strati di una tabella.

  1. Lo strato più in basso è un piano singolo, che rappresenta il riquadrato di tabella stesso. Come tutti i riquadrati, può essere trasparente.

  2. Lo strato successivo contiene i gruppi di colonna. I gruppi di colonna sono alti come la tabella, ma non hanno bisogno di coprire l'intera tabella orizzontalmente.

  3. Sulla parte superiore dei gruppi di colonna vi sono le aree che rappresentano i riquadrati di colonna. Come i gruppi di colonna, le colonne sono alte come la tabella, ma non hanno bisogno di coprire l'intera tabella orizzontalmente.

  4. Lo strato successivo contiene i gruppi di riga. Ogni gruppo di riga è largo come la tabella. Tutti insieme, i gruppi di riga coprono completamente la tabella dall'alto in basso.

  5. Lo strato successivo, fino all'ultimo, contiene le righe. Anche le righe coprono l'intera tabella.

  6. Il livello più in alto contiene le celle stesse. Come mostra la figura, sebbene tutte le righe contengano lo stesso numero di celle, non tutte le celle possono avere un contenuto specificato. Le celle "vuote" sono trasparenti, e fanno intravedere gli strati inferiori.

Nel seguente esempio, la prima riga contiene quattro celle, ma la seconda non ne contiene nessuna, e così lo sfondo della tabella si lascia intravedere, tranne dove una cella della prima riga si estende su questa riga. Il seguente codice HTML e le regole di stile

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
    <TABLE>
      <TR>
        <TD> 1 
        <TD rowspan="2"> 2
        <TD> 3 
        <TD> 4 
      </TR>
      <TR><TD></TD></TR>
    </TABLE> 
  </BODY>
</HTML>

potrebbero essere formattati come segue:

Tabella con tre celle vuote
nella riga inferiore   [D]

Tabella con tre celle vuote nella riga inferiore.

17.5.2 Algoritmi per la larghezza di tabella: la proprietà 'table-layout'

I CSS non definiscono un'impaginazione "ottimale" per le tabelle poichè, in molti cases, quello che è ottimale è una questione di gusto. I CSS definiscono delle restrizioni che i programmi utente devono rispettare quando impaginano una tabella. I programmi utente possono usare l'algoritmo che preferiscono, e sono liberi di preferire la velocità di resa alla precisione, eccetto quando viene selezionato l' "algoritmo di impaginazione fissa".

'table-layout'
Valore:  auto | fixed | inherit
Iniziale:  auto
Si applica a:  elementi 'table' e 'inline-table'
Ereditata:  no
Percentuali:  N/A
Media:  visuale

La proprietà 'table-layout' controlla l'algoritmo usato per impaginare celle di tabella, righe e colonne. I valori hanno i seguenti significati:

fixed
Si usi l'agoritmo di impaginazione fissa di tabella.
auto
Si usi ogni algoritmo di impaginazione automatica di tabella.

I due algoritmi sono descritti di seguito.

Impaginazione [layout] fissa di tabella

Con questo (rapido) algoritmo, l'impaginazione orizzontale della tabella non dipende dai contenuti delle celle; dipende solo dalla larghezza della tabella, dalla larghezza delle colonne e dalla spaziatura fra bordi o celle.

La larghezza della tabella può essere specificata esplicitamente con la proprietà 'width'. Un valore di 'auto' (sia per 'display: table' che per 'display: inline-table') implica l'uso dell'algoritmo di impaginazione automatica di tabella.

Nell'algoritmo di impaginazione fissa di tabella, la larghezza di ogni colonna è determinata come segue:

  1. Un elemento di colonna con un valore diverso da 'auto' per la proprietà 'width' imposta la larghezza per quella colonna.
  2. Altrimenti, una cella nella prima riga con un valore diverso da 'auto' per la proprietà 'width' imposta la larghezza per quella colonna. Se la cella si estende per più di una colonna, la larghezza è divisa fra le colonne.
  3. Ogni colonna rimanente si divida equamente lo spazio orizzontale rimasto della tabella (meno i bordi o la spaziatura fra le celle).

La larghezza della tabella è quindi più grande del valore della proprietà 'width' per l'elemento tabella e della somma delle larghezze delle colonne (più la spaziatura fra le celle o i bordi). Se la tabella è più ampia delle colonne, lo spazio extra dovrebbe essere distribuito fra le colonne.

In questo modo, il programma utente può iniziare ad impaginare la tabella una volta ricevuta la prima riga intera. Le celle nelle righe successive non influenzano le larghezze delle colonne. Ogni cella con contenuto in eccesso usa la proprietà 'overflow' per determinare se ritagliare il contenuto in eccesso.

Impaginazione automatica di tabella

In questo algoritmo (che di solito richiede non più di due passaggi), la larghezza della tabella è data dalla larghezza delle sue colonne (e dall'intervento dei bordi). Questo algoritmo riflette il comportamento di diversi programmi utente HTML al momento della scrittura di queste specifiche. Non è richiesto che i programmi utente implementino questo algoritmo per determinare l'impaginazione di tabella nel caso in cui 'table-layout' sia 'auto'; possono usare qualsiasi altro algoritmo.

Questo algoritmo può essere inefficiente, poichè richiede che il programma utente abbia accesso a tutto il contenuto nella tabella prima di determinare l'impaginazione finale e può richiedere più di un passaggio.

Le larghezze delle colonne sono determinate come segue:

  1. Si calcoli la larghezza minima del contenuto (MCW) [MCW, minumum content width] di ciascuna cella: il contenuto formattato può estendersi su un qualsiasi numero di righe ma non può uscire fuori dal riquadrato di cella. Se la 'width' specificata (W) della cella è maggiore di MCW, W è la larghezza minima della cella. Un valore di 'auto' indica che MCW è la larghezza minima della cella.

    Si calcoli anche la larghezza "massima" della cella di ciascuna cella, formattando poi il contenuto senza interrompere le righe tranne dove ricorrono esplicite interruzioni di riga.

  2. Per ogni colonna, si determini una larghezza minima e massima della colonna partendo dalle celle che si estendono solo su quella colonna. La larghezza minima è quella richiesta dalla cella con la larghezza minima di cella più grande (o la 'width' della colonna, qualunque sia più grande). La larghezza massima è quella richiesta dalla cella con la larghezza massima di cella più grande (o la 'width' della colonna, qualunque sia più grande).
  3. Per ogni cella che si estende su più di una colonna, si aumentino le larghezze minime delle colonne su cui si estende in modo tale che insieme siano almeno larghe come la cella. Si faccia lo stesso per le larghezze massime. Se possibile, si allarghino tutte le colonne su cui si estende approssitivamente con la stessa misura.

Ciò fornisce una larghezza minima e massima per ogni colonna. Le larghezze delle colonne influenzano la larghezza finale della tabella nel modo seguente:

  1. Se la proprietà 'width' dell'elemento 'table' o 'inline-table' ha un valore specificato (W) diverso da 'auto', il valore calcolato delle proprietà è il maggiore fra W e la larghezza minima richiesta da tutte le colonne, più la spaziatura fra le celle o i bordi (MIN). Se W è maggiore di MIN, la larghezza extra dovrebbe essere distribuita fra le colonne.
  2. Se l'elemento 'table' o 'inline-table' ha 'width: auto', la larghezza calcolata della tabella è la maggiore fra la larghezza del blocco contenitore della tabella e MIN. Tuttavia, se la larghezza massima richiesta dalle colonne più la spaziatura fra le celle o i bordi (MAX) è minore di quella del blocco contenitore, si usi MAX.

Un valore percentuale per una larghezza di colonna è relativo alla larghezza della tabella. Se la tabella ha 'width: auto', una percentuale rappresenta una limitazione per la larghezza di colonna, che un programma utente dovrebbe cercare di soddisfare. (Ovviamente questo non è sempre possibile: se la larghezza della colonna è '110%', la limitazione non può essere soddisfatta.)

Nota. In questo algoritmo, righe (e gruppi di riga) e colonne (e gruppi di colonna) limitano e sono limitate secondo le dimensioni delle celle che contengono. Impostare la larghezza di una colonna può influenzare indirettamente l'altezza di una riga e viceversa.

17.5.3 Algoritmi per l'altezza di tabella

L'altezza di una tabella è data dalla proprietà 'height' per l'elemento 'table' o 'inline-table'. Un valore di 'auto' indica che l'altezza è la somma delle altezze di riga più ogni spaziatura fra le celle o i bordi. Ogni altro valore specifica l'altezza esplicitamente; la tabella può così essere più alta o più bassa rispetto all'altezza delle sue righe. I CSS2 non specificano la resa quando l'altezza specificata di tabella differisce dall'altezza del contenuto, in particolare quando l'altezza del contenuto dovrebbe sovrascrivere l'altezza specificata; se così non è, i CSS2 non specificano come lo spazio extra dovrebbe essere distribuito fra le righe che ammontano a meno dell'altezza specificata di tabella o, quando l'altezza del contenuto supera l'altezza specificata di tabella, se il programma utente dovrebbe fornire un meccanismo di scorrimento. Nota. Future versioni dei CSS potranno specificarlo ulteriormente.

L'altezza di un riquadrato di un elemento 'table-row' è calcolata una volta che il programma utente ha tutte le celle nella riga disponibili: è il massimo della 'height' specificata della riga e l'altezza minima (MIN) richiesta dalle celle. Un valore di 'height' su 'auto' per un elemento 'table-row' significa che l'altezza calcolata della riga è MIN. MIN dipende dalle altezze e dall'allineamento del riquadrato di cella (molto simile al calcolo dell'altezza di un riquadrato di riga). I CSS2 non definiscono a cosa si riferiscono i valori percentuali di 'height' se specificati per righe di tabella e gruppi di riga.

Nei CSS2, l'altezza di un riquadrato di cella è il valore massimo della proprietà 'height' per la cella di tabella e l'altezza minima richiesta dal contenuto (MIN). Un valore di 'auto' per 'height' implica un valore calcolato di MIN. I CSS2 non definiscono a cosa si riferiscono i valori percentuali di 'height' se specificati per le celle di tabella.

I CSS2 non specificano come le celle che si estendono su più di una riga influenzino i calcoli dell'altezza di riga, tranne per il fatto che la somma delle altezze di riga coinvolte deve essere grande abbastanza da comprendere la cella che si estende sulle righe.

La proprietà 'vertical-align' di ciascuna cella di tabella determina il suo allineamento all'interno della riga. Ciascun contenuto di cella ha una riga di base, una parte superiore, mediana e inferiore, proprio come la riga stessa. Nel contesto delle tabelle, i valori per 'vertical-align' hanno i seguenti significati:

baseline
La riga di base della cella è posta alla stessa altezza della riga di base [baseline] della prima riga su cui si estende (si veda più avanti la definizione di riga di base delle celle e delle righe).
top
La parte superiore del riquadrato di cella è allineata con la parte superiore della prima riga su cui si estende.
bottom
La parte inferiore del riquadrato di cella è allineata con la parte inferiore dell'ultima riga su cui si estende.
middle
Il centro della cella è allineato con il centro delle righe su cui si estende.
sub, super, text-top, text-bottom
Questi valori non si applicano alle celle; la cella è invece allineata sulla riga di base.

La riga di base di una cella è la riga di base del primo riquadrato di riga nella cella. Se non vi è testo, la riga di base è la riga di base di qualsiasi oggetto visualizzato nella cella, o, se non ve n'è alcuno, della parte inferiore del riquadrato di cella. La distanza massima tra la parte superiore del riquadrato di cella e la riga di base di tutte le celle che hanno 'vertical-align: baseline' è usata per impostare la riga di base della riga. Ecco un esempio:

Esempio di allineamento verticale delle
celle   [D]

Diagramma che mostra l'effetto dei vari valori di 'vertical-align' sulle celle di tabella.

I riquadrati di cella 1 e 2 sono allineati sulle loro righe di base. Il riquadrato di cella 2 ha l'altezza più grande sopra la riga di base, cosicchè determina la riga di base della riga. Si noti che se non c'è alcun riquadrato di cella allineato sulla sua riga di base, la riga non avrà (nè avrà bisogno) una riga di base.

Per evitare situazioni ambigue, l'allineamento delle celle procede nel seguente ordine:

  1. Vengono posizionate prima le celle allineate sulla loro riga di base. Questo stabilirà la riga di base della riga. Si noti che le celle con 'vertical-align: top' posizionate.
  2. La riga ora ha una parte superiore, possibilmente una riga di base, e un'altezza provvisoria, che è la distanza dalla parte superiore alla parte inferiore più bassa delle celle posizionate finora. (Si vedano le condizioni per il cuscinetto [padding] delle celle più avanti.)
  3. Se qualcuna delle celle rimanenti, quelle allineate sulla parte inferiore o mediana, ha un'altezza maggiore dell'altezza corrente della riga, l'altezza della riga sarà aumentata fino all'altezza massima di queste celle, abbassando la parte inferiore.
  4. Infine vengono posizionate le celle rimanenti.

I riquadrati di cella che sono più piccoli rispetto all'altezza della riga ricevono un cuscinetto superiore e inferiore extra.

17.5.4 Allineamento orizzontale in una colonna

L'allineamento orizzontale del contenuto di una cella all'interno di un riquadrato di cella è specificato con la proprietà 'text-align'.

Quando la proprietà 'text-align' per più di una cella in una colonna è impostata su un valore <string>, il contenuto di queste celle è allineato lungo un'asse verticale. L'inizio della stringa tocca quest'asse. La direzionalità dei caratteri determina se la stringa si trova all sinistra o alla destra dell'asse.

Allineare il testo in questo modo è utile solo se il testo sta su una riga [line]. Il risultato non è definito se il contenuto della cella si estende per più di una riga.

Se il valore di 'text-align' per una cella di tabella è una stringa ma la stringa non ricorre nel contenuto della cella, la fine del contenuto della cella tocca l'asse verticale di allineamento.

Si noti che le stringhe non devono essere le stesse per ogni cella, sebbene di solito lo siano.

I CSS non forniscono un modo per specificare lo spostamento dell'asse di allineamento verticale rispetto al limite di un riquadrato di colonna.

Esempi(o):

Il seguente foglio di stile:

   TD { text-align: "." }
   TD:before { content: "$" }

produrrà la colonna dei simboli del dollaro nella seguente tabella HTML:

  <TABLE>
  <COL width="40">
  <TR> <TH>Long distance calls
  <TR> <TD> 1.30
  <TR> <TD> 2.50
  <TR> <TD> 10.80
  <TR> <TD> 111.01
  <TR> <TD> 85.
  <TR> <TD> 90
  <TR> <TD> .05
  <TR> <TD> .06
  </TABLE>

da allineare con il punto decimale. Per divertimento, abbiamo usato lo pseudo-elemento :before per inserire il simbolo del dollaro prima di ogni cifra. La tabella potrebbe essere resa come segue:

Long distance calls
              $1.30      
              $2.50
             $10.80
            $111.01
             $85.
             $90
               $.05
               $.06

17.5.5 Effetti dinamici per righe e colonne

La proprietà 'visibility' assume il valore 'collapse' per elementi di riga, di gruppo di riga, di colonna e di gruppo di colonna. Questo valore fa in modo che l'intera riga o colonna sia rimossa dalla visualizzazione, e che lo spazio normalmente occupato dalla riga o dalla colonna sia reso disponibile per altro contenuto. La soppressione della riga o della colonna, tuttavia, non influenza altrimenti l'impaginazione della tabella. Questo permette effetti dinamici per rimuovere righe o colonne di tabella senza forzare una re-impaginazione della tabella allo scopo di tener conto dei potenziali cambiamenti nelle restrizioni di colonna.

17.6 Bordi

Nei CSS vi sono due distinti modelli per impostare i bordi nelle celle di tabella. Uno è il più adatto per i cosiddetti bordi separati intorno a celle singole, l'altro è adatto per i bordi che sono continui da un'estremità all'altra della tabella. Molti stili dei bordi si possono ottenere con entrambi i modelli, sicchè è spesso una questione di gusto quale venga usato.

'border-collapse'
Valore:  collapse | separate | inherit
Iniziale:  collapse
Si applica a:  elementi 'table' e 'inline-table'
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà seleziona un modello di bordi della tabella. Il valore 'separate' seleziona il modello a bordi separati. Il valore 'collapse' seleziona il modello a bordi collassati. I modelli sono descritti di seguito.

17.6.1 Il modello a bordi separati

'border-spacing'
Valore:  <length> <length>? | inherit
Iniziale:  0
Si applica a:  elementi 'table' e 'inline-table'
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Le lunghezze specificano la distanza che separa i bordi di celle adiacenti. Se viene specificata una lunghezza, essa fornisce la spaziatura verticale e orizzontale. Se ne vengono specificate due, la prima fornisce la spaziatura orizzontale e la seconda la spaziatura verticale. Le lunghezze non possono essere negative.

In questo modello, ogni cella ha un bordo singolo. La proprietà 'border-spacing' specifica la distanza fra i bordi di celle adiacenti. Questo spazio è riempito con lo sfondo dell'elemento di tabella. Righe, colonne, gruppi di riga e gruppi di colonna non possono avere bordi (ossia i programmi utente devono ignorare le proprietà del bordo per questi elementi).

Esempi(o):

La tabella nella figura in basso potrebbe essere il risultato di un foglio di stile come questo:

  TABLE      { border: outset 10pt; 
               border-collapse: separate;
               border-spacing: 15pt }
  TD         { border: inset 5pt }
  TD.special { border: inset 10pt }  /* The top-left cell */

Una tabella con
border-spacing   [D]

Una tabella con 'border-spacing' impostato su un valore di lunghezza. Si noti che ogni cella ha il suo bordo, e la tabella ha un bordo separato.

Bordi intorno a celle vuote: la proprietà 'empty-cells'

'empty-cells'
Valore:  show | hide | inherit
Iniziale:  show
Si applica a:  elementi 'table-cell'
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Nel modello a bordi separati, questa proprietà controlla la resa dei bordi intorno a celle che non hanno contenuto visibile. Le celle vuote e le celle con la proprietà 'visibility' impostata su 'hidden' si considerano come prive di contenuto visibile. Il contenuto visibile include "&nbsp;" e altri spazi bianchi tranne ASCII CR ("\0D"), LF ("\0A"), tabulazione ("\09"), e spazio ("\20").

Quando questa proprietà ha il valore 'show', i bordi vengono tracciati intorno alle celle vuote (come celle normali).

Un valore 'hide' indica che nessun bordo viene tracciato intorno alle celle vuote. Inoltre, se tutte le celle in una riga hanno un valore 'hide' e nessun contenuto visibile, l'intera riga si comporta come se avesse 'display: none'.

Esempi(o):

La seguente regola fa in modo che i bordi vengano tracciati intorno a tutte le celle:

TABLE { empty-cells: show }

17.6.2 Il modello a bordi collassati

Nel modello a bordi collassati, è possibile specificare bordi che circondano una parte o tutta la cella, la riga, il gruppo di riga, la colonna e il gruppo di colonna. I bordi per l'attributo HTML "rule" possono essere specificati in questo modo.

I bordi sono centrati sulle righe della griglia fra le celle. I programmi utente devono trovare una regola armonica per arrotondare nel caso di un numero non usuale di unità distinte (pixel di schermo, punti di stampante).

Il diagramma in basso mostra come interagiscono la larghezza della tabella, le larghezze dei bordi, il cuscinetto e la larghezza delle celle. La loro relazione è data dalla seguente equazione, che è valida per ogni riga della tabella:

row-width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn)

Qui n è il numero di celle nella riga, e border-widthi si riferisce al bordo fra le celle i e i + 1. Si noti che solo metà dei due bordi esterni viene calcolata nella larghezza della tabella; l'altra metà di questi due bordi si trova nell'area di margine.

Schema  che mostra le larghezze delle celle e dei bordi, e il cuscinetto delle celle
   [D]

Schema che illustra le larghezze delle celle e dei bordi, e il cuscinetto delle celle.

Si noti che in questo modello la larghezza della tabella include metà del bordo della tabella. In questo modello, inoltre, una tabella non ha cuscinetto (ma ha margini).

Risoluzione di conflitti tra bordi

Nel modello a bordi collassati, i bordi su ogni limite di ogni cella possono essere specificati tramite le proprietà dei bordi per la varietà di elementi che si incontrano su quel limite (celle, righe, gruppi di riga, colonne, gruppi di colonna e la tabella stessa), e questi bordi possono variare per larghezza, stile e colore. La regola pratica è che su ciascun limite viene scelto lo stile del bordo più "vistoso," tranne quando qualsiasi ricorrenza dello stile 'hidden' annulla incondizionatamente il bordo.

Le seguenti regole determinano quale stile del bordo "vince" in caso di conflitto:

  1. I bordi con 'border-style' su 'hidden' hanno la precedenza su tutti gli altri bordi in conflitto. Ogni bordo con questo valore sopprime tutti i bordi in questa posizione.
  2. I bordi con stile 'none' hanno la priorità più bassa. Solo se le proprietà del bordo di tutti gli elementi che si incontrano su questo limite sono 'none' il bordo sarà omesso (ma si noti che 'none' è il valore predefinito per lo stile del bordo.)
  3. Se nessuno degli stili è 'hidden' e almeno uno di loro non è 'none', allora i bordi stretti sono scartati in favore di quelli più larghi. Se più di uno ha la stessa 'border-width', allora gli stili sono preferiti in quest'ordine: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', e il più basso: 'inset'.
  4. Se gli stili del bordo differiscono solo nel colore, allora uno stile impostato su una cella vince su quello di una riga, la quale vince su un gruppo di riga, su una colonna, su un gruppo di colonna e, da ultimo, sulla tabella.

Esempi(o):

Il seguente esempio illustra l'applicazione di queste regole di precedenza. Questo foglio di stile:

  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }

con questo sorgente HTML:

<P>
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
    <TD> 1
    <TD> 2
    <TD> 3
</TR>
<TR id="row2">
    <TD> 4 
    <TD class="solid-blue"> 5
    <TD class="solid-green"> 6
</TR>
<TR id="row3">
    <TD> 7
    <TD> 8
    <TD> 9
</TR>
<TR id="row4">
    <TD> 10
    <TD> 11
    <TD> 12
</TR>
<TR id="row5">
    <TD> 13
    <TD> 14
    <TD> 15
</TR>
</TABLE>

produrrebbe qualcosa come questo:

Un esempio di tabella con bordi collassati   [D]

Un esempio di tabella con bordi collassati.

Esempio(o):

Il prossimo esempio mostra una tabella con regole orizzontali tra le righe. Il bordo superiore della tabella è impostato su 'hidden' per sopprimere il bordo superiore della prima riga. Ciò implementa l'attributo "rules" di HTML 4.0 (rules="rows").

TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows]    { border-collapse: collapse; 
                       border-top: hidden }

Tabella con regole
orizzontali   [D]

Tabella con regole orizzontali tra le righe.

In questo caso l'effetto può essere ottenuto anche senza impostare un bordo 'hidden' su TABLE, selezionando la prima riga separatamente. Quale metodo è da preferirsi è una questione di gusto.

TR:first-child { border-top: none }
TR { border-top: solid }

Esempi(o):

Ecco un altro esempio di bordi collassati nascosti:

Tabella
con due bordi omessi   [D]

Tabella con due bordi interni omessi.

sorgente HTML:

<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
    <TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
    <TD style="border: solid">bar</TD></TR>
</TABLE>

17.6.3 Stili dei bordi

Alcuni dei valori di 'border-style' hanno differenti significati nelle tabelle rispetto ad altri elementi. Nell'elenco sottostante sono indicati con un asterisco.

none
Nessun bordo.
*hidden
Lo stesso che 'none', ma nel modello a bordi collassati inibisce anche ogni altro bordo (si veda la sezione sui conflitti tra bordi).
dotted
Il bordo è una serie di punti.
dashed
Il bordo è una serie di brevi segmenti lineari.
solid
Il bordo è un singolo segmento lineare.
double
Il bordo è costituito da due linee solide. La somma delle due linee e dello spazio fra di esse è uguale al valore di 'border-width'.
groove
Il bordo appare come se fosse inciso nel riquadro.
ridge
L'opposto di 'groove': il bordo appare come se sporgesse fuori dal riquadro.
*inset
Nel modello a bordi separati, il bordo fa in modo che l'intero riquadrato appaia come se fosse incastonato nel riquadro. Nel modello a bordi collassati, lo stesso che 'groove'.
*outset
Nel modello a bordi separati, il bordo fa in modo che l'intero riquadrato appaia come se stesse uscendo fuori dal riquadro. Nel modello a bordi collassati, lo stesso che 'ridge'.

17.7 Riproduzione audio di tabelle

Quando una tabella viene letta da un generatore vocale, la relazione tra le celle di dati e le celle di intestazione deve essere espressa in modo diverso rispetto all'allineamento orizzontale e verticale. Alcuni browser vocali possono consentire all'utente di muoversi in uno spazio bidimensionale, dando così loro l'opportunità di tracciare le relazioni rappresentate spazialmente. Quando ciò non è possibile, il foglio di stile deve specificare in quali punti vengono pronunciate le intestazioni.

17.7.1 Intestazioni parlanti: la proprietà 'speak-header'

'speak-header'
Valore:  once | always | inherit
Iniziale:  once
Si applica a:  elementi che hanno l'informazione di intestazione di tabella
Ereditata:  si
Percentuali:  N/A
Media:  acustico

Questa proprietà specifica se le intestazioni di tabella vengono pronunciate prima di ogni cella, o solo prima di una cella quando questa cella è associata con un'intestazione diversa rispetto alla cella precedente. I valori hanno i seguenti significati:

once
L'intestazione è pronunciata una volta, prima di una serie di celle.
always
L'intestazione è pronunciata prima di ogni cella pertinente.

Ogni linguaggio del documento può avere diversi meccanismi che consentono agli autori di specificare le intestazioni. Per esempio, in HTML 4.0 ([HTML40]), è possibile specificare l'informazione di intestazione con tre differenti attributi ("headers", "scope", e "axis"), e le specifiche forniscono un algoritmo per determinare l'informazione di intestazione quando questi attributi non sono stati specificati.

Immagine di una tabella creata con Microsoft Word   [D]

Immagine di una tabella con celle di intestazione ("San Jose" e "Seattle") che non sono nella stessa colonna o riga di dati cui si applicano.

Questo esempio HTML rappresenta il denaro speso per i pasti, hotel e trasporto in due località (San Jose e Seattle) in giorni successivi. A livello concettuale, si può pensare alla tabella in termini di spazio n-dimensionale. Le intestazioni di questo spazio sono: località, giorno, categoria e totale parziale. Alcune celle definiscono degli indicatori lungo un asse mentre altre forniscono il denaro speso nei punti all'interno di questo spazio. La marcatura per questa tabella è:

<TABLE>
<CAPTION>Travel Expense Report</CAPTION>
<TR>
  <TH></TH>
  <TH>Meals</TH>
  <TH>Hotels</TH>
  <TH>Transport</TH>
  <TH>subtotal</TH>
</TR>
<TR>
  <TH id="san-jose" axis="san-jose">San Jose</TH>
</TR>
<TR>
  <TH headers="san-jose">25-Aug-97</TH>
  <TD>37.74</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">26-Aug-97</TH>
  <TD>27.28</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">subtotal</TH>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH id="seattle" axis="seattle">Seattle</TH>
</TR>
<TR>
  <TH headers="seattle">27-Aug-97</TH>
  <TD>96.25</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">28-Aug-97</TH>
  <TD>35.00</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">subtotal</TH>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>Totals</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

Fornendo il modello di dati in questo modo, gli autori mettono i browser abilitati alla sintesi vocale in condizione di esplorare la tabella in modi proficui: per esempio, ciascuna cella potrebbe essere pronunciata come un elenco, ripetendo le intestazioni applicabili prima di ogni cella di dati:

  San Jose, 25-Aug-97, Meals:  37.74
  San Jose, 25-Aug-97, Hotels:  112.00
  San Jose, 25-Aug-97, Transport:  45.00
 ...

Il browser potrebbe anche pronunciare le intestazioni solo quando cambiano:

San Jose, 25-Aug-97, Meals: 37.74
    Hotels: 112.00
    Transport: 45.00
  26-Aug-97, Meals: 27.28
    Hotels: 112.00
...