Saturday, 07 December 2024

Pricing Tables

  • Category: Typography
  • Written by Super User
  • Hits: 12190
  • Print

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>