Tables and Forms

Tables and FormsThis page present demo content with Tables and Forms. Enjoy!

Tables Styles Delivered With Both Vertical and Horizontal Layout Design

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
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 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
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="ja-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="green">
				<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 green"></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="green">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="green">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="green">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="green">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 green"></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="green">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="green">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 green"></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="green">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="green">	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="green"><a href="#" class="button green 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
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 downgrade Price Features Change 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 downgrade Price Features Change 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 downgrade Price Features Change 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 downgrade Price Save Features Change 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="ja-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="ja-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>

Form Elements





Form Sample Code
<form>
	<fieldset>
		<p>
			<label for="input1">Sample Input 1</label> <br />
			<input id="input1" class="inputbox" name="input" type="input" />
		</p>
		<p>
			<label for="input2">Sample Input 2</label> <br />
			<input id="input2" class="inputbox" name="input" type="input" />
		</p>
		<p>
			<input id="radio-sample" type="radio" /><label for="radio-sample">Sample Radio Input</label>
			<input id="radio-sample2" type="radio" /><label for="radio-sample2">Sample Radio Input 2</label><br />
			<input id="checkbox-sample" type="checkbox" /><label for="checkbox-sample">Sample CheckBox Input</label>
			<input id="checkbox-sample2" type="checkbox" /><label for="checkbox-sample2">Sample CheckBox Input 2</label>
		</p>
		<p>
			<label for="select">Sample Select Field:</label><br />
			<select id="select">
				<option selected="selected">Option One</option>
				<option>Option Two</option>
			</select>
		</p>
		<p>
			<label for="textarea-sample">Sample Textarea Field:</label><br />
			<textarea id="textarea-sample" class="inputbox" cols="80" rows="5">Textarea text</textarea>
		</p>
		<p>
			<button>Submit Button</button> <input class="button" type="button" value="Reset Input" />
		</p>
	</fieldset>	
</form>