Pricing Tables
- Category: Typography
- Written by Super User
- Hits: 14301
This page present demo content with Pricing Tables. For both light and dark themes!
Vertical Table with Color Highlighted Column
choose your hosting plan | Starting $45 per month Best Price | Professional $55 per month Best Value | Expert $75 per month Best Pack | Corporate $95 per month Best ALL |
---|---|---|---|---|
Key Features | ||||
Monthly Bandwidth | 200 GB | 300 GB | 500 GB | 1000 GB |
Web Storage | 50GB | 100 GB | 250 GB | 500 GB |
Customer Support | 27/7 E-mail & Phone | 27/7 E-mail & Phone | 27/7 E-mail & Phone | 27/7 E-mail & Phone |
Free Domains | None | 1 Domain | 2 Domains | 5 Domains |
Web Space per e-mail account | 50 MB | 100 MB | 200 MB | 500 MB |
Maximum E-Mail Accounts | 10 Accounts | 50 Accounts | 100 Accounts | Unlimited Accounts |
Web Environment | ||||
PHP 5.2+ | Yes | Yes | Yes | Yes |
MySQL 5.1+ | Yes | Yes | Yes | Yes |
» Add yours | Sign UP | Sign UP | Sign UP | Sign UP |
Vertical Tables with all Available Highlight Colors
choose your hosting plan | Starting $45 per month Best Price | Professional $55 per month Best Value | Expert $75 per month Best Pack | Corporate $95 per month Best ALL |
---|---|---|---|---|
Key Features | ||||
Monthly Bandwidth | 200 GB | 300 GB | 500 GB | 1000 GB |
Web Storage | 50GB | 100 GB | 250 GB | 500 GB |
Customer Support | 27/7 E-mail & Phone | 27/7 E-mail & Phone | 27/7 E-mail & Phone | 27/7 E-mail & Phone |
Free Domains | None | 1 Domain | 2 Domains | 5 Domains |
Web Space per e-mail account | 50 MB | 100 MB | 200 MB | 500 MB |
Maximum E-Mail Accounts | 10 Accounts | 50 Accounts | 100 Accounts | Unlimited Accounts |
Web Environment | ||||
PHP 5.2+ | Yes | Yes | Yes | Yes |
MySQL 5.1+ | Yes | Yes | Yes | Yes |
» Add yours | Sign UP | Sign UP | Sign UP | Sign UP |
Vertical Table Source Code - find and replace color classes to your convenience
<table class="ol-typo-table table-rounded vertical-table" width="100%" border="0"> <thead> <tr> <th scope="col" class="first">choose your hosting plan</th> <th scope="col" class="gray"> <span class="table-price-heading">Starting</span><br /> <span class="table-price">$45</span><br /> <span class="table-price-rate">per month</span><br /> <span class="table-price-line">Best Price</span> </th> <th scope="col" class="gray"> <span class="table-price-heading">Professional</span><br /> <span class="table-price">$55</span><br /> <span class="table-price-rate">per month</span><br /> <span class="table-price-line">Best Value</span> </th> <th scope="col" class="mint"> <span class="table-price-heading">Expert</span><br /> <span class="table-price">$75</span><br /> <span class="table-price-rate">per month</span><br /> <span class="table-price-line">Best Pack</span> </th> <th scope="col" class="gray"> <span class="table-price-heading">Corporate</span><br /> <span class="table-price">$95</span><br /> <span class="table-price-rate">per month</span><br /> <span class="table-price-line">Best ALL</span> </th> </tr> </thead> <tbody> <tr class="first"> <td class="first left-header"> <span class="table-price-heading">Key Features</span> </td> <td class="space gray"></td> <td class="space gray"></td> <td class="space mint"></td> <td class="space gray"></td> </tr> <tr class="first"> <td class="first">Monthly Bandwidth </td> <td class="gray">200 GB</td> <td class="gray">300 GB</td> <td class="mint">500 GB</td> <td class="gray">1000 GB</td> </tr> <tr class="row2"> <td class="first">Web Storage</td> <td class="gray">50GB</td> <td class="gray">100 GB</td> <td class="mint">250 GB</td> <td class="gray">500 GB</td> </tr> <tr class=""> <td class="first">Customer Support</td> <td class="gray">27/7 E-mail & Phone</td> <td class="gray">27/7 E-mail & Phone</td> <td class="mint">27/7 E-mail & Phone</td> <td class="gray">27/7 E-mail & Phone</td> </tr> <tr class="last row2"> <td class="first">Free Domains</td> <td class="gray">None</td> <td class="gray">1 Domain</td> <td class="mint">2 Domains</td> <td class="gray">5 Domains</td> </tr> <tr> <td class="first left-header"> <span class="table-price-heading">E-mail</span> </td> <td class="space gray"></td> <td class="space gray"></td> <td class="space mint"></td> <td class="space gray"></td> </tr> <tr class="first"> <td class="first">Web Space per e-mail account</td> <td class="gray">50 MB</td> <td class="gray">100 MB</td> <td class="mint">200 MB</td> <td class="gray last">500 MB</td> </tr> <tr class="last row2"> <td class="first">Maximum E-Mail Accounts</td> <td class="gray">10 Accounts</td> <td class="gray">50 Accounts</td> <td class="mint">100 Accounts</td> <td class="gray">Unlimited Accounts </td> </tr> <tr> <td class="first left-header"> <span class="table-price-heading">Web Environment</span> </td> <td class="space gray"></td> <td class="space gray"></td> <td class="space mint"></td> <td class="space gray"></td> </tr> <tr class="first"> <td class="first">PHP 5.2+</td> <td class="gray">Yes</td> <td class="gray">Yes</td> <td class="mint">Yes</td> <td class="gray last">Yes</td> </tr> <tr class="row2"> <td class="first">MySQL 5.1+</td> <td class="gray">Yes</td> <td class="gray">Yes</td> <td class="mint">Yes</td> <td class="gray last">Yes</td> </tr> <tr class="last"> <td class="first space"></td> <td class="gray"><a href="#" class="button gray big">Sign UP</a> </td> <td class="gray"><a href="#" class="button gray big">Sign UP</a> </td> <td class="mint"><a href="#" class="button mint big">Sign UP</a> </td> <td class="last gray"><a href="#" class="button gray big">Sign UP</a> </td> </tr> </tbody> </table>
Horizontal Tables with all Available Colors
Upgrade or downgrade | Price | Features | Change plan |
---|---|---|---|
Max |
$ 119/month | 50 Users 50 GB Storage Unlimited Workspaces |
Yes |
Premium Greate for teams within large companies. |
$ 69/month | 50 Users 50 GB Storage Unlimited Workspaces |
No |
Max Greate for teams within large companies. |
$ 119/month | 50 Users 50 GB Storage Unlimited Workspaces |
Yes |
Upgrade or downgrade | Price | Features | Change plan |
---|---|---|---|
Max |
$ 119/month | 50 Users 50 GB Storage Unlimited Workspaces |
Yes |
Premium Greate for teams within large companies. |
$ 69/month | 50 Users 50 GB Storage Unlimited Workspaces |
No |
Max Greate for teams within large companies. |
$ 119/month | 50 Users 50 GB Storage Unlimited Workspaces |
Yes |
Upgrade or downgrade | Price | Features | Change plan |
---|---|---|---|
Max |
$ 119/month | 50 Users 50 GB Storage Unlimited Workspaces |
Yes |
Premium Greate for teams within large companies. |
$ 69/month | 50 Users 50 GB Storage Unlimited Workspaces |
No |
Max Greate for teams within large companies. |
$ 119/month | 50 Users 50 GB Storage Unlimited Workspaces |
Yes |
Upgrade or downgrade | Price | Features | Change plan |
---|---|---|---|
Max |
$ 119/month | 50 Users 50 GB Storage Unlimited Workspaces |
Yes |
Premium Greate for teams within large companies. |
$ 69/month | 50 Users 50 GB Storage Unlimited Workspaces |
No |
Max Greate for teams within large companies. |
$ 119/month | 50 Users 50 GB Storage Unlimited Workspaces |
Yes |
Upgrade or downgrade | Price | Save | Features | Change plan |
---|---|---|---|---|
Max |
$ 119/month | - | 50 Users 50 GB Storage Unlimited Workspaces |
Yes |
Premium Greate for teams within large companies. |
$ 69/month | 40% | 50 Users 50 GB Storage Unlimited Workspaces |
No |
Max Greate for teams within large companies. |
$ 119/month | - | 50 Users 50 GB Storage Unlimited Workspaces |
Yes |
Rounded Table Gray - default, rename color name as shown in these examples
<table class="ol-typo-table table-rounded table-gray" width="100%" border="0"> <thead> <tr> <th scope="col" class="first">Header1</th> <th scope="col">Header2</th> <th scope="col">Header3</th> <th scope="col" class="last">Header4</th> </tr> </thead> <tbody> <tr> <td class="first"><p>Column1 Text</p></td> <td>Column2 Text</td> <td>Column3 Text</td> <td class="last">Column4 Text</td> </tr> <tr class="ol-typo-row-caption"> <td class="first">Column1 Text.</td> <td>Column2 Text</td> <td>Column3 Text</td> <td class="last">Column4 Text</td> </tr> <tr class="last"< <td class="first">Column1 Text.</td> <td>Column2 Text</td> <td>Column3 Text</td> <td class="last">Column4 Text</td> </tr> </tbody> </table>