Creare un layout per le schede prezzi, o pricing table, è uno degli elementi più comuni e fondamentali nel web design moderno, soprattutto per siti che offrono servizi, abbonamenti o pacchetti. Una tabella prezzi ben strutturata presenta non solo le informazioni in modo chiaro, guida anche l'utente verso la scelta più conveniente. Migliora inoltre conversioni e user experience.
Sviluppare un layout per schede prezzi adattabile a tutti i dispositivi con HTML e CSS
In questa guida pratica vedremo come realizzare da zero una pricing table responsive utilizzando soltanto HTML, CSS e poco codice JavaScript per aggiungere interattività dove necessario.
L'obiettivo sarà quello di costruire un layout pulito, professionale e completamente adattabile a tutti i dispositivi. Dal desktop allo smartphone. Analizzeremo passo dopo passo il codice, in modo da renderti in grado non solo di replicare il progetto, ma anche di personalizzarlo secondo le tue esigenze. Al termine, avrai una tabella prezzi moderna e pronta all’uso.
Linguaggi utilizzati e obiettivo finale
Per realizzare questa guida, utilizzeremo tre linguaggi fondamentali del front-end: HTML, per strutturare il contenuto e definire le schede dei piani tariffari (titolo, prezzo, caratteristiche e pulsante). CSS, per dare stile, colori, layout e rendere la tabella flessibile e adattabile a schermi di diverse dimensioni. JavaScript (facoltativo), per aggiungere piccole interazioni (es: effetto hover o l'evidenziazione del piano consigliato).
L'obiettivo è quello di ottenere un design chiaro e professionale. Il layout sarà ordinato in schede affiancate su desktop e in colonne verticali su mobile, per garantire una perfetta leggibilità ovunque. Inoltre, evidenzieremo il piano "consigliato" con un leggero effetto di evidenza o colore differente, così da guidare l'utente nella scelta.
Codice HTML per il layout
<section class="pricing-section">
<h2>I Nostri Piani</h2>
<p>Scegli il piano più adatto alle tue esigenze</p>
<div class="pricing-container">
<!-- Piano Base -->
<div class="pricing-card">
<h3>Piano Base</h3>
<p class="price">€9<span>/mese</span></p>
<ul class="features">
<li>✔ Accesso limitato</li>
<li>✔ 5 Progetti</li>
<li>✔ Supporto via email</li>
<li>✘ Nessun accesso premium</li>
</ul>
<a href="#" class="btn">Scegli</a>
</div>
<!-- Piano Professional (Piano in evidenza) -->
<div class="pricing-card featured">
<h3>Piano Professional</h3>
<p class="price">€19<span>/mese</span></p>
<ul class="features">
<li>✔ Accesso completo</li>
<li>✔ Progetti illimitati</li>
<li>✔ Supporto prioritario</li>
<li>✔ Accesso a contenuti premium</li>
</ul>
<a href="#" class="btn">Scegli</a>
</div>
<!-- Piano Premium -->
<div class="pricing-card">
<h3>Piano Premium</h3>
<p class="price">€29<span>/mese</span></p>
<ul class="features">
<li>✔ Tutte le funzionalità PRO</li>
<li>✔ Supporto 24/7</li>
<li>✔ Accesso Team</li>
<li>✔ Aggiornamenti esclusivi</li>
</ul>
<a href="#" class="btn">Scegli</a>
</div>
</div>
</section>In questa struttura abbiamo creato: un contenitore principale <section> che racchiude l'intera tabella prezzi, un titolo (<h2>) e una descrizione introduttiva. Poi tre schede (div con classe pricing-card) che rappresentano i piani Base, Professional e Premium. Inoltre ogni scheda contiene: un titolo del piano, il prezzo, una lista <ul> con le caratteristiche ed un pulsante CTA ("Scegli"), infine il piano "Professional" ha una classe aggiuntiva .featured per poterlo evidenziare con CSS.
Il codice CSS
/* Sezione principale */
.pricing-section {
text-align: center;
padding: 40px 20px;
font-family: Arial, sans-serif;
}
.pricing-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
/* Card prezzi */
.pricing-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
width: 280px;
padding: 25px 15px;
}
.pricing-card h3 {
margin-bottom: 10px;
font-size: 1.3rem;
}
.price {
font-size: 1.8rem;
margin: 15px 0;
}
.price span {
font-size: 0.8rem;
color: #777;
}
/* Lista caratteristiche */
.features {
list-style: none;
padding: 0;
margin: 15px 0;
}
.features li {
margin: 8px 0;
}
/* Pulsanti */
.btn {
display: inline-block;
padding: 10px 15px;
background: #333;
color: #fff;
text-decoration: none;
border-radius: 4px;
}
.featured {
border: 2px solid #007bff;
}
.featured .btn {
background: #007bff;
}
/* Responsivo */
@media (max-width: 768px) {
.pricing-container {
flex-direction: column;
align-items: center;
}
}Questo foglio di stile svolge tre funzioni principali:
- Struttura grafica delle card sfondi colorati, bordi arrotondati, ombre leggere per un effetto "elevato".
- Evidenziazione del piano centrale tramite la classe
.featured, - Responsività con
flex-wrapmax 900px
Il codice JavaScript
Proseguiamo aggiungendo un breve JavaScript opzionale per migliorare l'interattività della pricing table. In questo esempio, evidenzieremo il piano selezionato cliccando sul pulsante "Scegli", così da renderlo più dinamico per l’utente.
<script>
// Seleziono tutti i pulsanti "Scegli"
const buttons = document.querySelectorAll(".btn");
buttons.forEach((button) => {
button.addEventListener("click", function (e) {
e.preventDefault();
// Rimuovo evidenza da tutte le card
document.querySelectorAll(".pricing-card").forEach((card) => {
card.classList.remove("active");
});
// Aggiungo evidenza alla card selezionata
this.closest(".pricing-card").classList.add("active");
});
});
</script>E aggiungiamo una piccola classe per evidenziare visivamente la card selezionata:
.pricing-card.active {
border: 2px solid #28a745;
background: #f9fff9 !important;
color: black;
margin: 10px;
}Il codice Javascript seleziona tutti i pulsanti “Scegli” e ad ogni click impedisce il comportamento predefinito (preventDefault())
.active
Risultato finale e commento
Con la combinazione di HTML, CSS e JavaScript abbiamo costruito una Pricing Table moderna, pulita e responsive, ideale per siti web che offrono servizi, prodotti digitali o abbonamenti. Il risultato finale presenta tre schede prezzi affiancate su desktop, ciascuna con titolo, prezzo, lista funzionalità e un pulsante chiaro per l'azione. Su dispositivi mobile, il layout si adatta automaticamente in verticale per una lettura fluida e senza bisogno di zoom o scrolling laterale.
L'utente può confrontare le opzioni e individuare il piano consigliato, grazie alla scheda in evidenza (.featured) che utilizza un bordo colorato per attirare l'attenzione. Questa scelta guida l'utente verso il piano più vantaggioso o più venduto.
JavaScript (opzionale) aggiunge interattività permettendo di "selezionare" una scheda. Un dettaglio semplice ma efficace per simulare un flusso d'acquisto o preparare il terreno ad un checkout dinamico. Anche senza JavaScript, però, la tabella funziona grazie a HTML e CSS.
Dal punto di vista della UX:
- Il design è chiaro, ordinato e leggibile.
- Le informazioni sono gerarchizzate (titolo > prezzo > funzioni).
- Il pulsante CTA ("Scegli") è ben visibile e invita all'azione.
Dal punto di vista della Responsive Design:
- Il layout mantiene coerenza visiva su desktop, tablet e smartphone.
- L'uso di
flex-wrap@media query - Le schede si adattano naturalmente allo spazio disponibile.
Creare una pricing table responsive con HTML, CSS e un tocco di JavaScript è un ottimo esercizio per migliorare le proprie competenze nel web design. Questo layout organizza le informazioni in modo chiaro e guida verso la scelta più adatta, aumentando l'efficacia del sito. Da qui puoi personalizzare colori, font e animazioni per adattarli al tuo brand. Con pochi elementi ben strutturati hai ora una base solida, pronta per essere integrata in qualsiasi progetto professionale.
