Tables

Basic Tables

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

Zebra Horizontal Tables

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

Zebra Vertical Tables

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

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

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]

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

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]