Diagramma di una tabella con sopra una didascalia; il margine inferiore della didascalia collassa con il margine superiore della tabella.
Sommario
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.
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.
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:
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.
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:
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 }
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.
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:
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 }
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.
Diagramma di una tabella con sopra una didascalia; il margine inferiore della didascalia collassa con il margine superiore della tabella.
| 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:
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'.
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 }
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:
Diagramma che mostra una tabella centrata con la didascalia che si estende nel margine sinistro, come risultato del valore negativo della proprietà 'margin-left'.
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.
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.
A sinistra, una possibile resa di un errata tabella HTML 4.0; a destra, la sola possibile formattazione di una tabella simile, non-HTML.
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.
Lo strato più in basso è un piano singolo, che rappresenta il riquadrato di tabella stesso. Come tutti i riquadrati, può essere trasparente.
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.
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.
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.
Lo strato successivo, fino all'ultimo, contiene le righe. Anche le righe coprono l'intera tabella.
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.
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".
| 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:
I due algoritmi sono descritti di seguito.
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:
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.
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:
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.
Ciò fornisce una larghezza minima e massima per ogni colonna. Le larghezze delle colonne influenzano la larghezza finale della tabella nel modo seguente:
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.
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:
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:
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:
I riquadrati di cella che sono più piccoli rispetto all'altezza della riga ricevono un cuscinetto superiore e inferiore extra.
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.
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
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.
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.
| 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.
| 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).
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' impostato su un valore di lunghezza. Si noti che ogni cella ha il suo bordo, e la tabella ha un bordo separato.
| 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 " " 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'.
La seguente regola fa in modo che i bordi vengano tracciati intorno a tutte le celle:
TABLE { empty-cells: show }
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 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).
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:
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.
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 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 }
Ecco un altro esempio di bordi collassati nascosti:
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>
Alcuni dei valori di 'border-style' hanno differenti significati nelle tabelle rispetto ad altri elementi. Nell'elenco sottostante sono indicati con un asterisco.
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.
| 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:
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 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
...