Tabella prezzi per sito (piani in HTML e CSS)
Scrivi i piani nel riquadro: una riga con nome e prezzi, e sotto le voci. Segna l’evidenza con * davanti al nome.
Come si usaPiani fianco a fianco, con il migliore in evidenza
Disponibile in: 
Tabella prezzi per sito (piani in HTML e CSS): a cosa serve
Una sezione di piani ben fatta aiuta il visitatore a confrontare e scegliere. Scrivi ogni piano con nome, prezzo mensile, prezzo annuale, pulsante e le voci incluse (+) e non incluse (-), e segna l’evidenza con un asterisco.
Il codice è responsive, con il piano in evidenza leggermente sollevato e con etichetta, icone di incluso e non incluso (con testo per i lettori di schermo) e un interruttore mensile/annuale fatto solo con CSS e pulsanti radio. Regola il colore, la valuta e il testo dell’etichetta.
Come si usa
- Scrivi i piani e le voci.
- Segna il piano in evidenza e regola i colori.
- Copia il codice.
Quando usarlo
- Piani in abbonamento.
- Pacchetti di servizi.
- Piani di palestra o corso.
Domande frequenti
Come scrivere i piani?
Ogni piano inizia con una riga «Nome | prezzo mensile | prezzo annuale | testo del pulsante | link». Le righe successive, che iniziano con + o -, sono le voci incluse e non incluse. Lascia una riga vuota tra i piani. Metti * davanti al nome del piano da mettere in evidenza.
Come funziona l’interruttore mensile/annuale?
Se compili il prezzo annuale, compare un interruttore per far scegliere al visitatore. Funziona con CSS e pulsanti radio, senza JavaScript, e i due prezzi restano nell’HTML.
Quanti piani mostrare?
Tre è il numero più comune: quello centrale, in evidenza, di solito è il più scelto. Con più di quattro il confronto diventa difficile; in quel caso funziona meglio una tabella comparativa.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.