Blog
Usare No More Tables per creare tabelle responsive

Come creare una tabella responsive con No More Tables

Impara a realizzare delle tabelle perfettamente Responsive e Mobile-friendly con la tecnica No More Tables, implementata con delle semplici regole Css e Html.

Con l’incredibile aumento delle vendite dei dispositivi mobile, quali tablet e smartphone, degli ultimi anni, per un sito web è pressoché fondamentale che si adatti ad ogni dispositivo.

Inoltre dal 21 Aprile 2015, con il cosiddetto MobileGeddon, Google ha deciso di premiare i siti responsive, introducendo il mobile-friendly tra i fattori di ranking che influenzano la SEO di un sito web.

Per questo motivo è di fondamentale importanza che rendere responsive il tuo sito web, per avere un visione ottimale sia su desktop che su mobile.

Per testare se il tuo sito è mobile-friendly, Google ha rilasciato un tool che effettua un’analisi della pagina web e ti avverte se essa è responsive oppure no.

Creare una tabella responsive

Tra gli elementi di minore adattabilità ai dispositivi mobile, ci sono le tabelle che, nonostante si adattino già da sole alla larghezza dello schermo, per risoluzioni troppo basse, come quelle degli smartphone ed in alcuni casi dei tablet, le colonne risultano essere troppe, costringendo a far sì che esse si sovrappongano e che non vengano visualizzate correttamente.

Per risolvere questo fastidioso problema che affligge tutti i web designer, puoi usare la tecnica “No More Tables“.

Il “No More Tables” è una tecnica sviluppata da Chris Coyer per rendere responsive le tabelle trasformando le colonne in righe nei dispositivi con lo schermo ridotto.

Infatti questa tecnica non fa altro che riordinare i dati, trasformando le righe in blocchi disposti su 2 colonne.

Ora ti mostrerò un esempio per farti capire il funzionamento del “No More Tables“.

 

Ecco il codice Html che deve avere tabella.

// HTML CODE

0
<div id="no-more-tables">
1
<table>
2
<thead>
3
<tr>
4
<th>Città</th>
5
<th>Regione</th>
6
<th>CAP</th>
7
<th>Targa</th>
8
<th>Abitanti</th>
9
<th>Densità</th>
10
</tr>
11
</thead>
12
<tbody>
13
<tr>
14
<td data-title="Città">Firenze</td>
15
<td data-title="Regione">Toscana</td>
16
<td data-title="CAP">da 50121 a 50145</td>
17
<td data-title="Targa">FI</td>
18
<td data-title="Abitanti">381.695</td>
19
<td data-title="Densità">3.730,4 ab./km²</td>
20
</tr>
21
</tbody>
22
</table>
23
</div>

Ecco invece il codice Css da implementare, oltre a quello che ti servirà per modificare graficamente la tua tabella.

Naturalmente a seconda della quantità di dati della vostra tabella, valutate voi a quale larghezza effettuare la media query.

// CSS CODE

0
table {
1
width: 100%;
2
}
3
th, td {
4
border: 1px solid #c3c3c3;
5
text-align: center;
6
}
7
thead {
8
background-color: #f5f5f5;
9
}
10
11
/* Media Query per il No More Tables */
12
13
@media only screen and (max-width: 767px) {
14
/* Forza la tabella a non comportarsi come una normale tabella */
15
16
#no-more-tables table,
17
#no-more-tables thead,
18
#no-more-tables tbody,
19
#no-more-tables th,
20
#no-more-tables td,
21
#no-more-tables tr {
22
display: block;
23
}
24
25
/* Nasconde le intestazioni della tabella */
26
27
#no-more-tables thead tr {
28
position: absolute;
29
top:-9999px;
30
left:-9999px;
31
}
32
33
#no-more-tables tr { border: 1px solid #ccc; }
34
35
#no-more-tables td {
36
/* Inserisce il comportamento come una riga */
37
38
border: none;
39
border-bottom: 1px solid #eee;
40
position: relative;
41
padding-left: 50%;
42
white-space: normal;
43
text-align:left;
44
}
45
46
#no-more-tables td:before {
47
/* Inserisce il comportamento come un'intestazione di tabella */
48
49
position: absolute;
50
/* I valori top/left agiscono come padding */
51
52
top: 0;
53
left: 6px;
54
width: 45%;
55
padding-right: 10px;
56
white-space: nowrap;
57
text-align:left;
58
font-weight: bold;
59
}
60
61
/* Aggiunge l'etichetta ai dati della tabella */
62
63
#no-more-tables td:before { content: attr(data-title); }
64
}

E questo sarà il risultato finale.

Se sei da desktop prova a ridurre le dimensioni della tua pagina web per vedere l’effetto ottenuto e verificare che la tabella sia responsive.

Città Regione CAP Targa Abitanti Densità
Firenze Toscana da 50121 a 50145 FI 381.695 3.730,4 ab./km²
Milano Lombardia da 20121 a 20162 MI 1.341.667 7.385,19 ab./km²
Roma Lazio da 00118 a 00199 RM 2.867.364 2.227,32 ab./km²
Bologna Emilia-Romagna da 40121 al 40141 BO 386.419 2.743,28 ab./km²
Napoli Campania da 80121 a 80147 NA 976.851 8.329,93 ab./km²

Dati sulle città presi da Wikipedia.org in data 4 Ottobre 2015.

Questo articolo è stato realizzato con la collaborazione di Sergio Pinna.

Cliccando su "Accetta", accetti l'utilizzo dei cookie da parte nostra. Maggiori informazioni

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi