Friday 09 May 2025
Error
  • JUser: :_load: Unable to load user with ID: 42
You are here: Home

Pricing Tables

Monday, 21 May 2012 00:05
Published in Typography
Written by  Read 420 times
Rate this item
(0 votes)

This page present demo content with Pricing Tables. For both light and dark themes!

Vertical Table with Color Highlighted Column

choose your hosting planStarting
$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
E-mail        
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 planStarting
$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
E-mail        
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 downgradePriceFeaturesChange plan

Max
Greate for teams within large companies.

 $ 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 downgradePriceFeaturesChange plan

Max
Greate for teams within large companies.

 $ 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 downgradePriceFeaturesChange plan

Max
Greate for teams within large companies.

 $ 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 downgradePriceFeaturesChange plan

Max
Greate for teams within large companies.

 $ 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 downgradePriceSaveFeaturesChange plan

Max
Greate for teams within large companies.

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

More in this category: « Image Styles Gallery »

Last modified on Monday, 21 May 2012 00:47

back to top