Skip to main content

Bootstrap Italia

Il tema Bootstrap 4 per lo sviluppo di applicazioni web per la PA

Tabelle

Tabelle

Documentazione ed esempi per lo stile delle tabelle.

Esempi

A causa dell’uso diffuso di tabelle su widget di terze parti come calendari e campi di selezione data, Bootstrap ha progettato le tabelle senza forzarne lo stile. È sufficiente aggiungere la classe .table a qualsiasi <table>, quindi estendere con stili personalizzati o con le nostre varie classi incluse di modificatori.

Usando il markup di base della tabella, ecco come appaiono le tabelle che utilizzano la classe .table in Bootstrap. Tutti gli stili di tabella sono ereditari, il che significa che tutte le tabelle nidificate saranno stilizzate nello stesso modo del genitore.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mario</td>
      <td>Verdi</td>
      <td>mario.verdi</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Francesco</td>
      <td>Bianchi</td>
      <td>francesco.bianchi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Alessandro</td>
      <td>Rossi</td>
      <td>alessandro.rossi</td>
    </tr>
  </tbody>
</table>

Puoi anche invertire i colori, con testo chiaro su sfondi scuri con .table-dark.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mario</td>
      <td>Verdi</td>
      <td>mario.verdi</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Francesco</td>
      <td>Bianchi</td>
      <td>francesco.bianchi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Alessandro</td>
      <td>Rossi</td>
      <td>alessandro.rossi</td>
    </tr>
  </tbody>
</table>

Opzioni delle intestazioni di tabella

Simile alle tabelle e alle tabelle scure, utilizzare le classi di modifica .thead-light o .thead-dark per far apparire <thead> chiaro o grigio scuro.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi
# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mario</td>
      <td>Verdi</td>
      <td>mario.verdi</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Francesco</td>
      <td>Bianchi</td>
      <td>francesco.bianchi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Alessandro</td>
      <td>Rossi</td>
      <td>alessandro.rossi</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mario</td>
      <td>Verdi</td>
      <td>mario.verdi</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Francesco</td>
      <td>Bianchi</td>
      <td>francesco.bianchi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Alessandro</td>
      <td>Rossi</td>
      <td>alessandro.rossi</td>
    </tr>
  </tbody>
</table>

Righe striate

Usa .table-striped per aggiungere delle striature zebrate ad ogni riga della tabella contenute in <tbody>.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mario</td>
      <td>Verdi</td>
      <td>mario.verdi</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Francesco</td>
      <td>Bianchi</td>
      <td>francesco.bianchi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Alessandro</td>
      <td>Rossi</td>
      <td>alessandro.rossi</td>
    </tr>
  </tbody>
</table>

Tabella con bordi

Aggiungi .table-bordered per avere i bordi a tutti i lati della tabella e su tutte le celle.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mario</td>
      <td>Verdi</td>
      <td>mario.verdi</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Francesco</td>
      <td>Bianchi</td>
      <td>francesco.bianchi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Alessandro</td>
      <td>Rossi</td>
      <td>alessandro.rossi</td>
    </tr>
  </tbody>
</table>

Tabella senza bordi

Aggiungi la classe .table-borderless per una tabella senza bordi.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mario</td>
      <td>Verdi</td>
      <td>mario.verdi</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Francesco</td>
      <td>Bianchi</td>
      <td>francesco.bianchi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Alessandro</td>
      <td>Rossi</td>
      <td>alessandro.rossi</td>
    </tr>
  </tbody>
</table>

Righe ed hover

Aggiungi .table-hover per abilitare lo stato hover sulle righe della tabella contenute in <tbody>.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mario</td>
      <td>Verdi</td>
      <td>mario.verdi</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Francesco</td>
      <td>Bianchi</td>
      <td>francesco.bianchi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Alessandro</td>
      <td>Rossi</td>
      <td>alessandro.rossi</td>
    </tr>
  </tbody>
</table>

Tabella compatta

Aggiungi .table-sm per rendere le tabelle più compatte dimezzando il cell padding.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mario</td>
      <td>Verdi</td>
      <td>mario.verdi</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Francesco</td>
      <td>Bianchi</td>
      <td>francesco.bianchi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Alessandro</td>
      <td>Rossi</td>
      <td>alessandro.rossi</td>
    </tr>
  </tbody>
</table>

Classi contestuali

Usa le classi contestuali per colorare le righe delle tabelle o le singole celle.

Class Heading Heading
Active Cell Cell
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell 
<!-- On rows -->
<tr class="table-active">
  ...
</tr>

<tr class="table-primary">
  ...
</tr>

<tr class="table-secondary">
  ...
</tr>

<tr class="table-success">
  ...
</tr>

<tr class="table-danger">
  ...
</tr>

<tr class="table-warning">
  ...
</tr>


<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  
  <td class="table-primary">...</td>
  
  <td class="table-secondary">...</td>
  
  <td class="table-success">...</td>
  
  <td class="table-danger">...</td>
  
  <td class="table-warning">...</td>
  
</tr>

Trasmettere significato alle tecnologie assistive

L’uso del colore per aggiungere un significato fornisce solo un’indicazione visiva, che non sarà trasmesso agli utenti di tecnologie assistive – come gli screen reader. Assicurati che le informazioni denotate dal colore siano rese disponibili anche dal contenuto stesso (es.: il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la classe .sr-only.

Captions

Un <caption> funziona come un’intestazione per una tabella. Aiuta gli utenti con screen reader a trovare una tabella e capire di cosa si tratta e decidere se vogliono leggerla.

Lista di utenti
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <caption>Lista di utenti</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Tabelle responsive

Le tabelle responsive consentono di scorrere le tabelle orizzontalmente con facilità. Rendi ogni tabella responsive su tutti i viewports racchiudendo un .table con .table-responsive. Oppure, scegli un breakpoint massimo con il quale ottenere una tabella responsive usando .table-responsive{-sm|-md|-lg|-xl}, rispettivamente con max-width di 576px, 768px, 992px, 1200px.

Nota che in quanto non tutti i browser supportano attualmente i range context queries, stiamo aggirando i limiti dei prefissi min- and max- e viewports con larghezze frazionarie (che possono verificarsi in determinate condizioni su dispositivi ad alta risoluzione, ad esempio) utilizzando valori con maggiore precisione per questi confronti.

Ritaglio / troncamento verticale

Le tabelle responsive fanno uso di overflow-y: hidden, che rimuove qualsiasi contenuto che va oltre i bordi inferiore o superiore della tabella. In particolare, questo può ritagliare i menu a discesa e altri widget di terze parti.

Sempre responsive

Attraverso ogni breakpoint, usa .table-responsive per tabelle con scorrimento verticale.

# Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cella Cella Cella Cella Cella Cella Cella Cella Cella
2 Cella Cella Cella Cella Cella Cella Cella Cella Cella
3 Cella Cella Cella Cella Cella Cella Cella Cella Cella 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint specifici

Usa .table-responsive{-sm|-md|-lg|-xl} come necessario per creare tabelle responsive fino a un punto di interruzione particolare. Da quel punto di interruzione in su, la tabella si comporterà normalmente e non scorrerà orizzontalmente.

# Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cella Cella Cella Cella Cella
2 Cella Cella Cella Cella Cella
3 Cella Cella Cella Cella Cella
# Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cella Cella Cella Cella Cella
2 Cella Cella Cella Cella Cella
3 Cella Cella Cella Cella Cella
# Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cella Cella Cella Cella Cella
2 Cella Cella Cella Cella Cella
3 Cella Cella Cella Cella Cella
# Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cella Cella Cella Cella Cella
2 Cella Cella Cella Cella Cella
3 Cella Cella Cella Cella Cella 


<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>


<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>


<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>


<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>