Tabelle responsive con Bootstrap 4.3

Vediamo subito un esempio di tabella con Bootstrap 4.3:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>

La prima cosa che si nota è sicuramente il tag specifico per le tabelle <table></table>

All’interno di questa tag creiamo due sezioni, con altri 2 tag: <thead></thead> e <tbody></tbody>

La prima, thead (table header), determina la prima riga, l’header della tabella.

Al suo interno troviamo un tag <tr> (table row) in cui solitamente si mette una descrizione della colonna a cui fa riferimento, e per fare questo utilizziamo tanti tag <th> (table head) quante sono le colonne desideriamo avere nella nostra tabella.

All’interno del tag <tbody> creiamo invece un’altra riga con <tr>, utilizziamo un’altra volta il tag <th> ma al suo interno, questa volta, utilizziamo il tag <td> (table data) all’interno del quale inseriamo i valori da riportare in tabella.

Semplice tabella tema chiaro con Bootstrap 4.3

Cambiare il tema alla tabella Bootstrap

Tema scuro

La prima cosa che possiamo fare è cambiare lo stile passando dal tema chiaro al tema scuro, semplicemente assegnando la classe .table-dark all’interno del tag <table>.

Semplice tabella Bootstrap 4.3 dark theme

Cambiare tema all’header

Per cambiare tema all’header dobbiamo solamente aggiungere la classe .thead-light oppure .thead-dark al tag <thead>:

Alternare colore alle righe

Per alternare il colore alle righe della nostra tabella Bootstrap dobbiamo invece inserire la classe .table-striped all’interno del tag <table>:

Bordi della tabella

Possiamo anche aggiungere i bordi alla nostra tabella Bootstrap 4.3. Dobbiamo solamente aggiungere la classe .table-bordered sempre all’interno del tag <table>

Dimensioni Tabella

Possiamo ridurre le dimensioni della tabella con un’altra classe che Bootstrap ci mette a disposizione. Per diminuire lo spazio tra una riga e la successiva, possiamo usare la classe .table-sm sempre all’interno del tag <table>. Il risultato sarà questo:

Personalizzare le righe

Bootstrap 4.3 ci dà anche modo di colorare le righe oppure solo le sigole celle delle nostre tabelle, con l’uso di speciali classi da applicare alle righe (all’interno del tag <tr>) oppure alle celle, siano esse celle dell’intestazione (tag <th>) oppure quelle che contengono i dati (tag <td>).

Questa possibilità non esiste nelle tabelle con tema scuro, ma si può ovviare al problema utilizzando le utility per il background:

Un pensiero su “Tabelle responsive con Bootstrap 4.3

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.