{"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\/fr\/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à<\/th>\n    <th>Città<\/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> et <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> et <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> et 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> et 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>","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>","protected":false},"author":2,"featured_media":164213,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Tabelle HTML: Come Creare e Stilizzare Tabelle per il Web","_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":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"1246","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"tabelle HTML, tag table, tr HTML, td HTML, tabella web","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[{"_seopress_pro_rich_snippets_type":"custom","_seopress_pro_rich_snippets_custom":"