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>