Gli ultimi tutorial di sviluppo web
 

W3.CSS tavolo

❮ Precedente Successivo Capitolo ❯

Visualizzazione di una tabella

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67
Bo Nilsson 50
Microfono Ross 35

Tabella di base

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
</table>
Prova tu stesso "

Tabella delimitata

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table w3-border">
Prova tu stesso "

Tabella a righe

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table w3-striped">
Prova tu stesso "

Delimitata da tavolo a righe

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table w3-bordered w3-striped">
Prova tu stesso "

Border intorno a un tavolo a righe

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table w3-bordered w3-striped w3-border">
Prova tu stesso "

Flipping Stripes

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Per capovolgere le strisce, basta aggiungere <thead> attorno l'intestazione della tabella:

Esempio

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Prova tu stesso "

Tavolo con un'intestazione colorata

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Prova tu stesso "

Tabella Colori

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table w3-blue">
Prova tu stesso "

Tabella Hoverable

La classe w3-hoverable aggiunge un colore di sfondo grigio al passaggio del mouse:

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
Prova tu stesso "

Se si desidera un colore hover specifica, aggiungere qualsiasi delle W3-hover-classi per ogni elemento <tr>:

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<tr class="w3-hover-green">
Prova tu stesso "

Tabella come una scheda

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table w3-bordered w3-striped w3-card-4">
Prova tu stesso "

Tabella responsive

Una tabella reattivo mostrerà una barra di scorrimento orizzontale se lo schermo è troppo piccola per visualizzare l'intero contenuto.

Prova a ridimensionare lo schermo per vedere l'effetto.

Nome Cognome Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti Punti
Jill fabbro 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
vigilia Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adamo Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Esempio

<div class="w3-responsive">

<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>

</div>
Prova tu stesso "

piccolo Tabella

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table w3-bordered w3-striped w3-tiny">
Prova tu stesso "

Tavolino

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table w3-bordered w3-striped w3-small">
Prova tu stesso "

Grande tavolo

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table w3-bordered w3-striped w3-large">
Prova tu stesso "

XLarge Tabella

Nome Cognome Punti
Jill fabbro 50
vigilia Jackson 94
Adamo Johnson 67

Esempio

<table class="w3-table w3-bordered w3-striped w3-xlarge">
Prova tu stesso "

XXLarge Tabella

Nome Punti
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Esempio

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
Prova tu stesso "

XXXLarge Tabella

Nome Punti
fabbro 50
Jackson 94
Johnson 67
Nilson 35

Esempio

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
Prova tu stesso "

Tabella Jumbo

Nome Punti
fabbro 50
Jackson 94
Johnson 67
Nilson 35

Esempio

<table class="w3-table w3-bordered w3-striped w3-jumbo">
Prova tu stesso "

❮ Precedente Successivo Capitolo ❯