Un classico… Abbiamo una quantità elevata di righe in una tabella e quindi, per una lettura comprensibile, vorremmo fissare header e footer e fare lo scrolling dei contenuti con una barra verticale. Rendiamo quindi le righe scorrevoli. Eviteremo pure il paginone lunghissimo che fa’ “girare gli occhi”…
Non solo ma una tabella realizzata come segue permetterà a coloro che usano screen reader o altri “lettori di schermo”, di poter fruire della pagina alle stesse condizioni di un utente normodotato.
Vediamo come fare…
Ci servono due tabelle e un blocco (div).
Una tabella contiene i dati senza formattazioni e serve anche a che usa lettori di schermo e all’accessibilità in generale. Tramite css la renderemo più carina. L’altra tabella sarà esterna e farà da contenitore alla precedente. Il tag <div> servirà a far comparire la barra di scorrimento verticale.
Vediamo un po’ di codice in cui chiamerò:
- tb_uno la tabella esterna
- tb_due la tabella interna coi valori
- div_scroll l’elemento di blocco
Vediamolo nel dettaglio:
.tb_uno {
width: 600px;
margin: 0 auto;
padding: 0;
background: navy;
color: white;
}
.tb_uno th#header1, .tb_uno th#header2, .tb_uno th#header3 {
width:200px;
padding-left:0.6em;
text-align: left;
}
.tb_uno caption {
background: white;
color: black;
font-size: 1.2em;
margin: 0 auto;
}
.tb_uno tbody {
background: green;
color: black;
}
.tb_uno td {
text-align: left;
}
Abbiamo appena formattato una tabella, tramite css, con colori, sfondo, header e footer.
Adesso possiamo passare all’altra tabella, quella interna (tb_due)
La tabella appena vista è perfettamente funzionale ed accessibile. Ovviamente i colori sono puramente indicativi e possiamo cambiarli a nostro piacimento. Adesso dobbiamo introdurre la seconda tabella; lo faremo anche per “distinguere” il colore di ogni singolo rigo dal precedente, per una migliore leggibilità. Il suo codice è il seguente:
tb_due {
margin: 0;
padding: 0;
color: black;
background: transparent;
}
.tb_due td {
padding-left: 10px;
width: 200px;
background: silver;
color: black;
}
.tb_due tr.col_alt td {
background: gray;
color: black;
}
Questo codice, con l’uso di della classe “col_alt”, ci permette di avere righe colorate alterne. Nel css andiamo dichiaro che i <td> avranno un colore grigio (silver). Poi aggiungerò il colore della riga alternata (gray) tramite la classe “.tb_due tr.col_alt td”.
E adesso come ultima cosa non ci resta che sistemare l’elemento di blocco, ovvero il tag <div>, allo scopo di aggiungere la barra verticale.
div_scroll {
height:7em;
overflow:auto;
}
Ecco l’esempio di tale tabella…
Interessante ma nel caso che il numero di colonne sia tale da necessitare anche di uno scroll orizzontale ?
Che soluzione proporresti ?
L’esempio è molto interessante però mi sembra che non gestisca l’allineamento fra l’header delle colonne ed il contenuto delle colonne stesse, soprattutto nel caso di colonne con contenuto molto variabile.
Non ho una soluzione e sto cercando qualche suggerimento.
Quando nelle tabelle ci sono dati particolari bisogna vedere nello specifico dove vogliamo arrivare e che risultati grafici vogliamo ottenere. Purtroppo lo scroll delle tabelle con header fisso non è cosa semplice. Se guardi nell’esempio postato vedrai che semplicemente i TD dell’header sono di 200px e i TD della tabella sono di 200px. Quindi è difficile che le colonne non tornino allineate, a meno che non si abbiano testi senza spazi… che quindi non riescono ad andare a capo nel TD (a chi servono i testi senza spazi??).
Io ho postato una delle soluzioni più interessanti (per quello che sono riuscito a fare io).
Dov’è che hai trovato problemi di allineamento?