Indirizzi, celle e accessibilità

Discorso preliminare

Con il supporto del posizionamento CSS nella maggior parte dei browser, non è più necessario sopportare gli svantaggi associati alla formattazione basata su tabelle, a meno che non si debba fornire un layout identico all’antico Netscape 4. Inoltre, questo articolo si concentrerà sulla formattazione delle tabelle di dati, utilizzate per presentare dati tabulari.

Per completare questa visione, leggete l’articolo I problemi della formattazione basata sulle tabelle.

Detto questo, questo articolo è lontano dal descrivere tutte le raccomandazioni per rendere perfettamente accessibile una tabella di dati. Questo sarà il soggetto di un altro articolo a venire…

Tagges diversi

Tagges elementari

• <table>: crea una tabella
• <caption>: didascalia della tabella (opzionale)
• <tr>: riga della tabella
• <th>: celle di intestazione della tabella
• <td>: celle della tabella

Tags aggiuntivi

• <thead>: gruppo di celle dell’intestazione
• <tbody>: gruppo di celle del corpo della tabella
• <tfoot>: table foot cell group

Accessibilità

Per i browser testuali, Braille o vocali che possono essere utilizzati da persone ipovedenti, l’attributo "summary" dovrebbe essere aggiunto per spiegare il contenuto della tabella. Questo attributo si applica all’elemento table.

Tabella semplice

Il codice (X)HTML per una tabella di dati semplici presentati in colonne, rispettando gli standard e un minimo di accessibilità, può essere della seguente forma:

<table summary="exemple de structure d'un tableau de données 2 lignes, 2 colonnes"> <caption>Tableau de données</caption> <tr> <th>Titre colonne 1</th> <th>Titre colonne 2</th> </tr> <tr> <td>cellule A1</td> <td>cellule B1</td> </tr> <tr> <td>cellule A2</td> <td>cellule B2</td> </tr></table>

In questo contesto, tutta la formattazione della tabella e delle sue celle deve essere dichiarata tramite CSS.

Nota: possiamo specificare border="1" nell’elemento table in modo che le celle della tabella siano ancora bordate se i fogli di stile sono disabilitati.

Scegliamo le opzioni di una linea continua (solid), nera (#000000), e di medio spessore (medium) per il bordo della tabella; e i bordi delle celle in solido (solid) sottile (thin) e azzurro (#6495ed). Il codice CSS, da specificare in un foglio di stile esterno o nell’intestazione della pagina tra i tag <style type="text/css"></style>, sarà questo:

table {border: medium solid #000000;width: 50%;}td, th {border: thin solid #6495ed;width: 50%;}

Questo renderà la tabella simile a questa:

Nota 1: Le dimensioni delle tabelle e delle celle (width:) in percentuale piuttosto che in pixel sono preferite in modo che la tabella si adatti automaticamente alla finestra di visualizzazione, indipendentemente dalla risoluzione dello schermo.

Nota 2: lo spessore delle linee può anche essere espresso in pixel (px), punti (pt), pica (pc)…, così come il loro aspetto può essere in trattini (dashed), tratteggiato (dotted), in rilievo (outset o inset) ecc.

Se vogliamo che la torre della tabella e i bordi delle celle siano mescolati, aggiungeremo border-collapse: collapse negli stili di table.

L’aspetto della tabella potrebbe quindi essere il seguente:

Nei browser attuali, il testo presente nelle celle di intestazione definite dai tag th è in grassetto e centrato per default.

Nulla, naturalmente, vi impedisce di cambiare l’allineamento del testo, il carattere o il colore di sfondo delle singole celle.

Esempio

table {border: medium solid #6495ed;border-collapse: collapse;width: 50%;}th {font-family: monospace;border: thin solid #6495ed;width: 50%;padding: 5px;background-color: #D0E3FA;background-image: url(sky.jpg);}td {font-family: sans-serif;border: thin solid #6495ed;width: 50%;padding: 5px;text-align: center;background-color: #ffffff;}caption {font-family: sans-serif;}

Vedi i vari esempi descritti: documento appendice 1.

Centrare una tabella in una pagina

Se la dimensione della tabella è inferiore al 100% della finestra di visualizzazione, spesso si desidera che sia centrata nella pagina.

Con MSIE 6, Netscape 6 e +, Mozilla, Firefox o Opera 5 e +, l’attributo margin: auto, da includere negli stili CSS di table, centra automaticamente il blocco. Il trucco è quindi quello di incorniciare la tabella con i tag <div style="text-align:center"></div>, che sono inutili per i precedenti browser menzionati, ma permetteranno di avere una presentazione omogenea qualunque sia il browser.

Tabelle più elaborate

Per presentazioni più complesse, si potranno sfruttare altri set di elementi e attributi. Studiamo il seguente caso di presentazione utilizzando i tag theadtfoot e tbody, citati all’inizio dell’articolo:

<table summary="liste de quelques articles publiéssur OpenWeb regroupés par auteurs (en ligne) et niveaux (en colonne)"><caption>Présentation de quelques articles publiés sur OpenWeb</caption> <thead> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </tfoot> <tbody> <tr> <th>Tristan Nitot</th> <td>Introduction à l'accessibilité</td> <td>Introduction à l'accessibilité</td> <td></td> </tr> <tr> <th>Tristan Nitot</th> <td>Interview de Chantal Laplanche, ResponsableAccessibilité Web au Ministère de la Culture</td> <td>Interview de Chantal Laplanche, ResponsableAccessibilité Web au Ministère de la Culture</td> <td>Interview de Chantal Laplanche, ResponsableAccessibilité Web au Ministère de la Culture</td> </tr> </tbody> <tbody> <tr> <th>Laurent Denis</th> <td>Un exemple de feuille de style d'impression</td> <td></td> <td></td> </tr> <tr> <th>Laurent Denis</th> <td></td> <td>Commenter le document de travailW3CXHTML 2</td> <td>Commenter le document de travailW3CXHTML 2</td> </tr> </tbody></table>

Questo dà questo risultato poco attraente:

La specifica. Il W3C specifica che il thead e tfoot devono essere dichiarati prima del tbody. Il browser interpreterà da solo il corretto posizionamento dei diversi gruppi di celle.

Prima di tutto, uniamo le celle di articoli e autori identici. Per le celle nelle righe aggiungeremo l’attributo colspan="n"; per quelle nelle colonne, sarà usato rowspan="n", con n che è il numero di celle unite.

Il codice (X)HTML diventa:

<table summary="liste de quelques articles publiéssur OpenWeb regroupés par auteurs (en ligne) et niveaux (en colonne)"><caption>Présentation de quelques articles publiés sur OpenWeb</caption> <thead> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Débutants</th> <th>Experts</th> <th>Gourous</th> </tr> </tfoot> <tbody> <tr> <th rowspan="2">Tristan Nitot</th> <td colspan="2">Introduction à l'accessibilité</td> <td></td> </tr> <tr> <td colspan="3">Interview de Chantal Laplanche, ResponsableAccessibilité Web au Ministère de la Culture</td> </tr> </tbody> <tbody> <tr> <th rowspan="2">Laurent Denis</th> <td>Un exemple de feuille de style d'impression</td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="2">Commenter le document de travailW3CXHTML 2</td> </tr> </tbody></table>

Risultato:

Rimane da migliorare la presentazione visiva per renderla più piacevole usando i CSS:

table {border:3px solid #6495ed;border-collapse:collapse;width:90%;margin:auto;}thead, tfoot {background-color:#D0E3FA;background-image:url(sky.jpg);border:1px solid #6495ed;}tbody {background-color:#FFFFFF;border:1px solid #6495ed;}th {font-family:monospace;border:1px dotted #6495ed;padding:5px;background-color:#EFF6FF;width:25%;}td {font-family:sans-serif;font-size:80%;border:1px solid #6495ed;padding:5px;text-align:left;}caption {font-family:sans-serif;}

Risultato:

Complementi

• Come la larghezza della colonna, anche l’altezza di ogni riga può essere impostata. L’attributo height: sarà specificato per l’elemento tr.
• L’allineamento verticale del testo presente in ogni cella può essere modificato utilizzando l’attributo vertical-align: che può assumere i valori: baseline | top | middle | bottom. Questo attributo può essere specificato per gli elementi td o th.
• Per posizionare la didascalia della tabella l’attributo caption-side, da specificare per l’elemento table può assumere i valori top | bottom.

Vedi i vari esempi descritti: appendice 2 documento.