Tabelle prezzi in CSS. Tabelle pronte.

Tabelle con i prezzi e le tariffe vi aiutano raggruppare e presentare le vostre informazioni ai visitatori del sito sulle opzioni disponibili per i servizi che state offrendo. Le situazioni non mancano cominciando dalla lavanderia e finendo con noleggio delle auto o mostrare prezzi stagionali per un albergo, viaggi turistiche e tanto altro.

Quindi oggi vediamo esempi di tebelle gia pronti con i prezzi. Puoi semplicemente copiare il codice css e html e applicare questi modelli sul vostro sito oviamente modificando i dati .

 

 La prima tabella con i prezzi

«Tutto a 10»

Euro 10 /mese

Scopri la tariffa
  • Tarifa «Sempre in contto +»
  • Tarifa «C'e contatto»
  • 1 Tb al mese

«Tutto a 15»

Euro 15 /mese

Scopri la tariffa
  • Tarifa «Sempre in contto +»
  • Tarifa «C'e contatto»
  • 2 Tb al mese

Codice HTML e CSS

<style>
.wrap1 {
  width: 640px;
  margin: 50px auto 0;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
}
.box1 {
  width: 300px;
  float: left;
  margin-right: 20px;
}
.top1 {
  background: #36454A;
  padding: 20px;
  text-align: center;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.wrap1 p {
  margin: 0px 0px 10px;
}
.title1 {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}
.price1 {
  font-size: 70px;
  font-weight: bold;
  color: #ffffff;
  position: relative;
  text-align: center;
}
.price1 sup {
  font-size: 24px;
  position: relative;
  top: -15px;
  color: #6eaca7;
}
.wrap1 span {
    font-size: 16px;
    color: #6eaca7;
    text-transform: uppercase;
}
.button1 {
  text-decoration: none;
  color: #6eaca7;
  font-size: 18px;
  border: 1px solid #6eaca7;
  display: inline-block;
  padding: 6px 12px;
  line-height: 1.5;
  text-align: center;
  border-radius: 4px;
  transition: 0.4s linear;
}
.button1:hover {
  color: white;
  border-color: white;
}
.bottom1 {
  padding: 20px 20px 40px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
}
.bottom1 ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.bottom1 li {
  border-bottom: 1px solid #e3e3e3;
  color: #6eaca7;
  font-size: 16px;
  line-height: 40px;
}
</style>
<div class="wrap1">
  <div class="box1">
    <div class="top1">
      <p class="title1">«Tutto a 10»</p>
      <p class="price1">
        <sup>Euro</sup>
        10
        <span>/mese</span>
      </p>
      <a class="button1" href="#">Vedere la tarifa</a>
    </div>
    <div class="bottom1">
      <ul>
        <li>Tarifa «Sempre in contto +»</li>
        <li>Tarifa «C'e contatto»</li>
        <li>1 Tb al mese</li>
      </ul>
    </div>
  </div>
   <div class="box1" style="margin-right:0;">
    <div class="top1">
      <p class="title1">«Tutto a 15»</p>
      <p class="price1">
        <sup>Euro</sup>
        15
        <span>/mese</span>
      </p>
      <a class="button1" href="#">Vedere la tarifa</a>
    </div>
    <div class="bottom1">
      <ul>
        <li>Tarifa «Sempre in contto +»</li>
        <li>Tarifa «C'e contatto»</li>
        <li>2 Tb al mese</li>
      </ul>
    </div>
  </div>
</div>

Un altra tabella con i prezzi per servizio

Smart mini

  • 20 Euro/mese
  • 2 Gb internet
  • Chimatae senza limiti
    al esetero
Comprare

Smart top

  • 20 Euro/mese
  • 4 Gb internet
  • Chimatae senza limiti
    al esetero
Comprare

Codice HTML e CSS

<style>
.wrap2 {
  max-width: 660px;
  margin: 50px auto 0 auto;
  text-align: center;
}
.box2 {
  width: 260px;
  display: inline-block;
  margin-right: 40px;
}
.box2 h2 {
  text-align: center;
  margin: 0;
  background: #497DDD;
  border-radius: 10px 10px 0 0;
  height: 50px;
  line-height: 50px;
  color: white;
}
.bottom2 {
  background: #F2F3EB;
  text-align: center;
  border-radius: 0 0 10px 10px;
  padding: 20px 20px 40px;
  border: 1px solid #DADCDB;
}
.bottom2 ul {
  padding: 0;
  margin: 0 0 40px;
  list-style: none;
}
.bottom2 li {
  padding: 10px 0;
  border-bottom: 1px dotted #DADCDB;
  font-size: 14px;
}
.bottom2 span {
  font-weight: bold;
  color: #EF7D55;
}
.bottom2 a {
  text-decoration: none;
  display: inline-block;
  color: white;
  background: #F24012;
  border: 2px solid transparent;
  font-weight: bold;
  border-radius: 5px;
  padding: 6px 12px;
  line-height: 1.5;
  text-align: center;
  transition: 0.6s linear;
}
.bottom2 a:hover {
  color: #F24012;
  background: white;
  border: 2px solid #F24012;
}
</style>
<div class="wrap2">
  <div class="box2">
      <h2>Smart mini</h2>
       <div class="bottom2">
      <ul>
        <li><span>20</span> Euro/mese</li>
        <li><span>2 Gb</span> internet</li>
        <li><span>Chimatae </span>senza limiti</br> al esetero  <br></li>
      </ul>
         <a href="#">Comprare</a>
    </div>
  </div>
  <div class="box2" style="margin-right:0">
      <h2>Smart top</h2>
       <div class="bottom2">
      <ul>
        <li><span>20</span> Euro/mese</li>
        <li><span>4 Gb</span> internet</li>
        <li><span>Chimatae </span>senza limiti</br> al esetero <br></li>
      </ul>
         <a href="#">Comprare</a>
    </div>
  </div>
</div>

Terzo esempio della tabella gia pronta e stilizata.

Tariffa «Gold»

Numero diretto

5,9€/mese

Numero nascosto

Musica senza limiti

Numero "Preferito"

Segreteria telefonica

Scopri

Tariffa «Platinum»

Numero diretto

8,9€/mese

Numero nascosto

Musica senza limiti

Numero "Preferito"

Segreteria telefonica

Scopri

Codice HTML e CSS

<style>
.wrap3 {
  max-width: 660px;
  margin: 50px auto 0 auto;
  text-align: center;
}
.box3 {
  display: inline-block;
  margin: 0 20px;
  width: 250px;
  background: white;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  float:left;
}
.blue3 {
  background: #93C5C2;
}
h1 {
    margin: 20px 0;
    font-size: 1.3em;
    color: #333333;
}
h2 {
    font-size: 0.8em;
    color: #666666;
    font-weight: 100;
    letter-spacing: 1px;
}
.price3 {
    height: 110px;
    width: 110px;
    text-align: center;
    background-color: #EC351D;
    border-radius: 50%;
    line-height: 110px;
    color: #FFF;
    font-size: 1.4em;
    font-weight: 100;
    margin: 20px auto;
}
.blue3 .price3 {
  background: white;
  color: #333333;
}
.blue3 h1, .blue3 h2, .blue3 p {
  color: white;
}
.about3 {
  margin: 10px 0px;
  padding-bottom: 10px;
  font-weight: 100;
  font-size: 0.8em;
  color: #888888;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.button3 {
    text-decoration: none;
    display: inline-block;
    margin: 20px auto;
    padding: 10px 20px;
    background: #EC351D;
    border-radius: 5px;
    color: white;
    font-size: 0.75em;
    font-weight: 100;
    transition: 0.7s ease-in-out;
}
.button3:hover {
  background: #A52514
}
</style>
<div class="wrap3">
 <div class="box3">
    <h1>Tariffa  «Gold»</h1>
    <h2>Numero diretto</h2>
    <p class="price3">5,9€/mese</p>
    <p class="about3">Numero nascosto</p>
    <p class="about3">Musica senza limiti</p>
    <p class="about3">Numero "Preferito"</p>
    <p class="about3">Segreteria telefonica</p>
    <a class="button3" href="#">Scopri</a>
  </div>
  <div class="box3 blue3">
    <h1>Tariffa  «Platinum»</h1>
    <h2>Numero diretto</h2>
    <p class="price3">8,9€/mese</p>
    <p class="about3">Numero nascosto</p>
    <p class="about3">Musica senza limiti</p>
    <p class="about3">Numero "Preferito"</p>
    <p class="about3">Segreteria telefonica</p>
    <a class="button3" href="#">Scopri</a>
  </div>
</div>

 

P.S Io per mostrare  gli esempi nel articolo riscontro sempre dei conflitti con gli stili predifiniti nel template in uso , la stessa cosa potrebbe capitare anche a voi. Quindi un semplice copy past potrebbe non funzionare in modo voluto ma sapendo dove coreggere, particolarmente per quanto riguarda i CSS  riuscirete ragiungere il risultato voluto.

Letto 593 volte