{"id":164033,"date":"2024-09-01T09:00:00","date_gmt":"2024-09-01T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/tabelle-html-creare-stilizzare\/"},"modified":"2024-09-01T09:00:00","modified_gmt":"2024-09-01T07:00:00","slug":"tabelle-html-creare-stilizzare","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/tabelle-html-creare-stilizzare\/","title":{"rendered":"Tabelle HTML: Come Creare e Stilizzare Tabelle per il Web"},"content":{"rendered":"

Le tabelle HTML<\/strong> sono uno strumento essenziale per presentare dati tabulari<\/strong> in modo organizzato e leggibile. Dalle tabelle di confronto prodotti alle classifiche, dai listini prezzi ai calendari, le tabelle permettono di visualizzare informazioni strutturate in righe e colonne. In questo articolo vedremo come creare tabelle semanticamente corrette, accessibili e responsive.<\/p>\n

Struttura Base di una Tabella HTML<\/h2>\n

Una tabella HTML si costruisce con una serie di tag annidati che definiscono la struttura a righe e colonne. L’elemento contenitore \u00e8 <table><\/code>, che racchiude l’intera tabella. All’interno, le righe<\/strong> sono definite dal tag <tr><\/code> (table row), e le celle<\/strong> possono essere di due tipi: <td><\/code> (table data) per le celle di dati e <th><\/code> (table header) per le celle di intestazione.<\/p>\n

Ecco la struttura base di una tabella semplice:<\/p>\n

<table>\n  <tr>\n    <th>Nome<\/th>\n    <th>Et\u00e0<\/th>\n    <th>Citt\u00e0<\/th>\n  <\/tr>\n  <tr>\n    <td>Mario Rossi<\/td>\n    <td>35<\/td>\n    <td>Roma<\/td>\n  <\/tr>\n  <tr>\n    <td>Anna Bianchi<\/td>\n    <td>28<\/td>\n    <td>Milano<\/td>\n  <\/tr>\n<\/table><\/code><\/pre>\n
Il tag <th><\/code> non solo visualizza il testo in grassetto e centrato per impostazione predefinita, ma ha anche un significato semantico<\/strong>: indica che la cella \u00e8 un’intestazione, fornendo contesto alle celle di dati associate. Questa distinzione \u00e8 fondamentale per l’accessibilit\u00e0, come vedremo pi\u00f9 avanti.<\/p>\n
Sezioni della Tabella: thead, tbody e tfoot<\/h2>\n
Per tabelle ben strutturate, HTML offre tre tag che permettono di suddividere la tabella in sezioni logiche<\/strong>: <thead><\/code>, <tbody><\/code> e <tfoot><\/code>.<\/p>\n
Il tag <thead><\/code> (table head) racchiude le righe di intestazione<\/strong> della tabella, tipicamente contenenti le celle <th><\/code> con i nomi delle colonne. Il tag <tbody><\/code> (table body) contiene le righe con i dati<\/strong> effettivi. Il tag <tfoot><\/code> (table footer) \u00e8 dedicato alle righe di pi\u00e8 di pagina<\/strong>, come totali, medie o note riassuntive.<\/p>\n
Questa suddivisione non \u00e8 solo semantica ma ha anche vantaggi pratici. I browser possono utilizzare queste sezioni per implementare lo scorrimento del corpo della tabella mantenendo intestazione e pi\u00e8 di pagina fissi. Inoltre, quando una tabella viene stampata su pi\u00f9 pagine, <thead><\/code> e <tfoot><\/code> vengono ripetuti su ogni pagina, migliorando la leggibilit\u00e0 del documento stampato.<\/p>\n
Nel codice HTML, l’ordine consigliato \u00e8 <thead><\/code>, <tbody><\/code>, <tfoot><\/code>, anche se il browser renderizzer\u00e0 correttamente il footer in fondo indipendentemente dalla posizione nel markup.<\/p>\n
Caption, Colspan e Rowspan<\/h2>\n
Il tag <caption><\/code> aggiunge un titolo descrittivo<\/strong> alla tabella. Deve essere il primo elemento figlio del tag <table><\/code> e fornisce contesto sia visivo che semantico. Gli screen reader annunciano il caption prima di leggere il contenuto della tabella, aiutando l’utente a comprendere il tipo di dati presentati.<\/p>\n
Gli attributi colspan<\/code> e rowspan<\/code> permettono a una cella di estendersi<\/strong> rispettivamente su pi\u00f9 colonne o pi\u00f9 righe. Ad esempio, <td colspan=\"3\"><\/code> crea una cella che occupa lo spazio di tre colonne, utile per intestazioni che raggruppano pi\u00f9 colonne di dati. <td rowspan=\"2\"><\/code> crea una cella che si estende su due righe, utilizzata spesso quando un valore \u00e8 condiviso tra pi\u00f9 righe adiacenti.<\/p>\n
L’uso di colspan e rowspan richiede attenzione nel conteggio delle celle per ogni riga. Se una cella si estende su 3 colonne, le altre righe nella stessa posizione devono avere 3 celle separate per mantenere l’allineamento. Errori nel conteggio possono causare tabelle distorte e difficili da correggere.<\/p>\n
Stilizzare le Tabelle con CSS<\/h2>\n
Le tabelle HTML senza stilizzazione CSS appaiono piuttosto austere. Fortunatamente, il CSS offre numerose propriet\u00e0 per rendere le tabelle visivamente accattivanti<\/strong> e facili da leggere.<\/p>\n
La propriet\u00e0 border-collapse<\/code> \u00e8 fondamentale: con il valore collapse<\/code> i bordi delle celle adiacenti vengono fusi in un unico bordo, creando un aspetto pulito e professionale. Senza questa propriet\u00e0, ogni cella ha i propri bordi separati con uno spazio visibile tra di essi.<\/p>\n
Per migliorare la leggibilit\u00e0, \u00e8 comune applicare colori di sfondo alternati<\/strong> alle righe (zebrastriping) usando il selettore tr:nth-child(even)<\/code> o tr:nth-child(odd)<\/code>. L’effetto hover sulle righe (tr:hover<\/code>) aiuta l’utente a seguire visivamente i dati attraverso le colonne. Il padding nelle celle td<\/code> e th<\/code> crea lo spazio necessario tra il contenuto e i bordi della cella.<\/p>\n
Per l’intestazione, \u00e8 buona pratica differenziarla con un colore di sfondo pi\u00f9 scuro e testo bianco o chiaro. Questo crea una separazione visiva chiara tra le etichette e i dati.<\/p>\n
Tabelle Responsive<\/h2>\n
Le tabelle rappresentano una sfida particolare per il design responsive<\/strong>. Una tabella con molte colonne pu\u00f2 diventare illeggibile su schermi piccoli come quelli degli smartphone. Esistono diverse strategie per gestire questo problema.<\/p>\n
L’approccio pi\u00f9 semplice \u00e8 avvolgere la tabella in un contenitore scrollabile<\/strong>: <div style=\"overflow-x: auto;\"><table>...<\/table><\/div><\/code>. Questo permette all’utente di scorrere orizzontalmente la tabella senza che il layout della pagina si rompa.<\/p>\n
Un approccio pi\u00f9 sofisticato prevede la trasformazione della tabella<\/strong> su schermi piccoli tramite media query CSS. Ogni riga pu\u00f2 essere convertita in un “card” indipendente, con le etichette delle colonne mostrate inline accanto ai dati tramite il pseudo-elemento ::before<\/code> e l’attributo data-label<\/code>.<\/p>\n
Un’altra opzione \u00e8 nascondere le colonne<\/strong> meno importanti su mobile, mantenendo solo le informazioni essenziali e offrendo un link per visualizzare la tabella completa. La scelta della strategia dipende dal tipo di dati e dalle esigenze specifiche del progetto.<\/p>\n
Accessibilit\u00e0 delle Tabelle e Quando Non Usarle<\/h2>\n
Per rendere le tabelle accessibili, \u00e8 essenziale utilizzare correttamente l’attributo scope<\/code> nelle celle <th><\/code>. Il valore scope=\"col\"<\/code> indica che l’intestazione si riferisce a un’intera colonna, mentre scope=\"row\"<\/code> indica che si riferisce a un’intera riga. Per tabelle complesse con intestazioni multiple, l’attributo headers<\/code> nelle celle <td><\/code> permette di specificare esplicitamente quali intestazioni <th><\/code> si applicano a ogni cella, usando gli id delle intestazioni.<\/p>\n
Un punto cruciale: le tabelle HTML devono essere usate esclusivamente per dati tabulari<\/strong>. Negli anni ’90 e primi 2000, le tabelle venivano ampiamente utilizzate per il layout delle pagine web, una pratica oggi fortemente sconsigliata. Il layout deve essere gestito con CSS (Flexbox e Grid). Usare tabelle per il layout crea problemi di accessibilit\u00e0, rende il codice pi\u00f9 complesso e ostacola il design responsive.<\/p>\n
Per scegliere quando usare una tabella, chiediti: “Questi dati hanno una relazione riga-colonna significativa?” Se la risposta \u00e8 s\u00ec, la tabella \u00e8 appropriata. Se stai solo cercando di allineare elementi nella pagina, usa CSS Grid o Flexbox.<\/p>\n
Per una panoramica completa degli elementi HTML e di come strutturare correttamente le pagine web, ti consigliamo di leggere il nostro articolo sui tag HTML essenziali<\/a>.<\/p>\n
Hai bisogno di aiuto con la creazione di tabelle<\/strong> per il tuo sito web? G Tech Group<\/strong> offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a support@gtechgroup.it<\/strong> o via WhatsApp al 0465 84 62 45<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Le tabelle HTML sono uno strumento essenziale per presentare dati tabulari in modo organizzato e leggibile. Dalle tabelle di confronto prodotti alle classifiche, dai listini…<\/p>\n","protected":false},"author":2,"featured_media":164213,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"1246","_seopress_titles_title":"Tabelle HTML: Come Creare e Stilizzare Tabelle %%sep%% %%sitename%%","_seopress_titles_desc":"Guida completa alle tabelle HTML: tag table, thead, tbody, tr, td, th. Scopri come creare tabelle accessibili e responsive per il web.","_seopress_robots_index":"","footnotes":""},"categories":[1246],"tags":[787,1108],"class_list":["post-164033","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-sviluppo-web","tag-web-design"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=164033"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164033\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/164213"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=164033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=164033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=164033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}