Tabella scrollabile verticalmente formattata con i CSS

Invece di "intasare" la pagina o vedere una kilometrica barra verticale di scroll alla destra della finestra del browser, possiamo "comprimere" la suddetta tabella e mostrare in ogni caso tutti i dati. Una tabella realizzata in questo modo permette a coloro che usano screen reader o altri programmi lettori di schermo, di poter fruire della pagina alle stesse condizioni di un utente normodotato. Il presente articolo potremmo definirlo una "estensione" di un altro, precedentemente scritto sempre nella sezione CSS dal titolo "Realizzare una tabella accessibile".

Le tabelle in teoria

Fatta questa premessa, passiamo a vedere in linea "teorica" come deve essere sviluppata la tabella. Effettivamente ce ne servono due più un elemento di blocco al quale verrà assegnata una altezza e, sempre a tale box, assegneremo la proprietà: overflow:auto. Per questo esempio ho creato una anagrafica di ipotetici utenti, dei quali ci interessa il nome, cognome e professione. Partiamo con la visualizzazione del primo file di esempio della tabella, contenente i dati, senza nessuna formattazione. Questa tabella è leggibile da utenti che usano lettori di schermo. Ovviamente non avendo nessun file CSS associato, la vediamo "spoglia". Quello che noi ci ripromettiamo, invece, è di mantenerla non solo accessibile ma di renderla più presentabile dal punto di vista grafico.

La tabella esterna

Come scritto più su, avremo bisogno di due tabelle. Una esterna, che fa da contenitore, che chiameremo tabellauno; una interna che avrà come nome tabelladue; ed infine un elemento di blocco dal nome divinterno. Cominciamo con il codice della tabella esterna.

.tabellauno{ 
width:660px;  
margin:0 auto; 
padding:0;
background:#00a3dd;  
color:#fff; 
} 

.tabellauno th#header1, 
.tabellauno th#header2, 
.tabellauno th#header3{ 
width:220px; 
text-align:left; 
padding-left:0.5em;
} 

.tabellauno caption{
background:#fff;  
color:#000;  
font-size:1.2em;
margin:0 auto;
} 

.tabellauno tbody{ 
background:#8a9; 
color:#000;
}

.tabellauno td{
text-align: left;
} 

Se diamo uno sguardo alla tabella così come l´abbiamo formattata attraverso il codice css, avremo una tabella con il colore di sfondo verde. Colore dei bordi, colore della intestazione e del footer: celeste. Il secondo file di esempio mostra quanto appena scritto.

La tabella interna

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:

.tabelladue{ 
margin:0; 
padding:0;
color:#000;
background: transparent;
}

.tabelladue td{ 
background:#e5e5e5;
color:#000; 
padding-left:10px;
width:220px; 
} 

.tabelladue tr.colorata td{ 
background:#ccc; 
color:#000;
}  

Questo codice ci permette di avere quanto ci siamo prefissi: righe colorate alterne. Infatti nel foglio di stile andiamo a dichiarare che le celle [ td ] avranno un colore grigio molto tenue [ background:#e5e5e5; ]. Per fare in modo che tutta la riga successiva possa assumere un altro colore, dichiariamo attraverso una classe [ .tabelladue tr.colorata td ], un secondo colore di sfondo: background:#ccc;. Il terzo file di esempio associato a questo passaggio spiega quanto abbiamo fatto fino ad ora. Possiamo dire che la tabella comincia a prendere corpo, no?

L´elemento div

Adesso siamo giunti ad introdurre l´ultimo elemento: il div che farà apparire la barra di scroll; tale elemento lo dichiariamo con una classe; il suo codice è:

.divinterno {height:7em; overflow:auto;} 

La tabella che dobbiamo inscrivere in tale elemento è la tabella interna. Ovvio no? Altrimenti non avremmo l´effetto desiderato; siccome, si presume, che i dati in essa contenuti saranno molti di più della sua altezza, cioè 7em, ecco apparire la barra di scroll verticale. Il quarto file di esempio mostra il passaggio finale. Nel caso in cui avessimo più dati e volessimo aumentare l´altezza della tabella, basta intervenire sul codice del divinterno, modificando la sua height da 7em a quanto è necessario.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati