CTM Laboratorio

Skip to content

Articles

Tables and Forms

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

Laboratori CTM-Ss182 Loc.Nasari Vibo Valentia 89900 Italy - Tel (+39) 0963 45345 / 0963 471883 / 389 1521889

You are here: Home

Skip to content