Le Tabelle in Bootstrap sono componenti che permettono di visualizzare dati tabulari in una struttura ordinata e facilmente leggibile. Supportano l’ordinamento, la filtratura, la paginazione e altre funzionalità avanzate. Le tabelle possono essere create con i tag HTML standard e possono essere personalizzate con le classi di Bootstrap per cambiare l’aspetto e il comportamento. Ad esempio, la classe “table-striped” può essere impiegata per applicare uno sfondo alternato alle righe della tabella, mentre la classe “table-hover” può essere usata per evidenziare la riga su cui si posiziona il mouse. Ci sono molte altre classi disponibili in Bootstrap che possono essere impiegate per personalizzare le tabelle.
L’uso delle classi “table” appena elencate è veramente immediato. Usandole entrambe, ecco come appare una tabella nella quale lo sfondo delle righe alterna due toni di grigio (striped) e, quando si passa con la punta del mouse, (hover), lo sfondo si scurisce ancora di più.
Il codice è semplicissimo: vediamolo con una tabella (ad esempio) di tre Regioni italiane, con superficie e abitanti.
<div class="container">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Nome</th>
<th>Superficie (km2)</th>
<th>Numero di Abitanti</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lombardia</td>
<td>23,861</td>
<td>10,015,000</td>
</tr>
<tr>
<td>Veneto</td>
<td>18,391</td>
<td>4,924,000</td>
</tr>
</tbody>
</table>
</div>
Questa sezione andrà inserita all’interno del tag <body>. Il codice complessivo si mostrerà così:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GUIDA AULAB A BOOTSTRAP</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container-fluid">Primi passi con Bootstrap CDN</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Nome</th>
<th>Superficie (km²)</th>
<th>Numero di Abitanti</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lombardia</td>
<td>23,861</td>
<td>10,015,000</td>
</tr>
<tr>
<td>Veneto</td>
<td>18,391</td>
<td>4,924,000</td>
</tr>
<tr>
<td>Emilia-Romagna</td>
<td>22,446</td>
<td>4,456,000</td>
</tr>
</tbody>
</table>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
Ora non resta che mandarla in esecuzione. Se hai ancora aperta una finestra del browser nel quale viene eseguito un esempio precedente, ricordati di chiuderla. Quindi Vai in RUN >> START DEBUGGING, ed ecco quello che viene visualizzato:
Il mouse, anche se non si vede, è qui posizionato su Emilia-Romagna. Nell’immagine grande i tre diversi toni di grigio possono non essere troppo visibili. Può essere comoda un’immagine di dettaglio:
I tre diversi toni di grigio sono ora evidenti.
