Bootstrap - Tabelle

Bootstrap fornisce un layout pulito per la creazione di tabelle. Alcuni degli elementi della tabella supportati da Bootstrap sono:

Sr.No. Tag e descrizione
1

<table>

Elemento di wrapping per la visualizzazione dei dati in formato tabulare

2

<thead>

Elemento contenitore per le righe di intestazione della tabella (<tr>) per etichettare le colonne della tabella.

3

<tbody>

Elemento contenitore per le righe della tabella (<tr>) nel corpo della tabella.

4

<tr>

Elemento contenitore per un insieme di celle di tabella (<td> o <th>) che appare su una singola riga.

5

<td>

Cella di tabella predefinita.

6

<th>

Cella di tabella speciale per etichette di colonna (o riga, a seconda dell'ambito e del posizionamento). Deve essere utilizzato all'interno di un <thead>

7

<caption>

Descrizione o riepilogo di ciò che contiene la tabella.

Tabella di base

Se desideri uno stile di tabella piacevole e di base con solo un po 'di imbottitura leggera e divisori orizzontali, aggiungi la classe base di .table a qualsiasi tabella come mostrato nell'esempio seguente:

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

Classi tabella opzionali

Insieme al markup della tabella di base e alla classe .table, ci sono alcune classi aggiuntive che puoi usare per definire lo stile del markup. Le sezioni seguenti ti daranno un'idea di tutte queste classi.

Tavolo a strisce

Aggiungendo la classe .table-striped , otterrai strisce sulle righe all'interno di <tbody> come mostrato nell'esempio seguente:

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Tavolo bordato

Aggiungendo la classe .table-bordered , otterrai bordi che circondano ogni elemento e angoli arrotondati attorno all'intera tabella come mostrato nell'esempio seguente:

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
	
</table>

Hover Table

Aggiungendo la classe .table-hover , uno sfondo grigio chiaro verrà aggiunto alle righe mentre il cursore passa sopra di esse, come mostrato nell'esempio seguente:

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Tabella condensata

Aggiungendo la classe .table-condensed , il riempimento delle righe viene tagliato a metà per condensare la tabella. come si vede nell'esempio seguente. Ciò è utile se desideri informazioni più dense.

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

Classi contestuali

Le classi contestuali mostrate nella tabella seguente ti permetteranno di cambiare il colore di sfondo delle righe della tabella o delle singole celle.

Sr.No. Classe e descrizione
1

.active

Applica il colore al passaggio del mouse a una determinata riga o cella

2

.success

Indica un'azione riuscita o positiva

3

.warning

Indica un avviso che potrebbe richiedere attenzione

4

.danger

Indica un'azione pericolosa o potenzialmente negativa

Queste classi possono essere applicate a <tr>, <td> o <th>.

<table class = "table">
   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

Tabelle reattive

Avvolgendo qualsiasi .table in una classe .table-responsive , farai scorrere la tabella orizzontalmente fino a piccoli dispositivi (sotto i 768px). Quando visualizzi qualcosa di più grande di 768px di larghezza, non vedrai alcuna differenza in queste tabelle.

<div class = "table-responsive">
   <table class = "table">
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
   </table>
</div>