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

Professional$29

5GB Disk Space
50GB Monthly Bandwidth
10 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

Choose a Plan
Disk Storage The amount of disk storage we provide you with every account purchase.
Bandwidth Amount of data transfer bandwidth provided to each account, per month.
Domain Names
Subdomains Number of subdomain assigned to your account.
Site Builder
Backups
CPANEL Web-based control panel system.
Email Accounts
MySQL Databases
Setup Fee One-time joining fee that must be paid prior to account activation.
24/7 Support
30-Days Money Back
Templates

Starter
$5 /mo.
10GB
100GB
1
10
10
5
Sign Up

Basic
$10 /mo.
50GB
500GB
10
50
50
10
Sign Up

Professional
$29 /mo.
100GB
1000GB
Unlimited
Unlimited
Unlimited
50
Sign Up

Business
$39 /mo.
500GB
Unlimited
Unlimited
Unlimited
Unlimited
200
Sign Up

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

Choose plan
Web Space
Bandwidth
E-mail accounts
MySQL databases
CPANEL
24/7 Support

starter
$5

per month
10GB
100GB
1
1
sign up!

basic
$10

per month
30GB
200GB
10
10
sign up!

pro
$29

per month
100GB
500GB
50
50
sign up!

biz
$39

per month
Unlimited
1000GB
Unlimited
Unlimited
sign up!

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

- Starter
- $4.95
- Per Month
- Suitable for small blogs, personal sites.
- 5 Domains
- 5 GB Storage
- Unlimited Users
- 5 MySQL DBs
- 24/7 Support
Sign Up

- Basic
- $10
- Per Month
- most popular
- Perfect for those getting started with a website.
- 10 Domains
- 25 GB Storage
- Unlimited Users
- 10 MySQL DBs
- 24/7 Support
Sign Up

- Pro
- $29
- Per Month
- Designed for small businesses.
- 50 Domains
- 50 GB Storage
- Unlimited Users
- Unlimited MySQL DBs
- 24/7 Support
Sign Up

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 -->