Tabelle in html (anche per Blogger tema Anartisis)

HTML5 continua a riconoscere il tag <table> come il miglior alleato per organizzare i dati in formato tabellare. Il W3C e il WHATWG ...

HTML5 continua a riconoscere il tag <table> come il miglior alleato per organizzare i dati in formato tabellare. Il W3C e il WHATWG sono d'accordo: le tabelle restano in pista quando si tratta di presentare informazioni strutturate.

Certo, potresti provare a replicare lo stesso effetto con i <div>, ma sarebbe un po' come cercare di mangiare la zuppa con una forchetta: tecnicamente possibile, ma decisamente scomodo!

Quello che invece è assolutamente da evitare è l'uso delle tabelle per costruire il layout di una pagina. Oggi i CSS offrono strumenti molto più eleganti e funzionali per impaginare i contenuti, migliorando accessibilità, flessibilità e semantica. Insomma, <table> non è affatto deprecato, basta usarlo nel contesto giusto: per i dati, non per impilare blocchi di contenuti!

Nota speciale per chi usa Blogger Anartisis:
Se nel tuo tema vuoi personalizzare lo stile delle tabelle, il codice:

.dark-mode .tab-p th {
  background-color: #444444;
}

fa proprio al caso tuo, nel senso che risolve il comportamento della tabella anche in dark-mode.

Questo dettaglio è specifico per Blogger Anartisis, mentre tutto il resto che vedremo è perfettamente utilizzabile su qualsiasi sito.

Naturalmente, potrebbero essere necessari piccoli aggiustamenti di stile a seconda del tema grafico del tuo sito.

Ora passiamo alla pratica con due esempi di tabelle! 🚀

Tabella con Intestazione in Alto

<style> /* Applica lo stile solo alle tabelle con classe "tab-p" */ .tab-p, .tab-p td, .tab-p th { border: 1px solid #cccccc; padding: 5px; } .tab-p th { background-color: #e7e7e7; font-weight: bold; } .dark-mode .tab-p th { background-color: #444444; } .tab-p { border-collapse: collapse; } </style> <table width="100%" class="tab-p"> <tbody> <tr> <th>Titolo 1</th> <th>Titolo 2</th> <th>Titolo 3</th> <th>Titolo 4</th> <th>Titolo 5</th> </tr> <tr> <td>riga 1 col. 1</td> <td>riga 1 col. 2</td> <td>riga 1 col. 3</td> <td>riga 1 col. 4</td> <td>riga 1 col. 5</td> </tr> <tr> <td>riga 2 col. 1</td> <td>riga 2 col. 2</td> <td>riga 2 col. 3</td> <td>riga 2 col. 4</td> <td>riga 2 col. 5</td> </tr> <tr> <td>riga 3 col. 1</td> <td>riga 3 col. 2</td> <td>riga 3 col. 3</td> <td>riga 3 col. 4</td> <td>riga 3 col. 5</td> </tr> <tr> <td>riga 4 col. 1</td> <td>riga 4 col. 2</td> <td>riga 4 col. 3</td> <td>riga 4 col. 4</td> <td>riga 4 col. 5</td> </tr> </tbody> </table>

Titolo 1	Titolo 2	Titolo 3	Titolo 4	Titolo 5
riga 1 col. 1	riga 1 col. 2	riga 1 col. 3	riga 1 col. 4	riga 1 col. 5
riga 2 col. 1	riga 2 col. 2	riga 2 col. 3	riga 2 col. 4	riga 2 col. 5
riga 3 col. 1	riga 3 col. 2	riga 3 col. 3	riga 3 col. 4	riga 3 col. 5
riga 4 col. 1	riga 4 col. 2	riga 4 col. 3	riga 4 col. 4	riga 4 col. 5

Tabella con intestazione a Sinistra

<style> /* Applica lo stile solo alle tabelle con classe "tab-p" */ .tab-p, .tab-p td, .tab-p th { border: 1px solid #cccccc; padding: 5px; } .tab-p th { background-color: #e7e7e7; font-weight: bold; } .dark-mode .tab-p th { background-color: #444444; } .tab-p { border-collapse: collapse; } </style> <table width="100%" class="tab-p"> <tbody> <tr> <th>Testo di esempio</th> <td>Testo di esempio</td> <td>Testo di esempio</td> <td>Testo di esempio</td> <td>Testo di esempio</td> </tr> <tr> <th>Testo di esempio</th> <td>Testo di esempio</td> <td>Testo di esempio</td> <td>Testo di esempio</td> <td>Testo di esempio</td> </tr> <tr> <th>Testo di esempio</th> <td>Testo di esempio</td> <td>Testo di esempio</td> <td>Testo di esempio</td> <td>Testo di esempio</td> </tr> <tr> <th>Testo di esempio</th> <td>Testo di esempio</td> <td>Testo di esempio</td> <td>Testo di esempio</td> <td>Testo di esempio</td> </tr> <tr> <th>Testo di esempio</th> <td>Testo di esempio</td> <td>Testo di esempio</td> <td>Testo di esempio</td> <td>Testo di esempio</td> </tr> </tbody> </table>

Testo di esempio	Testo di esempio	Testo di esempio	Testo di esempio	Testo di esempio
Testo di esempio	Testo di esempio	Testo di esempio	Testo di esempio	Testo di esempio
Testo di esempio	Testo di esempio	Testo di esempio	Testo di esempio	Testo di esempio
Testo di esempio	Testo di esempio	Testo di esempio	Testo di esempio	Testo di esempio
Testo di esempio	Testo di esempio	Testo di esempio	Testo di esempio	Testo di esempio