Pricing Tables

Create stylish comparison tables.

CSS/JS files (add code to <HEAD> section):


<!-- DC Pricing Tables CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/pricingtables/css/tsc_pricingtables.css" />
<!-- DC Pricing Tables JS -->
<script type="text/javascript" src="dreamcodes/pricingtables/js/tsc_pricingtables.js"></script>

          

Pricing Table Style 1

Business$59

  • 10GB Disk Space
  • 100GB Monthly Bandwidth
  • 20 Email Accounts
  • Unlimited subdomains

Standard$17

  • 3GB Disk Space
  • 25GB Monthly Bandwidth
  • 5 Email Accounts
  • Unlimited subdomains

Basic$9

  • 1GB Disk Space
  • 10GB Monthly Bandwidth
  • 2 Email Accounts
  • Unlimited subdomains

View code:


<!-- DC Pricing Tables:1 Start -->
  <div id="tsc_pricingtable01" class="clear">
    <div class="plan">
      <h3>Business<span>$59</span></h3>
      <a class="signup" href="">Sign up</a>
      <ul>
        <li><b>10GB</b> Disk Space</li>
        <li><b>100GB</b> Monthly Bandwidth</li>
        <li><b>20</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>
      </ul>
    </div>
    <div class="plan" id="most-popular">
      <h3>Professional<span>$29</span></h3>
      <a class="signup" href="">Sign up</a>
      <ul>
        <li><b>5GB</b> Disk Space</li>
        <li><b>50GB</b> Monthly Bandwidth</li>
        <li><b>10</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>
      </ul>
    </div>
    <div class="plan">
      <h3>Standard<span>$17</span></h3>
      <a class="signup" href="">Sign up</a>
      <ul>
        <li><b>3GB</b> Disk Space</li>
        <li><b>25GB</b> Monthly Bandwidth</li>
        <li><b>5</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>
      </ul>
    </div>
    <div class="plan">
      <h3>Basic<span>$9</span></h3>
      <a class="signup" href="">Sign up</a>
      <ul>
        <li><b>1GB</b> Disk Space</li>
        <li><b>10GB</b> Monthly Bandwidth</li>
        <li><b>2</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>
      </ul>
    </div>
  </div>
<!-- DC Pricing Tables:1 End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          

Pricing Table Style 2

  • Starter
  • $5 /mo.
  • 10GB
  • 100GB
  • 1
  • 10
  • 10
  • 5
  • Basic
  • $10 /mo.
  • 50GB
  • 500GB
  • 10
  • 50
  • 50
  • 10
  • Professional
  • $29 /mo.
  • 100GB
  • 1000GB
  • Unlimited
  • Unlimited
  • Unlimited
  • 50
  • Business
  • $39 /mo.
  • 500GB
  • Unlimited
  • Unlimited
  • Unlimited
  • Unlimited
  • 200

View code:


<!-- DC Pricing Tables:2 Start -->
  <div class="tsc_pricingtable02 pricing_five">
    <ul class="pricing_column_first">
      <li class="pricing_header1"></li>
      <li class="pricing_header2"><span>Choose a Plan</span></li>
      <li class="odd"> <a class="tooltip" href="#">Disk Storage <span>The amount of disk storage we provide you with every account purchase.</span> </a> </li>
      <li class="even"> <a class="tooltip" href="#">Bandwidth <span>Amount of data transfer bandwidth provided to each account, per month.</span> </a> </li>
      <li class="odd"><span>Domain Names</span></li>
      <li class="even"> <a class="tooltip" href="#">Subdomains <span>Number of subdomain assigned to your account. </a> </li>
      <li class="odd"><span>Site Builder</span></li>
      <li class="even"><span>Backups</span></li>
      <li class="odd"> <a class="tooltip" href="#">CPANEL <span>Web-based control panel system.</span> </a> </li>
      <li class="even"><span>Email Accounts</span></li>
      <li class="odd"><span>MySQL Databases</span></li>
      <li class="even"> <a class="tooltip" href="#">Setup Fee <span>One-time joining fee that must be paid prior to account activation.</span> </a> </li>
      <li class="odd"><span>24/7 Support</span></li>
      <li class="even"><span>30-Days Money Back</span></li>
      <li class="odd"><span>Templates</span></li>
      <li class="pricing_footer"></li>
    </ul>
    <div class="pricing_hover_area">
      <ul class="pricing_column red">
        <li class="pricing_header1">Starter</li>
        <li class="pricing_header2">$5 <span>/mo.</span></li>
        <li class="odd">10GB</li>
        <li class="even">100GB</li>
        <li class="odd">1</li>
        <li class="even">10</li>
        <li class="odd"><span class="pricing_no"></span></li>
        <li class="even"><span class="pricing_no"></span></li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="even">10</li>
        <li class="odd">5</li>
        <li class="even"><span class="pricing_no"></span></li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="even"><span class="pricing_yes"></span></li>
        <li class="odd"><span class="pricing_no"></span></li>
        <li class="pricing_footer"><a href="#" class="tsc_buttons2 black">Sign Up</a></li>
      </ul>
      <ul class="pricing_column green">
        <li class="pricing_header1">Basic</li>
        <li class="pricing_header2">$10 <span>/mo.</span></li>
        <li class="odd">50GB</li>
        <li class="even">500GB</li>
        <li class="odd">10</li>
        <li class="even">50</li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="even"><span class="pricing_yes"></span></li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="even">50</li>
        <li class="odd">10</li>
        <li class="even"><span class="pricing_no"></span></li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="even"><span class="pricing_yes"></span></li>
        <li class="odd"><span class="pricing_no"></span></li>
        <li class="pricing_footer"><a href="#" class="tsc_buttons2 black">Sign Up</a></li>
      </ul>
      <ul class="pricing_column blue">
        <li class="pricing_header1">Professional</li>
        <li class="pricing_header2">$29 <span>/mo.</span></li>
        <li class="odd">100GB</li>
        <li class="even">1000GB</li>
        <li class="odd">Unlimited</li>
        <li class="even">Unlimited</li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="even"><span class="pricing_yes"></span></li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="even">Unlimited</li>
        <li class="odd">50</li>
        <li class="even"><span class="pricing_no"></span></li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="even"><span class="pricing_yes"></span></li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="pricing_footer"><a href="#" class="tsc_buttons2 black">Sign Up</a></li>
      </ul>
      <ul class="pricing_column black">
        <li class="pricing_header1">Business</li>
        <li class="pricing_header2">$39 <span>/mo.</span></li>
        <li class="odd">500GB</li>
        <li class="even">Unlimited</li>
        <li class="odd">Unlimited</li>
        <li class="even">Unlimited</li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="even"><span class="pricing_yes"></span></li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="even">Unlimited</li>
        <li class="odd">200</li>
        <li class="even"><span class="pricing_no"></span></li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="even"><span class="pricing_yes"></span></li>
        <li class="odd"><span class="pricing_yes"></span></li>
        <li class="pricing_footer"><a href="#" class="tsc_buttons2 black">Sign Up</a></li>
      </ul>
    </div>
  </div>
<!-- DC Pricing Tables:2 End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          

Pricing Table Style 3

View code:


<!-- DC Pricing Tables:3 Start -->
  <div class="tsc_pricingtable03 tsc_pt3_style1">
    <div class="caption_column">
      <ul>
        <li class="header_row_1 align_center radius5_topleft"></li>
        <li class="header_row_2">
          <h2 class="caption">Choose plan</h2>
        </li>
        <li class="row_style_4"><span>Web Space</span></li>
        <li class="row_style_2"><span>Bandwidth</span></li>
        <li class="row_style_4"><span>E-mail accounts</span></li>
        <li class="row_style_2"><span>MySQL databases</span></li>
        <li class="row_style_4"><span><a href="#" class="tooltip" rel="Web-based control panel system">CPANEL</a></span></li>
        <li class="row_style_2"><span><a href="#" class="tooltip" rel="24/7 Support via Phone, Email, Web.">24/7 Support</a></span></li>
        <li class="footer_row"></li>
      </ul>
    </div>
    <div class="column_1">
      <ul>
        <li class="header_row_1 align_center">
          <h2 class="col1">starter</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col1">$<span>5</span></h1>
          <h3 class="col1">per month</h3>
        </li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10GB</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">1</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1</a></span></li>
        <li class="row_style_3 align_center"><span class="pricing_no"></span></li>
        <li class="row_style_1 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
      </ul>
    </div>
    <div class="column_2">
      <ul>
        <li class="header_row_1 align_center">
          <h2 class="col2">basic</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col2">$<span>10</span></h1>
          <h3 class="col2">per month</h3>
        </li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">30GB</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">200GB</a></span></li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">10</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10</a></span></li>
        <li class="row_style_4 align_center"><span class="pricing_yes"></span></li>
        <li class="row_style_2 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
      </ul>
    </div>
    <div class="column_3">
      <ul>
        <li class="header_row_1 align_center">
          <h2 class="col3">pro</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col3">$<span>29</span></h1>
          <h3 class="col3">per month</h3>
        </li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">500GB</a></span></li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">50</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">50</a></span></li>
        <li class="row_style_3 align_center"><span class="pricing_yes"></span></li>
        <li class="row_style_1 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
      </ul>
    </div>
    <div class="column_4">
      <ul>
        <li class="header_row_1 align_center radius5_topright">
          <h2 class="col4">biz</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col4">$<span>39</span></h1>
          <h3 class="col4">per month</h3>
        </li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1000GB</a></span></li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">Unlimited</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li>
        <li class="row_style_4 align_center"><span class="pricing_yes"></span></li>
        <li class="row_style_2 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
      </ul>
    </div>
  </div>
<!-- DC Pricing Tables:3 End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          

Pricing Table Style 4

View code:


<!-- DC Pricing Tables:4 Start -->
  <div class="tsc_pricingtable04">
    <ul class="price-box">
      <li class="pricing-header">
        <ul>
          <li class="title">Starter</li>
          <li class="price"><span class="currency">$</span><span class="big">4</span><span class="small">.95</span></li>
          <li class="month-label">Per Month</li>
        </ul>
      </li>
      <li class="pricing-content">
        <ul>
          <li class="big-description"><strong>Suitable for small blogs, personal sites.</strong></li>
          <li><strong>5</strong> Domains</li>
          <li><strong>5 GB</strong> Storage</li>
          <li><strong>Unlimited</strong> Users</li>
          <li><strong>5</strong> MySQL DBs</li>
          <li><strong>24/7</strong> Support</li>
        </ul>
      </li>
      <li class="pricing-footer"> <a href="#" class="buy-now">Sign Up</a> </li>
    </ul>
    <ul class="price-box">
      <li class="pricing-header">
        <ul>
          <li class="title">Basic</li>
          <li class="price"><span class="currency">$</span><span class="big">10</span><span class="small"></span></li>
          <li class="month-label">Per Month</li>
          <li class="most-popular-label"><span>most popular</span></li>
        </ul>
      </li>
      <li class="pricing-content">
        <ul>
          <li class="big-description"><strong>Perfect for those getting started with a website.</strong></li>
          <li><strong>10</strong> Domains</li>
          <li><strong>25 GB</strong> Storage</li>
          <li><strong>Unlimited</strong> Users</li>
          <li><strong>10</strong> MySQL DBs</li>
          <li><strong>24/7</strong> Support</li>
        </ul>
      </li>
      <li class="pricing-footer"> <a href="#" class="buy-now">Sign Up</a> </li>
    </ul>
    <ul class="price-box">
      <li class="pricing-header">
        <ul>
          <li class="title">Pro</li>
          <li class="price"><span class="currency">$</span><span class="big">29</span><span class="small"></span></li>
          <li class="month-label">Per Month</li>
        </ul>
      </li>
      <li class="pricing-content">
        <ul>
          <li class="big-description"><strong>Designed for small businesses.</strong></li>
          <li><strong>50</strong> Domains</li>
          <li><strong>50 GB</strong> Storage</li>
          <li><strong>Unlimited</strong> Users</li>
          <li><strong>Unlimited</strong> MySQL DBs</li>
          <li><strong>24/7</strong> Support</li>
        </ul>
      </li>
      <li class="pricing-footer"> <a href="#" class="buy-now">Sign Up</a> </li>
    </ul>
  </div>
<!-- DC Pricing Tables:4 End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          

Pricing Table Style 5

Basic
$4.50/month
Advanced
$9.50/month
Premium
$11.50/month
Pro
$13.50/month
Sign Up Sign Up Sign Up Sign Up
Up to 50 users Up to 50 users Up to 50 users Up to 50 users
50 GB storage 50 GB storage 50 GB storage 50 GB storage
Unlimited Sets Unlimited Sets Unlimited Sets Unlimited Sets
Unlimited Workspaces Unlimited Workspaces Unlimited Workspaces Unlimited Workspaces
iPhone App iPhone App iPhone App iPhone App
Private URLs Private URLs Private URLs Private URLs
Enhanced Security Enhanced Security Enhanced Security Enhanced Security

View code:


<!-- DC Pricing Tables:5 Start -->
  <div class="tsc_pricingtable05">
    <table>
      <thead>
        <tr>
          <th>Basic<br />
            <span>$4.50/month</span></th>
          <th>Advanced<br />
            <span>$9.50/month</span></th>
          <th>Premium<br />
            <span>$11.50/month</span></th>
          <th>Pro<br />
            <span>$13.50/month</span></th>
        </tr>
      </thead>
      <tfoot>
        <tr class="pricing_btn">
          <td><a class="the_button" href="#">Sign Up</a></td>
          <td><a class="the_button" href="#">Sign Up</a></td>
          <td><a class="the_button active" href="#">Sign Up</a></td>
          <td><a class="the_button" href="#">Sign Up</a></td>
        </tr>
      </tfoot>
      <tbody>
        <tr class="grey">
          <td>Up to 50 users</td>
          <td>Up to 50 users</td>
          <td>Up to 50 users</td>
          <td>Up to 50 users</td>
        </tr>
        <tr>
          <td>50 GB storage</td>
          <td>50 GB storage</td>
          <td>50 GB storage</td>
          <td>50 GB storage</td>
        </tr>
        <tr class="grey">
          <td>Unlimited Sets</td>
          <td>Unlimited Sets</td>
          <td>Unlimited Sets</td>
          <td>Unlimited Sets</td>
        </tr>
        <tr>
          <td>Unlimited Workspaces</td>
          <td>Unlimited Workspaces</td>
          <td>Unlimited Workspaces</td>
          <td>Unlimited Workspaces</td>
        </tr>
        <tr class="grey">
          <td>iPhone App</td>
          <td>iPhone App</td>
          <td>iPhone App</td>
          <td>iPhone App</td>
        </tr>
        <tr>
          <td>Private URLs</td>
          <td>Private URLs</td>
          <td>Private URLs</td>
          <td>Private URLs</td>
        </tr>
        <tr class="grey">
          <td>Enhanced Security</td>
          <td>Enhanced Security</td>
          <td>Enhanced Security</td>
          <td>Enhanced Security</td>
        </tr>
      </tbody>
    </table>
  </div>
<!-- DC Pricing Tables:5 End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          

Pricing Table Style 6

Basic
$4.50/month
Advanced
$9.50/month
Premium
$11.50/month
Pro
$13.50/month
Sign Up Sign Up Sign Up Sign Up
Up to 50 users Up to 50 users Up to 50 users Up to 50 users
50 GB storage 50 GB storage 50 GB storage 50 GB storage
Unlimited Sets Unlimited Sets Unlimited Sets Unlimited Sets
Unlimited Workspaces Unlimited Workspaces Unlimited Workspaces Unlimited Workspaces
iPhone App iPhone App iPhone App iPhone App
Private URLs Private URLs Private URLs Private URLs
Enhanced Security Enhanced Security Enhanced Security Enhanced Security

View code:


<!-- DC Pricing Tables:6 Start -->
  <div class="tsc_pricingtable06">
    <table>
      <thead>
        <tr>
          <th>Basic<br />
            <span>$4.50/month</span></th>
          <th>Advanced<br />
            <span>$9.50/month</span></th>
          <th>Premium<br />
            <span>$11.50/month</span></th>
          <th>Pro<br />
            <span>$13.50/month</span></th>
        </tr>
      </thead>
      <tfoot>
        <tr class="pricing_btn">
          <td><a class="the_button" href="#">Sign Up</a></td>
          <td><a class="the_button" href="#">Sign Up</a></td>
          <td><a class="the_button active" href="#">Sign Up</a></td>
          <td><a class="the_button" href="#">Sign Up</a></td>
        </tr>
      </tfoot>
      <tbody>
        <tr class="grey">
          <td>Up to 50 users</td>
          <td>Up to 50 users</td>
          <td>Up to 50 users</td>
          <td>Up to 50 users</td>
        </tr>
        <tr>
          <td>50 GB storage</td>
          <td>50 GB storage</td>
          <td>50 GB storage</td>
          <td>50 GB storage</td>
        </tr>
        <tr class="grey">
          <td>Unlimited Sets</td>
          <td>Unlimited Sets</td>
          <td>Unlimited Sets</td>
          <td>Unlimited Sets</td>
        </tr>
        <tr>
          <td>Unlimited Workspaces</td>
          <td>Unlimited Workspaces</td>
          <td>Unlimited Workspaces</td>
          <td>Unlimited Workspaces</td>
        </tr>
        <tr class="grey">
          <td>iPhone App</td>
          <td>iPhone App</td>
          <td>iPhone App</td>
          <td>iPhone App</td>
        </tr>
        <tr>
          <td>Private URLs</td>
          <td>Private URLs</td>
          <td>Private URLs</td>
          <td>Private URLs</td>
        </tr>
        <tr class="grey">
          <td>Enhanced Security</td>
          <td>Enhanced Security</td>
          <td>Enhanced Security</td>
          <td>Enhanced Security</td>
        </tr>
      </tbody>
    </table>
  </div>
<!-- DC Pricing Tables:6 End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          


© TemplateAccess