Il documento presenta due tipi di tabelle di esempio: un tipo puramente presentazionale, senza dati di effettiva rilevanza ed un tipo strutturale con dati effettivi. La formattazione richiede quindi degli stili completamente diversi. È importante notare a questo punto che le tabelle del primo tipo non sono di fatto necessarie alla comprensione del testo, e quindi potrebbero essere sostituite da immagini con opportuna descrizione. Decidiamo di inserirle come marcatura a scopo puramente dimostrativo. Nel documento originale tali tabelle si presentano come segue.
Figura 16: Una tabella di esempio
[D]
La marcatura utilizzata per rendere questo tipo di tabella è la seguente:
Abbiamo usato l'attributo summary
per dare informazioni aggiuntive sulle tabelle presentate. In questo caso
avremmo potuto anche aggiungere una breve nota sul fatto che le tabelle sono puramente dimostrative e non presentano dati
essenziali.
La didascalia in fondo alla tabella non è stata marcata con l'elemento caption
, come ci si attenderebbe,
per un motivo molto semplice: attualmente per ottenere l'effetto della didascalia in fondo alla tabella si sarebbe dovuto
ricorrere alla dichiarazione caption-side: bottom
, che non è ampiamente supportata dai browser. Questo
è un altro motivo per cui tabelle dimostrative come questa andrebbero evitate ove possibile.
A questo punto passiamo all'applicazione degli stili:
Le 53 righe di codice necessario alla formattazione di questo tipo di tabelle ci convincono del fatto che un approccio del genere è controproduttivo. Tuttavia, il codice usato presenta alcune caratteristiche interessanti nella formattazione delle tabelle.
fixed
. Questo significa che la somma complessiva
della larghezza delle singole celle (compresi i bordi), dovrà essere uguale alla larghezza generale impostata
sulla prima tabella (450 pixel). Si noti comunque che anche se si supera tale larghezza, i browser si limiteranno semplicemente
ad allargare la tabella principale, senza nascondere il contenuto.border-collapse: collapse
), che fa in modo che i bordi
delle singole celle si fondano insieme per formare un unico bordo.Tuttavia, Internet Explorer 7 (ed inferiori), presenta un problema nel collassamento dei bordi, per cui si rende necessario aggiungere un commento condizionale con il seguente codice:
Il commento condizionale viene indirizzato alle versioni di Internet Explorer inferiori alla 8 (riga 1). Il risultato si può osservare nell'immagine che segue.
Figura 17: La tabella di esempio realizzata con i fogli di stile
[D]
Passiamo alle tabelle di dati effettivi. Nel documento originale, esse hanno il seguente layout:
Figura 18: La tabella di dati effettivi
[D]
La marcatura necessaria è la seguente:
In questa tabella abbiamo usato l'attributo scope
sulle intestazioni di tabella in modo da associare
ciascuna colonna ad un'intestazione. Abbiamo usato un elemento presentazionale (br
) per mandare a capo il testo.
Volendo si sarebbe potuta inserire ogni riga di testo in un elemento span
e poi trasformarlo in blocco. Gli stili,
meno ridondanti di quelli della precedente tabella, sono:
In questo caso viene usato il layout automatico di tabella, e il risultato è quello di una tabella fluida. Possiamo osservarlo nell'immagine che segue.
Figura 19: La tabella di dati effettivi realizzata con i fogli di stile
[D]