Tables

Basic Tables

[table type= »basic »]

One Two Three Four Five Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit

[/table]

[toggle title= »Click here to view the above used Shortcode source »][code lang= »html »][[table type="basic"]
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr>
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr class="odd">
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr>
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr class="odd">
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
</tbody>
[/table]][/code][/toggle]

Zebra Horizontal Tables

[table type= »zebra_horizontal »]

One Two Three Four Five Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit

[/table]

[toggle title= »Click here to view the above used Shortcode source »][code lang= »html »][[table type="zebra_horizontal"]
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr>
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr class="odd">
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr>
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr class="odd">
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
</tbody>
[/table]][/code][/toggle]

Zebra Vertical Tables

[table type= »zebra_vertical »]

One Two Three Four Five Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit Lorem Ipsum dolor sit amet consectetur adipiscing elit

[/table]

[toggle title= »Click here to view the above used Shortcode source »][code lang= »html »]
[[table type="zebra_vertical"]
<colgroup>
<col class="col_odd">
<col class="even">
<col class="col_odd">
<col class="even">
<col class="col_odd">
</colgroup>

<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
<tbody>
<tr>
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr>
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr>
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr>
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
<tr>
<td> Lorem Ipsum</td>
<td> dolor sit</td>
<td> amet</td>
<td> consectetur adipiscing</td>
<td> elit</td>
</tr>
</tbody>
[/table]][/code][/toggle]

Pricing tables

Basic pricing table with active tab

Free$0

  • 10GB Disk Space
  • 100GB Monthly Bandwidth
  • 20 Email Accounts
  • Unlimited subdomains

Advanced$50

  • 10GB Disk Space
  • 100GB Monthly Bandwidth
  • 20 Email Accounts
  • Unlimited subdomains

Enterprise$125

  • 10GB Disk Space
  • 100GB Monthly Bandwidth
  • 20 Email Accounts
  • Unlimited subdomains

[toggle title= »Click here to grab the HTML code snipplet »][code lang= »html »]
<div id="pricing_table" class="clear pricing_3_col table_w_active">

<!– #1 PRICING TABLE STARTS HERE –>
<div class="pricing_section">
<h3>Free<span>$0</span></h3>

<ul>
<li><strong>10GB</strong> Disk Space</li>
<li><strong>100GB</strong> Monthly Bandwidth</li>
<li><strong>20</strong> Email Accounts</li>
<li><strong>Unlimited</strong> subdomains</li>
</ul>

<a class="signup" href="">Sign up</a>

</div>
<!– #1 PRICING TABLE ENDS HERE –>

<!– #2 PRICING TABLE STARTS HERE –>
<div class="pricing_section pricing_active">
<h3>Advanced<span>$50</span></h3>

<ul>
<li><strong>10GB</strong> Disk Space</li>
<li><strong>100GB</strong> Monthly Bandwidth</li>
<li><strong>20</strong> Email Accounts</li>
<li><strong>Unlimited</strong> subdomains</li>
</ul>

<a class="signup" href="">Sign up</a>

</div>
<!– #2 PRICING TABLE ENDS HERE –>

<!– #3 PRICING TABLE STARTS HERE –>
<div class="pricing_section">
<h3>Enterprise<span>$125</span></h3>

<ul>
<li><strong>10GB</strong> Disk Space</li>
<li><strong>100GB</strong> Monthly Bandwidth</li>
<li><strong>20</strong> Email Accounts</li>
<li><strong>Unlimited</strong> subdomains</li>
</ul>

<a class="signup" href="">Sign up</a>

</div>
<!– #3 PRICING TABLE ENDS HERE –>

</div>
[/code][/toggle]

Basic pricing table without active tab

Free$0

  • 10GB Disk Space
  • 100GB Monthly Bandwidth
  • 20 Email Accounts
  • Unlimited subdomains

Basic$25

  • 10GB Disk Space
  • 100GB Monthly Bandwidth
  • 20 Email Accounts
  • Unlimited subdomains

Advanced$50

  • 10GB Disk Space
  • 100GB Monthly Bandwidth
  • 20 Email Accounts
  • Unlimited subdomains

Enterprise$125

  • 10GB Disk Space
  • 100GB Monthly Bandwidth
  • 20 Email Accounts
  • Unlimited subdomains

[toggle title= »Click here to grab the HTML code snipplet »][code lang= »html »]
<div id="pricing_table" class="clear pricing_4_col">

<!– #1 PRICING TABLE STARTS HERE –>
<div class="pricing_section">
<h3>Free<span>$0</span></h3>

<ul>
<li><strong>10GB</strong> Disk Space</li>
<li><strong>100GB</strong> Monthly Bandwidth</li>
<li><strong>20</strong> Email Accounts</li>
<li><strong>Unlimited</strong> subdomains</li>
</ul>

<a class="signup" href="">Sign up</a>

</div>
<!– #1 PRICING TABLE ENDS HERE –>

<!– #2 PRICING TABLE STARTS HERE –>
<div class="pricing_section">
<h3>Basic<span>$25</span></h3>

<ul>
<li><strong>10GB</strong> Disk Space</li>
<li><strong>100GB</strong> Monthly Bandwidth</li>
<li><strong>20</strong> Email Accounts</li>
<li><strong>Unlimited</strong> subdomains</li>
</ul>

<a class="signup" href="">Sign up</a>

</div>
<!– #2 PRICING TABLE ENDS HERE –>

<!– #3 PRICING TABLE STARTS HERE –>
<div class="pricing_section">
<h3>Advanced<span>$50</span></h3>

<ul>
<li><strong>10GB</strong> Disk Space</li>
<li><strong>100GB</strong> Monthly Bandwidth</li>
<li><strong>20</strong> Email Accounts</li>
<li><strong>Unlimited</strong> subdomains</li>
</ul>

<a class="signup" href="">Sign up</a>

</div>
<!– #3 PRICING TABLE ENDS HERE –>

<!– #4 PRICING TABLE STARTS HERE –>
<div class="pricing_section">
<h3>Enterprise<span>$125</span></h3>

<ul>
<li><strong>10GB</strong> Disk Space</li>
<li><strong>100GB</strong> Monthly Bandwidth</li>
<li><strong>20</strong> Email Accounts</li>
<li><strong>Unlimited</strong> subdomains</li>
</ul>

<a class="signup" href="">Sign up</a>

</div>
<!– #4 PRICING TABLE ENDS HERE –>

</div>
[/code][/toggle]