Tabelle HTML responsive con CSS

In questa nuova lezione del corso di CSS vediamo come dare un po’ di stile alle tabelle. In passato le tabelle venivano usate per creare vari tipi di layout, all’epoca non c’erano diverse dimensioni di schermo, il sito bastava fosse compatibile con la dimensione di 1024x768 ed eravamo tutti felici.

Le tabelle però non nacquero con lo scopo di creare layout, per questo motivo vennero introdotti i <div>, elementi che negli anni successivi alla loro introduzione (ancora oggi) vennero abusati più delle tabelle. L’evoluzione del div sono i tag semantici ampiamente analizzati, commentati e usati nel corso di HTML.

Detto questo torniamo a focalizzarci sulle tabelle e sul fatto che siano la cosa più anti-responsive sulla faccia del pianeta.

Quando si creano degli stili per una tabella bisogna tenere da conto qualche cosina:

• Ricordarsi sempre di rendere il markup il più semplice possibile (questo vale in generale per tutto, ma in particolar modo per le tabelle)
• Usare quanto più possibile le percentuali per indicare le larghezze delle colonne, in questo modo con schermi più piccoli sarà più “facile” adattare celle troppo larghe. Ci saranno comunque situazioni dove le celle saranno troppo lunghe e allora in quel caso bisognerà intervenire con altre soluzioni.
• Usare la dichiarazione table-layout: fixed così da rendere più prevedibile le dimensioni della tabella e ci permetterà inoltre di impostare la larghezza delle colonne (come già discusso nel punto precedente)
• Usare la dichiarazione border-collapse: collapse così da evitare il doppio bordo standard (le celle sono distanziate tra di loro) e anche in questo caso semplificarci la vita nella gestione dei bordi.
• Utilizzare <thead>, <tbody> e <tfoot> per poter dividere la tabella in spazi logici e semplificare ancora una volta la gestione degli stili delle varie sezioni.
• Alternare i colori delle righe così da migliorare la leggibilità
• Usare la proprietà text-align per allineare il testo e migliorare il flusso di lettura dei dati/informazioni.

Tutto molto bello, ma come si implementa tutto ciò?

Partiamo con la creazione di una tabella in HTML:

1<table>
2<caption>Starter della prima generazione</caption>
3<thead>
4  <tr>
5    <th>Numero</th>
6    <th>Immagine</th>
7    <th>Nome</th>
8    <th>Tipo</th>
9    <th>Evoluzione</th>
10  </tr>
11</thead>
12<tbody>
13  <tr>
14    <td>#001</td>
15    <td><img src="https://vignette4.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest?cb=20140328190757" alt="Bulbasaur"></td>
16    <td>Bulbasaur</td>
17    <td>Erba/Veleno</td>
18    <td>Ivysaur</td>
19  </tr>
20  <tr>
21    <td>#004</td>
22    <td><img src="https://vignette2.wikia.nocookie.net/pokemon/images/7/73/004Charmander.png/revision/latest?cb=20140724195345" alt="Charmender"></td>
23    <td>Charmender</td>
24    <td>Fuoco</td>
25    <td>Charmeleon</td>
26  </tr>
27  <tr>
28    <td>#007</td>
29    <td><img src="https://vignette2.wikia.nocookie.net/pokemon/images/3/39/007Squirtle.png/revision/latest?cb=20140328191525" alt="Squirtle"></td>
30    <td>Squirtle</td>
31    <td>Acqua</td>
32    <td>Wartotle</td>
33  </tr>
34</tbody>
35<tfoot>
36  <tr>
37    <th>Totale</th>
38    <th>3</th>
39  </tr>
40</tfoot>
41</table>

Per quanto riguarda la parte di CSS direi di lavorare prima su degli stili globali

1html {
2  font-family: sans-serif;
3}
4
5img {
6  max-width: 100%;
7}

In questo modo il font del documento non sarà più con le grazie, ma senza e le immagini si adatteranno alla cella senza creare troppi problemi.

Applichiamo gli stili generali alla tabella:

1table {
2  table-layout: fixed;
3  width: 100%;
4  border-collapse: collapse;
5}

Qui abbiamo già seguito un paio di best practice suggerite precedentemente. Avere usato table-layout: fixed modifichiamo le larghezze delle varia celle usando le percentuali (sempre come consigliato in precedenza)

1thead th:nth-child(1) {
2  width: 10%;
3}
4
5thead th:nth-child(2) {
6  width: 5%;
7}
8
9thead th:nth-child(3) {
10  width: 35%;
11}
12
13thead th:nth-child(4) {
14  width: 20%;
15}
16
17thead th:nth-child(5) {
18  width: 20%;
19}

Diamo un po’ di padding così da distanziare il testo e far “respirare” di più la nostra tabella.

1th,
2td {
3  padding: 20px;
4}

Allineiamo i vari testi

1tbody td {
2  text-align: center;
3}
4
5tfoot th {
6  text-align: right;
7}

Alterniamo i colori delle righe:

1tbody tr:nth-child(odd) {
2  background-color: #fff;
3}
4
5tbody tr:nth-child(even) {
6  background-color: #eee;
7}

Quello per le righe dispari (odd) è anche possibile toglierlo perché tanto bianco è già bianco lo sfondo.

Infine diamo un po’ di stile anche alla <caption>:

1caption {
2  padding: 20px;
3  font-style: italic;
4  caption-side: bottom;
5  color: #666;
6  text-align: right;
7}

Ottimo, la nostra tabella è pronta. Qualora ci fossero problemi con i dispositivi mobili possiamo sempre inserire la tabella in un <div> alla quale assegnare (attraverso l’uso di una classe magari) la dichiarazione overflow-y: scroll.

1<div class=”responsive-table”><table>...</table></div>

1.responsive-table {
2   overflow-y: scroll;
3}

Archiviata questa parte con le tabella andiamo avanti con qualcosa di più moderno e sicuramente più utile, i cascading layer.