Cara Menambahkan Tabel / Table Pada Website

Posted by in Tutorial, Tips & Trick, HTML .
Cara Menambahkan Tabel / Table Pada Website

Bagaimana cara menambahkan tabel harga pada website keren anda?

Sebelum menambahkan tabel atau sesuatu yang berhubungan dengan website, sebaiknya kita mengetahui  elemen-elemen yang ada dalam website itu sendiri, 

Tabel terdiri dari kode HTML, CSS dan terkadang membutuhkan Javascript (tergantung kebutuhan)

apa itu HTML dan apa itu CSS juga Javascript ? anda bisa membaca masing-masing uraiannya di link HTML, CSS, dan Javascript

Kali ini kita akan membuat tabel menggunakan text editor yang kita pakai yaitu Ckeditor dan menggunakan Twitter Bootstrap CSS framework,

mengapa kita menggunakan Bootstrap Framework CSS? karena mudah sekali digunakan dan tentunya responsive, nantinya anda hanya cukup mengenal nama / menghafalkan nama-nama class pada CSS bootstrap saja untuk membuat elemen-elemen website.

dengan bahan referensi yang bukan anda buat sendiri, melainkan hasil browsing referensi dari internet, anda bisa melihat banyak contoh-contoh tabel, misalnya di web http://bootsnipp.com/ atau contohnya di tautan berikut http://bootsnipp.com/snippets/featured/bootstrap-30-responsive-pricing-tables

Langkah Pertama - Editor

Klik Source pada text editor di Halaman yang ingin anda buat

 

 

 

 

 

fungsi klik Source pada text editor adalah untuk menambahkan / menulis tag HTML seperti <style> <script> <div> <p> dan lain sebagainya untuk selanjutnya akan di render (dibaca) oleh Browser untuk ditampilkan bukan sebagai kode melainkan tampilan yang readable dalam hal ini akan menampilkan table sesuai yang anda inginkan

Langkah Kedua - HTML

1. Tambahkan link kode berikut pada baris pertama untuk menggunakan Bootstrap CSS juga Font Icon

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" />

 

2. Lalu masukkan informasi tabel dengan kode-kode HTML yang anda dapatkan, tag-tag seperti <div> <table> <label> dan lain sebagainya, berikut contoh kode HTML untuk tabel

<div class="row">            
                <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                
                    <!-- PRICE ITEM -->
                    <div class="panel price panel-red">
                        <div class="panel-heading  text-center">
                        <h3>PRO PLAN</h3>
                        </div>
                        <div class="panel-body text-center">
                            <p class="lead" style="font-size:40px"><strong>$10 / month</strong></p>
                        </div>
                        <ul class="list-group list-group-flush text-center">
                            <li class="list-group-item"><i class="icon-ok text-danger"></i> Personal use</li>
                            <li class="list-group-item"><i class="icon-ok text-danger"></i> Unlimited projects</li>
                            <li class="list-group-item"><i class="icon-ok text-danger"></i> 27/7 support</li>
                        </ul>
                        <div class="panel-footer">
                            <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
                        </div>
                    </div>
                    <!-- /PRICE ITEM -->
                    
                    
                </div>
                
                <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                
                    <!-- PRICE ITEM -->
                    <div class="panel price panel-blue">
                        <div class="panel-heading arrow_box text-center">
                        <h3>DEV PLAN</h3>
                        </div>
                        <div class="panel-body text-center">
                            <p class="lead" style="font-size:40px"><strong>$20 / month</strong></p>
                        </div>
                        <ul class="list-group list-group-flush text-center">
                            <li class="list-group-item"><i class="icon-ok text-info"></i> Personal use</li>
                            <li class="list-group-item"><i class="icon-ok text-info"></i> Unlimited projects</li>
                            <li class="list-group-item"><i class="icon-ok text-info"></i> 27/7 support</li>
                        </ul>
                        <div class="panel-footer">
                            <a class="btn btn-lg btn-block btn-info" href="#">BUY NOW!</a>
                        </div>
                    </div>
                    <!-- /PRICE ITEM -->
                    
                    
                </div>
                
                <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                
                    <!-- PRICE ITEM -->
                    <div class="panel price panel-green">
                        <div class="panel-heading arrow_box text-center">
                        <h3>FREE PLAN</h3>
                        </div>
                        <div class="panel-body text-center">
                            <p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
                        </div>
                        <ul class="list-group list-group-flush text-center">
                            <li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
                            <li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
                            <li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
                        </ul>
                        <div class="panel-footer">
                            <a class="btn btn-lg btn-block btn-success" href="#">BUY NOW!</a>
                        </div>
                    </div>
                    <!-- /PRICE ITEM -->
                    
                    
                </div>
                
                <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                
                    <!-- PRICE ITEM -->
                    <div class="panel price panel-grey">
                        <div class="panel-heading arrow_box text-center">
                        <h3>FREE PLAN</h3>
                        </div>
                        <div class="panel-body text-center">
                            <p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
                        </div>
                        <ul class="list-group list-group-flush text-center">
                            <li class="list-group-item"><i class="icon-ok text-success"></i> Personal use</li>
                            <li class="list-group-item"><i class="icon-ok text-success"></i> Unlimited projects</li>
                            <li class="list-group-item"><i class="icon-ok text-success"></i> 27/7 support</li>
                        </ul>
                        <div class="panel-footer">
                            <a class="btn btn-lg btn-block btn-primary" href="#">BUY NOW!</a>
                        </div>
                    </div>
                    <!-- /PRICE ITEM -->

                </div>       
            </div>

 

Untuk mengaktifkan Button Action atau Tombol seperti misalnya BUY NOW pada contoh diatas,

silahkan isi pada isian href="" misalnya akan menuju ke tautan http://www.kagetweb.com/order-live, maka menjadi 

 <a class="btn btn-lg btn-block btn-danger" href="http://www.kagetweb.com/order-live">BUY NOW!</a>

Langkah Ketiga - CSS

Masukkan Styling untuk menambah warna, membesarkan font berdasarkan class-class pada kode HTML diatas

kode CSS pada HTML di buka dengan tag <style>  dan ditutup dengan tag </style>

<style>

        .panel.price,
        .panel.price>.panel-heading{
            border-radius:0px;
             -moz-transition: all .3s ease;
            -o-transition:  all .3s ease;
            -webkit-transition:  all .3s ease;
        }
        .panel.price:hover{
            box-shadow: 0px 0px 30px rgba(0,0,0, .2);
        }
        .panel.price:hover>.panel-heading{
            box-shadow: 0px 0px 30px rgba(0,0,0, .2) inset;
        }
        
                
        .panel.price>.panel-heading{
            box-shadow: 0px 5px 0px rgba(50,50,50, .2) inset;
            text-shadow:0px 3px 0px rgba(50,50,50, .6);
        }
            
        .price .list-group-item{
            border-bottom-:1px solid rgba(250,250,250, .5);
        }
        
        .panel.price .list-group-item:last-child {
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
        }
        .panel.price .list-group-item:first-child {
            border-top-right-radius: 0px;
            border-top-left-radius: 0px;
        }
        
        .price .panel-footer {
            color: #fff;
            border-bottom:0px;
            background-color:  rgba(0,0,0, .1);
            box-shadow: 0px 3px 0px rgba(0,0,0, .3);
        }
        
        
        .panel.price .btn{
            box-shadow: 0 -1px 0px rgba(50,50,50, .2) inset;
            border:0px;
        }
        
    /* green panel */
    
        
        .price.panel-green>.panel-heading {
            color: #fff;
            background-color: #57AC57;
            border-color: #71DF71;
            border-bottom: 1px solid #71DF71;
        }
        
            
        .price.panel-green>.panel-body {
            color: #fff;
            background-color: #65C965;
        }
                
        
        .price.panel-green>.panel-body .lead{
                text-shadow: 0px 3px 0px rgba(50,50,50, .3);
        }
        
        .price.panel-green .list-group-item {
            color: #333;
            background-color: rgba(50,50,50, .01);
            font-weight:600;
            text-shadow: 0px 1px 0px rgba(250,250,250, .75);
        }
        
        /* blue panel */
    
        
        .price.panel-blue>.panel-heading {
            color: #fff;
            background-color: #608BB4;
            border-color: #78AEE1;
            border-bottom: 1px solid #78AEE1;
        }
        
            
        .price.panel-blue>.panel-body {
            color: #fff;
            background-color: #73A3D4;
        }
                
        
        .price.panel-blue>.panel-body .lead{
                text-shadow: 0px 3px 0px rgba(50,50,50, .3);
        }
        
        .price.panel-blue .list-group-item {
            color: #333;
            background-color: rgba(50,50,50, .01);
            font-weight:600;
            text-shadow: 0px 1px 0px rgba(250,250,250, .75);
        }
        
        /* red price */
        
    
        .price.panel-red>.panel-heading {
            color: #fff;
            background-color: #D04E50;
            border-color: #FF6062;
            border-bottom: 1px solid #FF6062;
        }
        
            
        .price.panel-red>.panel-body {
            color: #fff;
            background-color: #EF5A5C;
        }
        
        
        
        
        .price.panel-red>.panel-body .lead{
                text-shadow: 0px 3px 0px rgba(50,50,50, .3);
        }
        
        .price.panel-red .list-group-item {
            color: #333;
            background-color: rgba(50,50,50, .01);
            font-weight:600;
            text-shadow: 0px 1px 0px rgba(250,250,250, .75);
        }
        
        /* grey price */
        
    
        .price.panel-grey>.panel-heading {
            color: #fff;
            background-color: #6D6D6D;
            border-color: #B7B7B7;
            border-bottom: 1px solid #B7B7B7;
        }
        
            
        .price.panel-grey>.panel-body {
            color: #fff;
            background-color: #808080;
        }
        

        
        .price.panel-grey>.panel-body .lead{
                text-shadow: 0px 3px 0px rgba(50,50,50, .3);
        }
        
        .price.panel-grey .list-group-item {
            color: #333;
            background-color: rgba(50,50,50, .01);
            font-weight:600;
            text-shadow: 0px 1px 0px rgba(250,250,250, .75);
        }
        
        /* white price */
        
    
        .price.panel-white>.panel-heading {
            color: #333;
            background-color: #f9f9f9;
            border-color: #ccc;
            border-bottom: 1px solid #ccc;
            text-shadow: 0px 2px 0px rgba(250,250,250, .7);
        }
        
        .panel.panel-white.price:hover>.panel-heading{
            box-shadow: 0px 0px 30px rgba(0,0,0, .05) inset;
        }
            
        .price.panel-white>.panel-body {
            color: #fff;
            background-color: #dfdfdf;
        }
                
        .price.panel-white>.panel-body .lead{
                text-shadow: 0px 2px 0px rgba(250,250,250, .8);
                color:#666;
        }
        
        .price:hover.panel-white>.panel-body .lead{
                text-shadow: 0px 2px 0px rgba(250,250,250, .9);
                color:#333;
        }
        
        .price.panel-white .list-group-item {
            color: #333;
            background-color: rgba(50,50,50, .01);
            font-weight:600;
            text-shadow: 0px 1px 0px rgba(250,250,250, .75);
        }

</style>

 

Untuk CSS, silahkan anda ubah-ubah sesuai keinginan anda, agar lebih memudahkan pengeditan CSS, silahkan memasukan kode CSS tersebut pada tab Custom Area pada menu PENGATURAN dan namun sebelumnya hilangkan tag <style> buka dan tutup </style> terlebih dahulu.

NOTE : Jika anda tidak menggunakan Bootstrap CSS, abaikan Langkah Kedua, sedangkan Langkah selanjutnya pada dasarnya sama.

Related Posts:

HTML Kustom Karakter

HTML Kustom Karakter, saat ini hampir tidak membutuhkan image untuk membangun sebuah website, seperti halnya ikonik karakter yang dapat digantikan dengan kode HTML

Cara mematikan atau men-disable deteksi otomatis format telephone pada safari

Cara mematikan atau men-disable deteksi otomatis format telephone pada iOS browser

Cara Memasang Google Maps Pada Website

Cara Memasang Google Maps Pada Website,Sebelum memasang / embed peta google map di website, ada beberapa langkah yang harus kamu lakukan, diantarnya adalah CREATE MAPS, menandai lokasi, mendapatkan koordinat dan mendapatkan embed code dari tempat yang su

Cara Menambahkan Widget Instagram Pada Website (update 2016)

Cara Menambahkan Widget Instagram Pada Website

Cara Menampilkan Video Pada Website

Cara Menampilkan Video Pada Website

Comments

Leave a Comment

Leave a Reply

Name: *
E-mail: * (Not Published)
Website: (Site url with http://)
Comment: *
Verification code: Submit