GUIDE PER ASPIRANTI PROGRAMMATORI
Come scrivere una tabella in Bootstrap
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…
Lezione 12 / 15
Vuoi avviare una nuova carriera o fare un upgrade?
Trova il corso Digital & Tech più adatto a te nel nostro catalogo!
- Bootstrap framework: le classi
- Bootstrap container: cosa sono e come funzionano
- Bootstrap grid system: come funziona la griglia di Bootstrap
- Classi di colonna e bootstrap breakpoints
- Boostrap Navbar: come funziona e come farne una
- Boostrap Panel: come fare un pannello in Bootstrap
- Come funzionano le Modali in bootstrap
- Come scrivere una tabella in Bootstrap
- Bootstrap Carousel: cos'è e come funziona
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/[email protected]/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/[email protected]/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.
Hai bisogno di informazioni? 🙋🏻♂️
Parliamone! Scrivici su Whatsapp e risponderemo a tutte le tue domande per capire quale dei nostri corsi è il più adatto alle tue esigenze.
CONTENUTI GRATUITI IN EVIDENZA
Guide per aspiranti programmatori 👨🏻🚀
Vuoi muovere i primi passi nel Digital e Tech? Abbiamo preparato alcune guide per aiutarti a orientarti negli ambiti più richiesti oggi.
