Laboratorio di Tecnologie Web HTML: Tabelle Dott. Stefano Burigat

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Laboratorio di Tecnologie Web HTML: Tabelle Dott. Stefano Burigat"

Guido Casagrande
6 anni fa
Visualizzazioni

1 Laboratorio di Tecnologie Web HTML: Tabelle Dott. Stefano Burigat

2 Come usare le tabelle Le tabelle HTML possono essere utilizzate in tutti quei casi in cui sia necessario inserire dati organizzati in righe e colonne all'interno di una pagina web. Alcuni esempi possono essere la visualizzazione di calendari, orari, piani di lavoro, statistiche, confronti di prodotto, etc. I dati che possono essere rappresentati in una tabella vanno da numeri ed elementi testuali ad immagini ed altri oggetti multimediali. In passato, gli elementi html utilizzati per la creazione di tabelle di dati venivano utilizzati anche per strutturare visivamente le pagine web in colonne e per controllare l'allineamento del contenuto. Oggi, tali operazioni vengono svolte tramite CSS e le tabelle dovrebbero essere utilizzate solo per il loro scopo naturale. Struttura minima di una tabella In HTML, il contenuto di una tabella è inserito all'interno di celle organizzate in righe. Le celle possono contenere informazione d'intestazione (ossia i titoli delle colonne) oppure dati veri e propri. L'intera tabella viene rappresentata da un elemento contenitore <table>, le singole righe da elementi contenitore, le celle d'intestazione da elementi contenitore <th> e le celle di dati da elementi contenitore <td>. Come minimo, una tabella dovrebbe contenere un elemento <table> con all'interno uno o più elementi con all'interno uno o più elementi <td>. Il numero delle colonne viene determinato in base al

3 numero di celle presenti nelle righe (ogni riga dovrebbe avere lo stesso numero di celle). <!DOCTYPE html> <h1>turni</h1> <table> <td>lunedì 12</td> <td>tizio</td> <td>martedì 13</td> <td>caio</td> Come si può notare, il browser formatta automaticamente i dati che abbiamo inserito in righe e colonne secondo la struttura definita, creando una tabella 2x2. Di default, la dimensione delle celle è determinata dinamicamente in base alla grandezza del contenuto. Come per tutto ciò che abbiamo visto finora, anche nel caso delle tabelle gli aspetti di presentazione (spazi aggiuntivi, bordi, colori, etc.) vengono controllati tramite l'utilizzo di CSS. L'esempio seguente mostra una tabella contenente informazione d'intestazione per le colonne, specificata tramite l'utilizzo dell'elemento <th>.

4 <!DOCTYPE html> <h1>caratteristiche degli utenti</h1> <table> <th>utente</th> <th>altezza (cm)</th> <th>peso (kg)</th> <td>tizio</td> <td>175</td> <td>78</td> <td>caio</td> <td>182</td> <td>88</td> L'intestazione è importante in quanto fornisce un contesto alle informazioni presenti nelle celle di dati, rendendole maggiormente accessibili. Browser diversi, ad esempio gli screen reader, possono leggere le informazioni d'intestazione in modo diverso rispetto al resto. E' quindi necessario evitare di creare delle intestazioni usando elementi <td> formattati in modo diverso.

5 Spanning Un aspetto fondamentale della struttura delle tabelle è il cosiddetto spanning, ossia l'estensione di una cella in modo che questa possa coprire uno spazio su più righe o colonne. Le celle estese permettono di creare strutture di tabella più complesse, a spese della comprensibilità del codice html. Si può estendere una cella (d'intestazione o di dati) sfruttando gli attributi colspan e rowspan. L'estensione di colonna, effettuata tramite attibuto colspan negli elementi <th> e <td>, estende una cella verso destra sulle colonne seguenti. <!DOCTYPE html> <h1>turni</h1> <table> <th></th> <th>pc1</th> <th>pc2</th> <th>pc3</th> <th>processore</th> <td colspan="2">i7</td> <td>i5</td> <th>memoria</th> <td>8gb</td> <td colspan="2">4gb</td>

6 Notate che nella prima riga ci sono 4 elementi mentre nelle successive due ce ne sono 3 in quanto ciascuna di quelle due righe contiene una cella che si espande su due colonne (mantenendo quindi il numero totale di colonne pari a 4). Notate anche l'utilizzo di una cella vuota nella prima riga per strutturare la tabella senza intestazione della prima colonna. Utilizzando colspan bisogna fare attenzione a non specificare un valore che sia superiore al numero di colonne rimanenti nella tabella, altrimenti il browser potrebbe aggiungere colonne in più che andrebbero a rompere la struttura della tabella. Per estendere una cella su più righe si utilizza l'attributo rowspan, in modo simile a quanto fatto per colspan. La complicazione nel caso di rowspan è che la celle che non compaiono non sono quelle appartenenti alla stessa riga in cui compare rowspan ma quelle appartenenti alle righe sottostanti. <!DOCTYPE html> <h1>configurazioni</h1> <table border>

7 <th></th> <th>pc1</th> <th>pc2</th> <th>pc3</th> <th rowspan="2">processore</th> <td>i7 3920</td> <td rowspan="2">i7 3720</td> <td rowspan="2">i5</td> <td>i7 3820</td> <th>memoria</th> <td>8gb</td> <td colspan="2">4gb</td> Accessibilità delle tabelle Ci sono diverse soluzioni che un web designer può mettere in atto per rendere più accessibile il contenuto delle tabelle, altrimenti tipicamente difficili da interpretare. Il primo passo per migliorare l'accessibilità delle tabelle è fornire una descrizione del loro contenuto (ed eventualmente della loro struttura se questa è inusuale). Ciò può essere fatto attraverso l'utilizzo dell'elemento <caption> che permette di inserire un titolo o breve descrizione assieme alla tabella. Di default, il contenuto dell'elemento <caption> viene visualizzato sopra la tabella. Se presente, l'elemento <caption> deve essere il primo elemento all'interno dell'elemento <table>.

8 <!DOCTYPE html> <table border> <caption>configurazioni di PC disponibili</caption> <th></th> <th>pc1</th> <th>pc2</th> <th>pc3</th> VEDI ESEMPIO RECEDENTE Per inserire descrizioni più lunghe, è preferibile inserire la tabella all'interno di un elemento <figure> e sfruttare l'elemento <figcaption>. Gli elementi <thead>, <tbody> e <tfoot> possono essere utilizzati per raggruppare righe che hanno rispettivamente il ruolo di intestazione, corpo e piè di pagina di una tabella. Il loro utilizzo rende esplicita la struttura logica della tabella e ne semplifica sia l'accessibilità sia la possibilità di applicare stili diversi alle diverse parti (utilizzando CSS). Alcuni browser possono anche rivisualizzare le intestazioni ed i piè di pagina quando le tabelle si estendono su più pagine. <!DOCTYPE html>

9 <table border> <caption>configurazioni di PC disponibili</caption> <thead> <th></th> <th>pc1</th> <th>pc2</th> <th>pc3</th> </thead> <tbody> <th rowspan="2">processore</th> <td>i7 3920</td> <td rowspan="2">i7 3720</td> <td rowspan="2">i5</td>... </tbody> Esistono anche due elementi, <col> e <colgroup> che consentono di descrivere le singole colonne di una tabella o gruppi di colonne (ma non vengono utilizzati per rappresentarne il contenuto). La presenza di questi elementi può velocizzare la visualizzazione delle tabelle (non serve attenderne il contenuto per sapere quante sono le colonne) L'attributo span può essere utilizzato per segnalare il numero di colonne su cui si estende l'elemento <col> o <colgroup>. Se un elemento <colgroup> definisce l'attributo span allora tale elemento non può avere figli.

10 Se l'attributo span non è definito allora <colgroup> deve contenere uno o più elementi <col>. <!DOCTYPE html> <table border> <caption>configurazioni di PC disponibili</caption> <col span="1" class="componente"> <colgroup id="pc"> <col span="1" class="pc1"> <col span="1" class="pc2"> <col span="1" class="pc3"> </colgroup> <thead>... </thead> <tbody>... </tbody> Un'ulteriore possibilità per aumentare l'accessibilità delle tabelle è l'utilizzo dell'attributo scope negli elementi <th>. Tale attributo può assumere i valori row, col, rowgroup e colgroup e specifica a quali celle si applica l'intestazione specificata nell'elemento <th>. Ad esempio, se scope è uguale a row, significa che l'intestazione si applica a tutte le celle della riga in cui è contenuta.

11 <!DOCTYPE html> <h1>turni</h1> <table> <th></th> <th scope="col">pc1</th> <th scope="col">pc2</th> <th scope="col">pc3</th> <th scope="row">processore</th> <td colspan="2">i7</td> <td>i5</td> <th scope="row">memoria</th> <td>8gb</td> <td colspan="2">4gb</td> Ricapitolando gli elementi visti, secondo la specifica HTML5 una tabella può contenere, nell'ordine: un elemento <caption> (opzionale), un elemento <thead> (opzionale), un elemento <tfoot> (opzionale), zero o più elementi <tbody> oppure uno o più elementi, un elemento <tfoot> (opzionale, ma ci può essere un solo <tfoot> in totale). Notate che ciò significa che un elemento <table> non può contenere testo anonimo o altri tipi di elemento.

12 All'indirizzo web è possibile trovare ulteriori indicazioni su come strutturare le tabelle in modo accessibile.

Documenti analoghi

ELENCHI. 1. Prima 2. Seconda 3. terza. Prima Seconda terza

ELENCHI. 1. Prima 2. Seconda 3. terza. Prima Seconda terza ELENCHI Un elenco è una serie di voci di testo che possono essere contrassegnate da un punto elenco oppure da un numero o da una lettera e volendo anche da un elemento grafico. Si possono avere elenchi