Cara Membuat Tabel Daftar Harga dengan Pure Css

Bagi Anda yang sering berkunjung ke situs-situs hosting atau situs lainnya yang membandingkan produk serta fitur-fiturnya mungkin tidak asing lagi dengan gambar tabel seperti dibawah. Tabel daftar harga biasanya memuat harga yang ditawarkan serta beberapa fitur unggulan untuk perbandingan. Lalu bagaimana cara membuatnya? jangan khawatir karena saya akan memberikan panduan cara membuatnya. Tabel harga yang saya buat kali ini akan menggunakan css yang terkenal ringan yaitu Pure Css. Jika Anda pernah membuaka halaman websitenya maka Anda akan menemui model tabel yang sama seperti gambar dibawah pada bagian menu layout.

Cara membuatnya sangat mudah, karena menggunakan pure css jadi bisa meminimalisir penggunaan kode yang kita ketik secara manual. Sebelum mulai membuatnya silahkan Anda kunjungi situsnya untuk mengambil alamat css atau menyimpannya jika Anda ingin menggunakannya pada situs yang menggunakan hosting sendiri.

1. Pertama salin alamat css kemudian letakkan diatas kode </head> (atau didalam header), atau Anda bisa mengunduh dan menyimpannya jika menggunakan hosting, dan mengimpornya.

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"/>

2. Selanjutnya impor css untuk Grid Responsif seperti dibawah ini.

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

2. Lanjutkan dengan membuat tabelnya menggunakan kode HTML seperti dibawah ini.

<div class="pricing-tables pure-g">
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pricing-table pricing-table-free">
                <div class="pricing-table-header">
                    <h2>Personal</h2>

                    <span class="pricing-table-price">
                        $5 <span>per month</span>
                    </span>
                </div>

                <ul class="pricing-table-list">
                    <li>Free setup</li>
                    <li>Custom sub-domain</li>
                    <li>Standard customer support</li>
                    <li>1GB file storage</li>
                    <li>1 database</li>
                    <li>Unlimited bandwidth</li>
                </ul>

                <button class="button-choose pure-button">Choose</button>
            </div>
        </div>

        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pricing-table pricing-table-biz pricing-table-selected">
                <div class="pricing-table-header">
                    <h2>Small Business</h2>

                    <span class="pricing-table-price">
                        $25 <span>per month</span>
                    </span>
                </div>

                <ul class="pricing-table-list">
                    <li>Free setup</li>
                    <li>Use your own domain</li>
                    <li>Standard customer support</li>
                    <li>10GB file storage</li>
                    <li>5 databases</li>
                    <li>Unlimited bandwidth</li>
                </ul>

                <button class="button-choose pure-button">Choose</button>
            </div>
        </div>

        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pricing-table pricing-table-enterprise">
                <div class="pricing-table-header">
                    <h2>Enterprise</h2>

                    <span class="pricing-table-price">
                        $45 <span>per month</span>
                    </span>
                </div>

                <ul class="pricing-table-list">
                    <li>Free setup</li>
                    <li>Use your own domain</li>
                    <li>Premium customer support</li>
                    <li>Unlimited file storage</li>
                    <li>25 databases</li>
                    <li>Unlimited bandwidth</li>
                </ul>

                <button class="button-choose pure-button">Choose</button>
            </div>
        </div>
    </div>

3. Setelah itu tambahkan beberapa baris kode css untuk membuatnya lebih menarik.

/*
 * -- PRICING TABLE WRAPPER --
 * This element wraps up all the pricing table elements
 */
 .pricing-tables,
 .information {
    max-width: 980px;
    margin: 0 auto;
 }
.pricing-tables {
    margin-bottom: 3.125em;
    text-align: center;
}

/*
 * -- PRICING TABLE  --
 * Every pricing table has the .pricing-table class
 */
.pricing-table {
    border: 1px solid #ddd;
    margin: 0 0.5em 2em;
    padding: 0 0 3em;
}

/*
 * -- PRICING TABLE HEADER COLORS --
 * Choose a different color based on the type of pricing table.
 */
.pricing-table-free .pricing-table-header {
    background: #519251;
}

.pricing-table-biz .pricing-table-header {
    background: #2c4985;
}

/*
 * -- PRICING TABLE HEADER --
 * By default, a header is black/white, and has some styles for its <h2> name.
 */
.pricing-table-header {
    background: #111;
    color: #fff;
}
    .pricing-table-header h2 {
        margin: 0;
        padding-top: 2em;
        font-size: 1em;
        font-weight: normal;

    }


/*
 * -- PRICING TABLE PRICE --
 * Styles for the price and the corresponding <span>per month</span>
 */
.pricing-table-price {
    font-size: 6em;
    margin: 0.2em 0 0;
    font-weight: 100;
}
    .pricing-table-price span {
        display: block;
        text-transform: uppercase;
        font-size: 0.2em;
        padding-bottom: 2em;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
        *color: #fff;
    }



/*
 * -- PRICING TABLE LIST --
 * Each pricing table has a <ul> which is denoted by the .pricing-table-list class
 */
.pricing-table-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}


/*
 * -- PRICING TABLE LIST ELEMENTS --
 * Styles for the individual list elements within each pricing table
 */
.pricing-table-list li {
    padding: 0.8em 0;
    background: #f7f7f7;
    border-bottom: 1px solid #e7e7e7;
}


/*
 * -- PRICING TABLE BUTTON --
 * Styles for the "Choose" button at the bottom of a pricing table.
 * This inherits from Pure Button.
 */
.button-choose {
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    border-radius: 2em;
    font-weight: bold;
    position: relative;
    bottom: -1.5em;
}

.information-head {
    color: black;
    font-weight: 500;
}

.footer {
    background: #111;
    color: #888;
    text-align: center;
}
    .footer a {
        color: #ddd;
    }



/*
 * -- TABLET MEDIA QUERIES --
 * On tablets, we want to slightly adjust the size of the banner
 * text and add some vertical space between the various pricing tables
 */
@media(min-width: 767px) {

    .banner-head {
        font-size: 4em;
    }
    .pricing-table {
        margin-bottom: 0;
    }

}

4. Kemudian simpan dan lihat hasilnya.

Tulisan yang ada pada tabel harga diatas bisa Anda ubah sesuai keinginan dan kebutuhan Anda, selain itu Anda juga bisa mengubah tampilannya sesuai dengan selera. Kelebihan dari tabel ini adalah menggunakan Grid Responsif dari Pure Css sehingga tampilannya responsif dengan berbagai perangkat mobile maupun desktop. Tabel harga seperti di atas tentu sangat cocok ginunakan pada situs yang menjuat produk, sehingga konsumen bisa tahu kelebihan, kekurangan dan harga suatu produk yang ditawarkan.