W3.Tabelle CSS
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
| Bo | Nilsson | 50 |
| Mike | Ross | 35 |
Classi di tabelle W3.CSS
W3.CSS fornisce le seguenti classi per le tabelle:
| Classe | Definisce |
|---|---|
| w3-tabella | Contenitore per una tabella HTML |
| a righe w3 | Tavolo a righe |
| bordo w3 | Tavolo bordato |
| con bordo w3 | Linee bordate |
| centrato su w3 | Contenuto della tabella centrato |
| w3-libero | Tavolo mobile |
| w3-tavolo-tutto | Tutte le proprietà impostate |
Tavola di base
La classe w3-table viene utilizzata per visualizzare una tabella di base:
| Nome di battesimo | 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>
Tavolo a righe
La classe w3-striped viene utilizzata per aggiungere strisce zebrate a una tabella:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table w3-striped">
Tavolo bordato
La classe w3-bordered aggiunge un bordo inferiore a ciascuna riga della tabella:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table w3-bordered">
Tavolo bordato a righe
Combina la classe con bordi w3 e la classe con bordi w3 per creare una tabella con bordi a strisce:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table w3-striped w3-bordered">
Bordo intorno a un tavolo
La classe w3-border viene utilizzata per visualizzare un bordo attorno a una tabella:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table w3-striped w3-border">
Suggerimento: la classe w3-border non è solo per le tabelle. Può essere utilizzato su qualsiasi elemento HTML!
Mostrando tutto
La classe w3-table-all combina tutte le classi precedenti:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all">
Capovolgere le strisce
Per capovolgere le strisce (inizia con il colore grigio chiaro), aggiungi un elemento <thead> attorno alla riga di intestazione della tabella. È inoltre necessario definire un colore da utilizzare per la riga di intestazione della tabella:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
| Bo | Nilson | 35 |
Esempio
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Centrare tutti i contenuti
La classe centrata su w3 centra il contenuto della tabella:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all w3-centered">
Centratura di una colonna
La classe w3-center centra il contenuto di una colonna:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Allinea a destra una colonna
La classe w3-right-align allinea a destra il contenuto di una colonna:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Tavolo mobile
La classe w3-hoverable aggiunge un colore di sfondo grigio al passaggio del mouse:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all
w3-hoverable">
Colori al passaggio del mouse
Se vuoi un colore al passaggio del mouse specifico, aggiungi una qualsiasi delle classi w3-hover- color a ciascun elemento <tr>:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<tr class="w3-hover-green">
Combinazione di classi W3.CSS
Molte classi W3.CSS possono essere utilizzate su tutti gli elementi HTML.
Ad esempio: classi di bordo, classi di colore, classi di caratteri, classi di carte e altro.
Intestazione tabella colorata
Utilizzare una qualsiasi delle classi di colore w3 per visualizzare una riga colorata:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
Tavola colorata
Utilizzare una qualsiasi delle classi di colori w3 per visualizzare una tabella colorata:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table w3-blue">
Tabella reattiva
La classe w3-reattiva crea una tabella reattiva. La tabella scorrerà quindi orizzontalmente su piccoli schermi. Durante la visualizzazione su schermi di grandi dimensioni, non c'è differenza.
Ridimensiona lo schermo per vedere l'effetto sulla tabella seguente:
| Nome di battesimo | Cognome | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | fabbro | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| vigilia | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adamo | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Esempio
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Tavolo come una carta
Usa una classe di carte w3 per visualizzare un tavolo come una carta:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all w3-card-4">
Tavolino minuscolo
Usa la classe w3-tiny per visualizzare una piccola tabella:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all w3-tiny">
Tavolino
Usa la classe w3-small per visualizzare una piccola tabella:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all w3-small">
Tavolo grande
Utilizzare la classe w3-large per visualizzare una tabella di grandi dimensioni:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all w3-large">
Tavolo grande
Utilizzare la classe w3-xlarge per visualizzare una tabella xlarge:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all w3-xlarge">
Tavolo grande XXL
Utilizzare la classe w3-xxlarge per visualizzare una tabella xxlarge:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all w3-xxlarge">
XXTabella grande
Utilizzare la classe w3-xxxlarge per visualizzare una tabella xxxlarge:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
Esempio
<table class="w3-table-all w3-xxxlarge">
Tavolo Jumbo
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">