Presentazione delle tabelle HTML: tra CSS e jQuery

Il modo di gestire le tabelle HTML e cambiato moltissimo negli ultimi 10 anni. All'inizio del nuovo millennio le tabelle erano spesso utilizzate per definire il layout delle pagine: l'adozione come best practice del layout tramite elementi div e opportuni fogli stile e tutto sommato abbastanza recente. Oggi possiamo assumere che tabelle siano usate solamente per organizzare dati realmente strutturati in tabella.

Il modo di gestire le tabelle HTML è cambiato moltissimo negli ultimi 10 anni. All’inizio del nuovo millennio le tabelle erano spesso utilizzate per definire il layout delle pagine: l’adozione come best practice del layout tramite elementi div e opportuni fogli stile è tutto sommato abbastanza recente. Oggi possiamo assumere che tabelle siano usate solamente per organizzare dati realmente strutturati in tabella. Nonostante ciò capita ancora di trovare sul Web dalle tabelle gestite per mezzo delle proprietà HTML. Per fare un esempio eclatante, non è ancora scomparsa l’abitudine di usare align=center per centrare una tabella o i suoi contenuti.

La situazione si complica se consideriamo le nuove potenzialità offerte da CSS, JavaScript e soprattutto delle librerie orientate al Web, come ad esempio jQuery. La vastità delle scelte possibili rende difficile imporre uno standard per la presentazione delle tabelle. Esistono molte soluzioni valide, tutte conformi ai nuovi paradigmi di lavoro, eppure molto diverse tra loro. Affronteremo perciò l’argomento cercando di confrontare soluzioni che coinvolgeranno sia la struttura del markup, sia le proprietà CSS, ed anche l’utilizzo di jQuery.

Iniziamo risolvendo il primo problema a cui abbiamo accennato, ovvero l’utilizzo (ad oggi sconsigliato) dei vecchi attributi HTML delle tabelle. Tutto ciò che una volta si otteneva agendo sul markup, oggi andrebbe realizzato utilizzando esclusivamente CSS.

Presentazione con CSS

Riassumiamo brevemente quali sono gli aspetti principali di una tabella che possiamo gestire via CSS, anziché utilizzando i vecchi attributi HTML.

Bordi: la definizione dei bordi via HTML, ovvero mediante l’attributo della tag table (ad esempio border="1px"), è deprecata. Al suo posto possiamo usare le proprietà CSS in questo modo

il risultato è praticamente lo stesso, con una differenza: usando le proprietà CSS possiamo caratterizzare in modo differente i diversi bordi. Ciò significa, ad esempio, che potremmo avere un tipo di bordo per le prime righe della tabella, un altro tipo di bordo (diverso dal precedente) per le righe intermedie, e così via. L’altro vantaggio dovrebbe essere evidente: la separazione del codice strutturale (HTML) da quello di presentazione (CSS).

Allineamento : anche l’allineamento dei dati della tabella può essere ottenuto con CSS, senza ricorrere alla proprietà obsoleta align. Possiamo ad esempio centrare i valori della tabella usando

oppure specificare l’allineamento verticale usando

lo stesso discorso vale per tutti gli altri aspetti: altezza, larghezza, colore, padding ecc. Tutti questi possono essere definiti usando le opportune proprietà CSS, dimenticandoci degli attributi HTML. Un’ottima presentazione dell’argomento è disponibile qui, sul sito del W3C.
 

Arricchimenti grafici

Arricchimenti grafici

Dopo aver gettato le basi per la presentazione elementare di una tabella vediamo come realizzare alcuni arricchimenti degli grafici più richiesti. Una delle esigenze più comune è forse quella di renderizzate le righe dalla tabella usando un pattern zebrato, ovvero

Figura 1 – Tabella con righe zebrate

Per ottenere questo risultato possiamo usare jQuery, ad esempio

questa scelta può andare bene se la tabella non deve interagire con l’utente, ovvero rimane statica anche quando l’utente ci passa sopra il mouse. Se invece vogliamo evidenziare la riga selezionata dall’utente, che potrebbe essere ad esempio cliccabile (vedi la classica pagina di una casella webmail), la scelta qui sopra non è la migliore. Supponiamo infatti di voler creare l’effetto “mouse over” tramite CSS

se usiamo questo approccio molto probabilmente non otterremo ciò che abbiamo in testa. Il problema è il seguente: nel momento in cui jQuery impone un nuovo colore di sfondo alle righe della tabella, il legame con il foglio di stile “si rompe”. Per verificarlo basta commentare il codice jQuery, per vedere tornare all’opera l’effetto associato al selettore :hover.

A questo punto si potrebbe entrare in un tunnel piuttosto pericoloso. Invece di risolvere il problema si potrebbe gestire interamente il look & feel via jQuery, ovvero gestendo anche gli eventi “mouseover” e “mouseout” tramite jQuery. Questa è una strada corretta ma pericolosa, perché rischiamo di mettere una pezza là dove non è strettamente necessario. Ovviamente tutto dipende da ciò che dobbiamo fare: se il nostro scopo è semplicemente quello di avere una tabella zebrata con effetto di highlight sulla riga dove si trova il puntatore del mouse, una soluzione più semplice potrebbe essere sostituire il codice jQuery (visto sopra) con il seguente

dove le classi CSS td_odd e td_even potrebbero essere

Interazione con l’utente

Interazione con l’utente

L’ultimo aspetto che vogliamo considerare riguarda l’interazione con l’utente. Consideriamo un caso piuttosto realistico: abbiamo una tabella con dei dati e vogliamo fare in modo che quando l’utente clicca su una riga (indifferentemente dalla colonna) si apra un link dipendente dalla riga cliccata. Anche qui possiamo pensare, come riferimento, alla classica webmail, dove il clic su una riga apre una e-mail.

Esistono molti modi di ottenere questo effetto. La maggior parte delle soluzioni proposte sul Web usa JavaScript. Si tratta di un’ottima soluzione che presenta però alcuni svantaggi. In alcuni casi potremmo non potere, o non volere, usare JavaScript per gestire l’evento “onclick” sulla riga. Questo potrebbe far parte dei requisiti (ad esempio: supporto di browser con JavaScript disabilitato), oppure potrebbe essere dettato da qualche metodologia di sviluppo (vedi ad esempio il concetto di progressive enhancement).

Un altro approccio potrebbe sfruttare jQuery per appendere al volo un handler dell’evento “onclick” sulle righe della tabella, ma anche questa strada presenta dei limiti. Nella maggior parte dei casi la logica che stabilisce qual è l’URL o la richiesta HTTP da associare al clic su una riga, risiede nella business logic dell’applicazione. Se vogliamo che jQuery appenda un handler coerente con le informazioni gestite dalla business logic, dobbiamo mettere in piedi dei sistemi più o meno elaborati. Si va dalla soluzione “statica”, che potrebbe considerare la creazione del codice jQuery a run time da parte delle pagine dinamiche (ad esempio PHP), a quella “dinamica”, che potrebbe utilizzare delle chiamate Ajax che vanno a recuperare le informazioni relative ad ogni evento del tipo “onclick” sulla riga.

Ancora una volta scartiamo le soluzioni complesse (ma ugualmente valide) per vedere come risolvere il problema nel modo più semplice. Se la nostra tabella è creata (com’è ragionevole supporre) leggendo dei dati da un database e scrivendo poi tali dati attraverso del codice server-side (PHP, JSP o altro), è abbastanza facile inserire il link in modo ridondante, ovvero su più di una colonna. Ciò significa, nel caso di una casella webmail, che potremmo inserire la tag a sia sulla colonna del mittente, su quella dell’oggetto e su quella dell’anteprima. Questo appesantisce un po’ la pagina, ma non è detto che le soluzioni alternative pesino meno. Ancora una volta tutto dipende dal contesto specifico del progetto: è sempre bene valutare tutte le alternative e confrontarle tra loro, per trovare quella più adatta alla nostra esigenza. Nel caso che decidessimo di inserire la tag a su due o tre colonne, rendendo così attivi tali elementi della tabella, possiamo ottenere l’effetto desiderato semplicemente agendo sullo stile CSS, ad esempio

che è il codice minimo necessario per nascondere i vari link, in modo che l’unico effetto risultante sia quello di “mouseover” sulla singola riga, già visto sopra, che riportiamo per chiarezza.

Pur avendo considerato solamente le soluzioni più semplici, dovremmo aver chiarito quanto sia vasto argomento, e soprattutto quanto siano numerose le scelte possibili. Ribadiamo che nessuna delle possibilità qui discusse va considerata giusta o sbagliata, ma ciascuna di esse può risultare la più adatta ad un particolare contesto. L’unica raccomandazione, come spiegato all’inizio, è di ricorrere ai fogli di stile per definire la presentazione della tabella. Se non compiamo questa operazione preliminare rischiamo di ridurre a zero il numero di scelte a nostra disposizione.

table_01