Price Table
- Written by Super User
- Template articles
- Hits: 1005
- Print , Email
- Basic
- $15/ month
- Access to all themes
- Regular theme updates
- Email / Phone Support
- Use your own domain
- Choose
- Premium
- $99/ month
- Access to all themes
- Regular theme updates
- Email / Phone Support
- Use your own domain
- Choose
- Plus
- $29/ month
- Access to all themes
- Regular theme updates
- Email / Phone Support
- Use your own domain
- Choose
Price table Custom HTML is based on the following structure:
<div class="gkPriceTable col3"> <dl> <dt>Basic</dt> <dd class="gkPrice">$15<small>/ month</small></dd> <dd>Access to all themes</dd> <dd>Regular theme updates</dd> <dd>Email / Phone Support</dd> <dd>Use your own domain</dd> <dd><a href="#">Choose</a></dd> </dl> <dl class="gkPremium"> <dt>Premium</dt> <dd class="gkPrice">$99<small>/ month</small></dd> <dd>Access to all themes</dd> <dd>Regular theme updates</dd> <dd>Email / Phone Support</dd> <dd>Use your own domain</dd> <dd>Try it for a month!</dd> <dd><a href="#">Choose</a></dd> </dl> <dl> <dt>Plus</dt> <dd class="gkPrice">$29<small>/ month</small></dd> <dd>Access to all themes</dd> <dd>Regular theme updates</dd> <dd>Email / Phone Support</dd> <dd>Use your own domain</dd> <dd><a href="#">Choose</a></dd> </dl> </div>
The main wrapper contains two clases: the gkPriceTable class is required as a base of the CSS styling and 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 gkPremium class the column will be highlighted) - in the dt element you can specify the table column title. In the dd element with gkPrice 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.