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 |
[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 |
[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 |
[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
Enterprise$125
- 10GB Disk Space
- 100GB Monthly Bandwidth
- 20 Email Accounts
- Unlimited subdomains
[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
Enterprise$125
- 10GB Disk Space
- 100GB Monthly Bandwidth
- 20 Email Accounts
- Unlimited subdomains
[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]