Bootstrap Tabelle

Documentazione ed esempi su come disegnare le tabelle in Bootstrap

Esempi

La forma di tabella più semplice è data dalla classe .table. In Bootstrap 4 tutte le tabelle sono ereditate, quindi tutte le tabelle annidate avranno lo stesso stile della tabella genitore.

# Nome Cognome User
1 Luca Grilli @lgri
2 Giorgio Rossi @gioros
3 Giovanna Parigini @giopar

Codice:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">User</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Luca</td>
      <td>Grilli</td>
      <td>@lgri</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Giorgio</td>
      <td>Rossi</td>
      <td>@gioros</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Giovanna</td>
      <td>Parigini</td>
      <td>@giopar</td>
    </tr>
  </tbody>
</table>

Per invertire i colori (testo chiaro e sfondo scuro) utilizzare .table-dark

# Nome Cognome User
1 Luca Grilli @lgri
2 Giorgio Rossi @gioros
3 Giovanna Parigini @giopar

Codice:

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">User</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Luca</td>
      <td>Grilli</td>
      <td>@lgri</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Giorgio</td>
      <td>Rossi</td>
      <td>@gioros</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Giovanna</td>
      <td>Parigini</td>
      <td>@giopar</td>
    </tr>
  </tbody>
</table>

Opzioni per l'intestazione della tabella

In modo simile alle tabelle chiare e scure, utilizzare la classe modificatrice .thead-light o -thead-dark per far apparire il thead chiaro o grigio scuro.

# Nome Cognome User
1 Luca Grilli @lgri
2 Giorgio Rossi @gioros
3 Giovanna Parigini @giopar
# Nome Cognome User
1 Luca Grilli @lgri
2 Giorgio Rossi @gioros
3 Giovanna Parigini @giopar

Codice:

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">User</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Luca</td>
      <td>Grilli</td>
      <td>@lgri</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Giorgio</td>
      <td>Rossi</td>
      <td>@gioros</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Giovanna</td>
      <td>Parigini</td>
      <td>@giopar</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">User</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Luca</td>
      <td>Grilli</td>
      <td>@lgri</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Giorgio</td>
      <td>Rossi</td>
      <td>@gioros</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Giovanna</td>
      <td>Parigini</td>
      <td>@giopar</td>
    </tr>
  </tbody>
</table>