Price table Custom HTML is based on the following structure:

<div class="gk-price-table col3">
<dl>
<dt>Basic<small>The normal price</small></dt>
<dd class="gk-image"><img src="[pageurl]/wp-content/themes/CloudHost/images/demo/server1.jpg" alt="Server I">
</dd><dd>
</dd><dd><strong>1000 GB</strong> Space</dd>
<dd><strong>2 CPU</strong> Core 2.4GHz</dd>
<dd><strong>5 TB</strong> Traffic</dd>
<dd><strong>99.99%</strong> Uptime Guarantee</dd>
<dd class="gk-price"><strong>$ 199.99</strong> <a href="#" class="btn">Order now</a></dd>
</dl>
<dl class="gk-popular">
<dt>Super<small>The most popular</small></dt>
<dd class="gk-image"><src="[pageurl]/wp-content/themes/CloudHost/images/demo/server2.jpg" alt="Server II">
</dd><dd>
</dd><dd><strong>2000 GB</strong> Space</dd>
<dd><strong>4 CPU</strong> Core 2.4GHz</dd>
<dd><strong>5 TB</strong> Traffic</dd>
<dd><strong>99.99%</strong> Uptime Guarantee</dd>
<dd class="gk-price"><strong>$ 299.99</strong> <a href="#">Order now</a></dd>
</dl>
<dl>
<dt>Extreme<small>For fanatics</small></dt>
<dd class="gk-image"><img src="[pageurl]/wp-content/themes/CloudHost/images/demo/server3.jpg" alt="Server III">
</dd><dd>
</dd><dd><strong>5000 GB</strong> Space</dd>
<dd><strong>6 CPU</strong> Core 2.4GHz</dd>
<dd><strong>5 TB</strong> Traffic</dd>
<dd><strong>99.99%</strong> Uptime Guarantee</dd>
<dd class="gk-price"><strong>$ 499.99</strong> <a href="#" class="btn">Order now</a></dd>
</dl>
</div>

The main wrapper contains two clases: the gk-price-table class is required, the second class is used to specify the amount of columns – you can use classes col1–col5.

Every column is specified by dl element (with gk-popular class the column will be highlighted) – in the dt element you can specify the table column title. In the dd element with gk-price class you can specify the price – using the small element you can specify te service period time.

Adding of the button at the bottom is very simple – it needs just to add the link element in the dd element.