CONTATTACI

Guide per aspiranti programmatori

Lezione 12 / 15

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 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:

 

Differenza tra i diversi grigi nella tabella

I tre diversi toni di grigio sono ora evidenti.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 187 €/mese.

Esempio di finanziamento  

Importo finanziato: € 3990 in 24 rate da € 187 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 4572.88.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.