Dove Inserire il CSS Personalizzato<\/h2>\n
TablePress mette a disposizione un’area dedicata per il CSS personalizzato all’interno delle opzioni del plugin. Per accedervi, naviga su TablePress → Opzioni del Plugin<\/strong> e scorri fino alla sezione “CSS personalizzato”. Qui troverai un’area di testo dove puoi inserire le tue regole CSS. Queste regole verranno caricate su tutte le pagine del sito che contengono tabelle TablePress.<\/p>\n In alternativa, puoi inserire il CSS personalizzato nel Personalizza<\/strong> di WordPress (Aspetto → Personalizza → CSS aggiuntivo) o nel file Un terzo approccio, utile per personalizzazioni specifiche di una singola pagina, è aggiungere un blocco HTML personalizzato contenente un tag Per personalizzare efficacemente le tabelle, devi conoscere i selettori CSS utilizzati da TablePress. Ogni tabella ha un ID univoco<\/strong> nel formato Ecco i selettori principali che devi conoscere:<\/p>\n Puoi anche selezionare colonne specifiche utilizzando il selettore La personalizzazione dei colori è probabilmente la modifica più richiesta. Per cambiare il colore di sfondo dell’intestazione<\/strong>, utilizza questa regola:<\/p>\n Per modificare i colori delle righe alternate<\/strong>, che migliorano la leggibilità delle tabelle lunghe, utilizza:<\/p>\n Per personalizzare l’effetto hover<\/strong> sulle righe, puoi cambiare sia il colore di sfondo che il colore del testo:<\/p>\n Ricorda di utilizzare il suffisso La tipografia è un elemento cruciale per l’aspetto professionale delle tabelle. Puoi modificare il font, la dimensione, il peso e lo stile del testo nelle celle. Per impostare un font personalizzato per tutta la tabella:<\/p>\n Per le intestazioni, potresti voler utilizzare un font diverso e più impattante:<\/p>\n Puoi anche allineare il testo in modo diverso per colonne specifiche. Ad esempio, allineare a destra una colonna di prezzi:<\/p>\n Il padding delle celle e i bordi influenzano enormemente la leggibilità delle tabelle. Un padding troppo stretto rende i dati difficili da leggere, mentre uno troppo ampio spreca spazio prezioso. Ecco una configurazione bilanciata:<\/p>\n Per un aspetto più moderno e pulito, puoi rimuovere i bordi verticali e mantenere solo quelli orizzontali:<\/p>\n Puoi anche aggiungere un bordo arrotondato alla tabella per un aspetto più morbido:<\/p>\n Una delle grandi forze di TablePress è la possibilità di applicare stili diversi a tabelle diverse. Utilizzando l’ID della tabella come selettore, puoi creare design completamente unici per ogni tabella del sito.<\/p>\n Ad esempio, se la tabella con ID 3 è una tabella di prezzi e vuoi darle un aspetto premium con sfondo scuro:<\/p>\n Questo approccio ti permette di avere una tabella di dati con sfondo chiaro e una tabella di prezzi con sfondo scuro nella stessa pagina, ciascuna con il proprio stile distintivo.<\/p>\n TablePress ti permette di aggiungere classi CSS personalizzate<\/strong> a singole righe attraverso le opzioni della tabella. Questo è utile per evidenziare righe specifiche, come la riga del piano “più popolare” in una tabella di prezzi o una riga di totali in una tabella di dati finanziari.<\/p>\n All’interno delle celle, puoi anche utilizzare tag HTML con classi personalizzate. Ad esempio, per creare un badge colorato all’interno di una cella:<\/p>\n E poi definire lo stile del badge nel CSS personalizzato:<\/p>\n Sebbene TablePress non offra una funzionalità nativa di formattazione condizionale come Excel, puoi ottenere risultati simili combinando classi HTML nelle celle con regole CSS. Ad esempio, puoi colorare i valori positivi in verde e quelli negativi in rosso:<\/p>\n Nelle celle della tabella, avvolgi i valori con i tag appropriati: Per aggiungere un tocco di modernità alle tabelle, puoi utilizzare transizioni e animazioni CSS. Un effetto hover fluido sulle righe è facile da implementare:<\/p>\n Puoi anche aggiungere un’animazione di ingresso per le tabelle, facendole apparire gradualmente quando la pagina viene caricata:<\/p>\n Usa le animazioni con parsimonia: un effetto sottile migliora l’esperienza utente, ma eccedere può rendere la pagina distraente e poco professionale.<\/p>\n Se non vuoi partire da zero, puoi ispirarvi a temi CSS predefiniti per le tabelle. Ecco un tema “Corporate” completo che puoi copiare e adattare:<\/p>\n Questo tema utilizza un gradiente nell’intestazione, bordi arrotondati e colori professionali. Puoi modificare i codici colore per adattarlo alla palette del tuo brand.<\/p>\n Uno dei problemi più comuni nella personalizzazione delle tabelle TablePress è il conflitto con gli stili del tema<\/strong>. Molti temi WordPress applicano stili globali alle tabelle HTML che possono sovrascrivere le personalizzazioni di TablePress. Per risolvere questo problema, utilizza selettori CSS più specifici e, se necessario, la direttiva Un trucco efficace è aumentare la specificità del selettore ripetendo la classe: Utilizza gli strumenti per sviluppatori del browser (F12 in Chrome o Firefox) per ispezionare gli stili applicati alla tabella e identificare quali regole del tema stanno causando il conflitto. Questo ti permetterà di scrivere regole CSS mirate e precise.<\/p>\n Vuoi tabelle con un design personalizzato e professionale per il tuo sito WordPress? Gli esperti di G Tech Group<\/strong> possono creare stili CSS su misura per le tue tabelle TablePress. Contattaci<\/a> e trasforma i tuoi dati in un’esperienza visiva d’impatto.<\/p>\n Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:<\/p>\n Formattazione e Stili in TablePress: CSS Personalizzato Le tabelle create con TablePress sono funzionali fin dal primo momento, ma per distinguersi davvero e offrire un’esperienza…<\/p>\n","protected":false},"author":2,"featured_media":167202,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"TablePress: CSS e Formattazione | Guida","_seopress_titles_desc":"Come personalizzare lo stile delle tabelle TablePress con CSS. Colori, bordi, font e design responsive.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_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":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"Formattazione Stili TablePress: CSS","footnotes":""},"categories":[1,61],"tags":[2957,3329,3612,3611,3606,492],"class_list":["post-167249","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-senza-categoria","category-wordpress","tag-css","tag-design","tag-formattazione","tag-stili","tag-tablepress","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167249","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=167249"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167249\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/167202"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=167249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=167249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=167249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}style.css<\/code> del tema figlio. Tuttavia, l’area CSS di TablePress è generalmente la scelta migliore perché mantiene le personalizzazioni separate dal tema e le preserva anche in caso di cambio tema.<\/p>\n<style><\/code> direttamente nella pagina dove si trova la tabella. Questo metodo è meno elegante ma può essere pratico per eccezioni una tantum.<\/p>\nComprendere i Selettori CSS di TablePress<\/h2>\n
.tablepress-id-N<\/code> dove N è il numero identificativo della tabella. Questo selettore ti permette di applicare stili a una tabella specifica senza influenzare le altre.<\/p>\n\n
.tablepress<\/code> — Seleziona tutte le tabelle TablePress<\/li>\n.tablepress-id-1<\/code> — Seleziona solo la tabella con ID 1<\/li>\n.tablepress thead th<\/code> — Seleziona le celle dell’intestazione<\/li>\n.tablepress tbody td<\/code> — Seleziona le celle del corpo<\/li>\n.tablepress tfoot th<\/code> — Seleziona le celle del piede<\/li>\n.tablepress .odd td<\/code> — Seleziona le righe dispari<\/li>\n.tablepress .even td<\/code> — Seleziona le righe pari<\/li>\n.tablepress .row-hover tr:hover td<\/code> — Seleziona la riga al passaggio del mouse<\/li>\n<\/ul>\n.column-N<\/code> dove N è il numero della colonna. Ad esempio, .tablepress .column-3<\/code> seleziona tutte le celle della terza colonna.<\/p>\n![\"Area](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/tp2-04-options.png\")
<\/p>\nPersonalizzare i Colori delle Tabelle<\/h2>\n
.tablepress thead th {\n background-color: #2563eb;\n color: #ffffff;\n}<\/code><\/pre>\n.tablepress .odd td {\n background-color: #f8fafc;\n}\n.tablepress .even td {\n background-color: #ffffff;\n}<\/code><\/pre>\n.tablepress tbody tr:hover td {\n background-color: #dbeafe;\n color: #1e3a5f;\n}<\/code><\/pre>\n!important<\/code> se le tue regole non vengono applicate a causa di specificità CSS superiori nel tema. Ad esempio: background-color: #2563eb !important;<\/code><\/p>\nPersonalizzare Font e Tipografia<\/h2>\n
.tablepress {\n font-family: Inter, Segoe UI, sans-serif;\n font-size: 14px;\n line-height: 1.6;\n}<\/code><\/pre>\n.tablepress thead th {\n font-family: Space Grotesk, sans-serif;\n font-size: 15px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}<\/code><\/pre>\n.tablepress .column-4 {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}<\/code><\/pre>\n![\"Editor](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/tp2-02-add.png\")
<\/p>\nBordi, Padding e Spaziature<\/h2>\n
.tablepress td,\n.tablepress th {\n padding: 12px 16px;\n border: 1px solid #e2e8f0;\n}<\/code><\/pre>\n.tablepress td,\n.tablepress th {\n border-left: none;\n border-right: none;\n border-bottom: 1px solid #e2e8f0;\n}<\/code><\/pre>\n.tablepress {\n border-radius: 8px;\n overflow: hidden;\n border: 1px solid #e2e8f0;\n}<\/code><\/pre>\nStili Specifici per Singole Tabelle<\/h2>\n
.tablepress-id-3 {\n background-color: #1e293b;\n color: #e2e8f0;\n border-radius: 12px;\n}\n.tablepress-id-3 thead th {\n background-color: #0f172a;\n color: #60a5fa;\n font-size: 16px;\n}\n.tablepress-id-3 tbody td {\n border-color: #334155;\n}<\/code><\/pre>\nClassi CSS Personalizzate nelle Celle<\/h2>\n
<span class=\"badge-green\">Attivo<\/span><\/code><\/pre>\n.tablepress .badge-green {\n background-color: #dcfce7;\n color: #166534;\n padding: 4px 12px;\n border-radius: 9999px;\n font-size: 12px;\n font-weight: 600;\n}<\/code><\/pre>\n![\"Impostazioni](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/wc-06-settings.png\")
<\/p>\nFormattazione Condizionale con CSS<\/h2>\n
.tablepress .valore-positivo {\n color: #16a34a;\n font-weight: 600;\n}\n.tablepress .valore-negativo {\n color: #dc2626;\n font-weight: 600;\n}<\/code><\/pre>\n<span class=“valore-positivo”>+15{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c}<\/span><\/code> o <span class=“valore-negativo”>-8{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c}<\/span><\/code>. Questo approccio richiede un po’ più di lavoro manuale ma offre un controllo totale sull’aspetto visivo.<\/p>\nAnimazioni e Transizioni CSS<\/h2>\n
.tablepress tbody tr {\n transition: background-color 0.2s ease, transform 0.1s ease;\n}\n.tablepress tbody tr:hover {\n background-color: #eff6ff;\n transform: scale(1.005);\n}<\/code><\/pre>\n@keyframes fadeInUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n.tablepress {\n animation: fadeInUp 0.6s ease-out;\n}<\/code><\/pre>\nTemi Predefiniti e Ispirazione<\/h2>\n
\/* Tema Corporate per TablePress *\/\n.tablepress {\n border-collapse: separate;\n border-spacing: 0;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n overflow: hidden;\n font-family: Inter, sans-serif;\n font-size: 14px;\n}\n.tablepress thead th {\n background: linear-gradient(135deg, #1e40af, #3b82f6);\n color: #fff;\n padding: 14px 18px;\n font-weight: 600;\n text-align: left;\n border: none;\n}\n.tablepress tbody td {\n padding: 12px 18px;\n border-bottom: 1px solid #e5e7eb;\n}\n.tablepress .odd td { background-color: #f9fafb; }\n.tablepress .even td { background-color: #ffffff; }\n.tablepress tbody tr:hover td {\n background-color: #dbeafe;\n}<\/code><\/pre>\nRisolvere i Conflitti CSS con il Tema<\/h2>\n
!important<\/code>.<\/p>\n.tablepress.tablepress thead th<\/code> ha una specificità maggiore di .tablepress thead th<\/code>. In alternativa, puoi avvolgere la tabella in un contenitore con un ID personalizzato e usare quell’ID nel selettore.<\/p>\nLeggi anche gli altri articoli della serie TablePress<\/h3>\n
\n
Migliora il Tuo Sito WordPress<\/h3>\n
\n