Come scrivere una tabella in Bootstrap

Lezione 12 / 15

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.

11 Come funzionano le M..

13 Bootstrap Carousel: ..

Guida Bootstrap in italiano 1 Bootstrap cos'è 2 Editor di codice: VSC 3 Come usare Bootstrap 4 Vantaggi e peculiarità di Bootstrap 5 Bootstrap framework: le classi 6 Bootstrap container: cosa sono e come funzionano 7 Bootstrap grid system: come funziona la griglia di Bootstrap 8 Classi di colonna e bootstrap breakpoints 9 Boostrap Navbar: come funziona e come farne una 10 Boostrap Panel: come fare un pannello in Bootstrap 11 Come funzionano le Modali in bootstrap 12 Come scrivere una tabella in Bootstrap 13 Bootstrap Carousel: cos'è e come funziona 14 Personalizzare Bootstrap 15 Crea un sito web con bootstrap framework!

Le nostre guide possono essere molto utili per muovere i primi passi nel mondo della programmazione, ma se vuoi iniziare una nuova carriera in ambito digital & tech con il supporto costante dei docenti e tantissime esercitazioni pratiche, ti consigliamo di frequentare uno dei corsi della nostra Hackademy!

Scopri i corsi