Negli ultimi anni si è sempre più imposto nel mondo web, la realizzazione di pagine web senza tabelle o i pessimi frame per determinare la disposizione degli oggetti. Abbiamo già parlato anche dei tag semantici che vanno decisamente verso questa direzione.
La letteratura vuole che le tabelle servano solo ad esporre dati, ma l’insistente uso delle tabelle anche per la costruzione di layout che fossero fluidi ed adattabili ai più svariati dispositivi mobili ha imposto delle esigenze tecniche riviste con i CSS3 e un layout dedicato alle tabelle di qualsiasi natura. Sia chiaro, nessuno vi vieta di utilizzare tabelle per gestire sia dati che disposizione di oggetti, ma probabilmente vi ritrovereste con un sito web “già vecchio”, quindi è sempre bene seguire gli standard e,nel bene e nel male, anche le mode tra gli sviluppatori e designer. C’è da dire che oggettivamente, la disposizione tabellare con griglie CSS è decisamente più performante, permette di evitare l’attributo float, e permette disposizioni prima complesse o impossibili. Potete approfondire qui. Le tabelle, soprattutto se annidate, non sono molto convenienti per la complessità e gestione del codice e non sono apprezzate dai motori web. Vi invito a riflettere come griglie CSS siano assolutamente la scelta vincente di molti framework CSS come Bootstrap.
Partiamo da un semplice esempio, la classica tabellina 2×2 ma usiamo contenitori div con opportune classi che, senza troppo nasconderci, richiamano i tag che già conosciamo <table>, <tr>, <td>
<div class="tabella">
<div class="riga">
<div class="colonna">Casella 1</div>
<div class="colonna">Casella 2</div>
</div>
<div class="riga">
<div class="colonna">Casella 3</div>
<div class="colonna">Casella 4</div>
</div>
</div>Il CSS invece è il seguente. Fa uso dell’attributo display che conosciamo per disporre gli oggetti in giro per la nostra pagina.
.tabella{
display: table;
width: 40%;
}
.riga{
display: table-row;
}
.colonna{
display: table-cell;
border: 1px solid grey;
padding: 0.5em 0 0.5em 0.5em;
}Come si nota, è molto più simile alla gestione degli elementi della pagina piuttosto che le classiche tabelle, o meglio, c’è una profonda divisione tra struttura e stile obbligato dall’uso del css che è quello che cerchiamo di fare nelle nostre lezioni.
Un elemento grafico carino è quello di alternare le righe con colori differenti per migliorare la lettura come in excel o mysql. Niente di più semplice, basta usare il seguente selettore che ogni riga pari (2n), la colora. Analogamente per le righe dispari cambia la dicitura (2n+1). Può essere applicato anche alle colonne sostituendo il selettore iniziale. Esiste anche per le tabelle classiche.
.riga:nth-child(2n){
background-color: whitesmoke;
}Al testo interno, possiamo applicare tutti gli stili che gia conosciamo con font-*, color, text-align, padding, background-color per l’intestazione ecc.
Seguite questo articolo per trovare altri “stratagemmi” per decorare e personalizzare le tabelle DIV+CSS.
Trovate il sorgente completo allegato. Per comodità, il foglio di stile è immerso nello head della pagina html.
Ultima modifica 6 Febbraio 2023