Lezione 3 - Le tabelle in Bootstrap

Un altro elemento che troviamo già stilato in Bootstrap è la tabella.

Bootstrap offre diverse tipologie di tabelle, andiamo a vederle in dettaglio:

La tabella base

La classe 'base' di Bootstrap per le tabelle è .table da aggiungere al suo ononimo elemento table:

<table class="table">

  <thead>
    <tr>
      <th>Nome</th>
      <th>Cognome</th>
      <th>Mansione</th>
    </tr>
  </thead>
    
  <tbody>
    <tr>
      <th>Jhon</th>
      <th>Doe</th>
      <th>Backend Developer</th>
    </tr>
     <tr>
      <th>Andrea</th>
      <th>Bianchi</th>
      <th>Frontend Developer</th>
    </tr>
    <tr>
      <th>Janie</th>
      <th>Doe</th>
      <th>Project Manager</th>
    </tr>
  </tbody>
    
</table>

Qui sotto possiamo vedere il risultato:

Come si può vedere attraverso la classe table Bootstrap ci restituisce una tabella già formattata e dall'estetica piacevole.

Tabella a Strisce

Una tabella alternativa che Bootstrap mette a disposizione è la tabella a strisce, basta aggiungere al tag table la classe .table-striped oltre alla classa .table per ottenere:

Tabella con bordi

Per ottenere una tabella con un border basta aggiungere al tag table oltre la classe .table la classe .table-bordered. Ecco il risultato:

Tabella Hover

Se vogliamo invece ottenere un effetto hover aggiungiamo al tag table oltre la classe .table la classe .table-hover

Tabella condensata

Per ridurre l'altezza delle righe e avere un effetto condensato aggiungiamo .table-condensed al tag table mantenendo comunque la classe .table.

Classi contestuali

Nell'ultima tabella che vi proponiamo utiliziamo delle classi contestuali, prestate attenzione a queste classi perchè le ritroveremo spesso anche nelle prossime lezioni.

Le classi in questione sono:

• .active
• .success
• .info
• .warning
• .danger

Ognuna di queste restituisce le righe di un colore diverso e sono da aggiungere ai tag tr, vediamo un esempio: