Le tabelle sono molto utili per mostrare collezioni di dati (di solito recuperate tramite uno script che gira sul backend), ma possono essere tediose da stilizzare ed "abbellire". Per fortuna w3.css ci offre svariate classi per produrre tabelle accattivanti e dall'aspetto professionale, senza l'occorrenza di scrivere grandi quantità di codice.
Basic
Per produrre una "tabella w3c", occorre semplicemente aggiungere al tag <table> la classe w3-table, che funge da contenitore per le tabelle. La tabella verrà quindi stilizzata in accordo alle regole del framework:
<table class="w3-table">
<thead>
<tr class="w3-light-grey w3-hover-red">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tr class="w3-hover-green">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="w3-hover-blue">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="w3-hover-black">
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr class="w3-hover-text-green">
<td>Bo</td>
<td>Nilson</td>
<td>35</td>
</tr>
</table>Le caratteristiche di base comprendono l'assenza di bordi, un padding ed un margine standard, ed un testo allineato sulla sinistra.
Tabelle a strisce
Per produrre un effetto (molto utilizzato) in cui la tabella presenta righe a colori alternati a due a due, basta aggiungere al nostro precedente tag <table> la classe w3-striped:
<table class="w3-table w3-striped">
<thead>
<tr class="w3-light-grey w3-hover-red">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tr class="w3-hover-green">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="w3-hover-blue">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="w3-hover-black">
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr class="w3-hover-text-green">
<td>Bo</td>
<td>Nilson</td>
<td>35</td>
</tr>
</table>Di default, i colori delle "strisce" sono bianco e grigio pallido.
Bordi
Se vogliamo aggiungere i bordi alle righe delle nostre tabelle, occorre aggiungere al tag <table> la classe w3-bordered:
<table class="w3-table w3-bordered">
<thead>
<tr class="w3-light-grey w3-hover-red">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tr class="w3-hover-green">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="w3-hover-blue">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="w3-hover-black">
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr class="w3-hover-text-green">
<td>Bo</td>
<td>Nilson</td>
<td>35</td>
</tr>
</table>Il bordo verrà applicato al lato inferiore delle righe. Per aggiungere un bordo esterno applicato alla tabella, dovremo utilizzare la classe w3-border sul tag table.
All in one
Per aggiungere tutte le caratteristiche elencate (strisce, bordi alle righe, bordo esterno alla tabella) possiamo sia utilizzare tutte e 3 le classi contemporaneamente oppure aggiungere semplicemente lo shortcut w3-table-all:
<table class="w3-table w3-table-all">
<thead>
<tr class="w3-light-grey w3-hover-red">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tr class="w3-hover-green">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="w3-hover-blue">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="w3-hover-black">
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr class="w3-hover-text-green">
<td>Bo</td>
<td>Nilson</td>
<td>35</td>
</tr>
</table>Hovering
Anche in relazione alle tabelle non può mancare l'effetto di hovering, che è impostabile semplicemente aggiungendo la classe w3-hoverable al tag <table>.
<table class="w3-table w3-hoverable">
<thead>
<tr class="w3-light-grey w3-hover-red">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tr class="w3-hover-green">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="w3-hover-blue">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="w3-hover-black">
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr class="w3-hover-text-green">
<td>Bo</td>
<td>Nilson</td>
<td>35</td>
</tr>
</table>In questo modo l'effetto funzionerà utilizzando il colore standard grigio pallido, applicato a tutte le righe della tabella. Se invece vogliamo utilizzare un colore personalizzato, oppure vogliamo impostare un colore di hovering per ogni riga della tabella, possiamo utilizzare la classe che abbiamo studiato nella lezione dedicata ai colori chiamata w3-hover-[color-name], applicandola singolarmente ad ogni riga, oppure la classe w3-hover-text-[color-name] che modifica il colore del testo al posto di quello dello sfondo:
<table class="w3-table-all">
<thead>
<tr class="w3-light-grey w3-hover-red">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tr class="w3-hover-green">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="w3-hover-blue">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="w3-hover-black">
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr class="w3-hover-text-green">
<td>Bo</td>
<td>Nilson</td>
<td>35</td>
</tr>
</table>Combinando tutte le classi studiate in precedenza con quelle dedicate alle tabelle, è possibile produrre effetti interessanti utilizzando un codice HTML minimale.
Responsiveness
Per rendere gli elementi <table> responsive (che si adattano, cioè, alle dimensioni del dispositivo che la sta utilizzando) è sufficiente includere la tabella in un elemento contenitore sul quale verrà applicata la classe w3-responsive. In questo modo, se le dimensioni della finestra saranno minori di quelle della tabella stessa, verrà mostrata un'apposita scrollbar orizzontale:
<div class="w3-responsive">
<table class="w3-table-all">
<thead>
<tr class="w3-light-grey w3-hover-red">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tr class="w3-hover-green">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="w3-hover-blue">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="w3-hover-black">
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr class="w3-hover-text-green">
<td>Bo</td>
<td>Nilson</td>
<td>35</td>
</tr>
</table>
</div>