Tutorial Membuat Tabel HTML dan CSS Keren

Tutorial Membuat Tabel HTML dan CSS Keren - Pada tutorial kita kali ini saya akan berbagi Tutorial Membuat Tabel HTML dan CSS Keren, pada dasarnya tabel digunakan di dalam sebuah website bertujuan untuk membuat struktur text menjadi lebih tersusun rapi.

Banyak sekali jenis Tabel yang bisa digunakan di dalam sebuah website, namun kali ini saya akan mencoba memberikan tutorial membuat tabel jenis "Pricing Table", tabel jenis ini biasanya digunakan di sebuah website penjualan atau pendaftaran prabayar.

Gambar 0.1

Tabel yang akan kita buat kali ini kurang lebih akan tampak seperti pada Gambar 0.1, saya tegaskan disini bahwa tutorial kali ini saya hanya akan membagikan tutorial berbentuk style, sehingga tabel ini belum terkoneksi ke dalam database.

Untuk dari itu silahkan anda pantau terus blog Rizki Design ini untuk mendapatkan informasi-informasi terbarunya.

Tutorial Membuat Tabel HTML dan CSS Keren

Langkah pertama dalam pembuatan tutorial kita kali ini adalah membuat 2 file dengan format HTML dan CSS, kenapa saya hanya menggunakan HTML dan CSS saja, kenapa tidak menggunakan JavaScript atau jQuery, karena saya ingin membuat sebuah tabel yang ringan, artinya jika menggunakan HTML dan CSS saja sudah cukup kenapa harus ditambah dengan JavaScript atau jQuery yang bisa saja membebani speed sebuah website.

Disini saya sudah menyiapkan 2 file dengan format Index.html dan Style.css, kedua file ini saya simpan di dalam satu folder, supaya mudah saat memanggil CSS dari HTML.

Gambar 0.2

Text Editor yang saya gunakan adalah Sublime Text v.3.

Langkah selanjutnya adalah memasukan kode HTML di bawah ini ke dalam file Index.html, dan jangan lupa untuk save filenya.

<link rel="stylesheet" type="text/css" href="style.css">
<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>Enterprise<span>$59</span></h3>
        <a class="signup" href="">Sign up</a>         
        <ul>
            <li><b>10GB</b> Disk Space</li>
            <li><b>100GB</b> Monthly Bandwidth</li>
            <li><b>20</b> Email Accounts</li>
   <li><b>Unlimited</b> subdomains</li>   
        </ul> 
    </div>
    <div class="plan" id="most-popular">
        <h3>Professional<span>$29</span></h3>
        <a class="signup" href="">Sign up</a>        
        <ul>
            <li><b>5GB</b> Disk Space</li>
            <li><b>50GB</b> Monthly Bandwidth</li>
            <li><b>10</b> Email Accounts</li>
   <li><b>Unlimited</b> subdomains</li>   
        </ul>    
    </div>
    <div class="plan">
        <h3>Standard<span>$17</span></h3>
  <a class="signup" href="">Sign up</a>
        <ul>
            <li><b>3GB</b> Disk Space</li>
            <li><b>25GB</b> Monthly Bandwidth</li>
            <li><b>5</b> Email Accounts</li>
   <li><b>Unlimited</b> subdomains</li>   
        </ul>
    </div>
    <div class="plan">
        <h3>Basic<span>$9</span></h3>
        <a class="signup" href="">Sign up</a>  
        <ul>
            <li><b>1GB</b> Disk Space</li>
            <li><b>10GB</b> Monthly Bandwidth</li>
            <li><b>2</b> Email Accounts</li>
   <li><b>Unlimited</b> subdomains</li>   
        </ul>
    </div>  
</div>

Setelah membuat file HTML, selanjutnya masukan kode CSS di bawah ini ke dalam file Style.css, dan jangan lupa untuk save filenya juga.

body{
  background: #303030;
}

#pricing-table {
  margin: 100px auto;
  text-align: center;
  width: 892px; /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
  font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
  text-shadow: 0 1px rgba(255,255,255,.8);        
  background: #fff;      
  border: 1px solid #ddd;
  color: #333;
  padding: 20px;
  width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
  float: left;
  position: relative;
}

#pricing-table #most-popular {
  z-index: 2;
  top: -13px;
  border-width: 3px;
  padding: 30px 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
  -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
  box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);    
}

#pricing-table .plan:nth-child(1) {
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;        
}

#pricing-table .plan:nth-child(4) {
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;        
}

/* --------------- */ 

#pricing-table h3 {
  font-size: 20px;
  font-weight: normal;
  padding: 20px;
  margin: -20px -20px 50px -20px;
  background-color: #eee;
  background-image: -moz-linear-gradient(#fff,#eee);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
  background-image: -webkit-linear-gradient(#fff, #eee);
  background-image: -o-linear-gradient(#fff, #eee);
  background-image: -ms-linear-gradient(#fff, #eee);
  background-image: linear-gradient(#fff, #eee);
}

#pricing-table #most-popular h3 {
  background-color: #ddd;
  background-image: -moz-linear-gradient(#eee,#ddd);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));    
  background-image: -webkit-linear-gradient(#eee, #ddd);
  background-image: -o-linear-gradient(#eee, #ddd);
  background-image: -ms-linear-gradient(#eee, #ddd);
  background-image: linear-gradient(#eee, #ddd);
  margin-top: -30px;
  padding-top: 30px;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;     
}

#pricing-table .plan:nth-child(1) h3 {
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  border-radius: 5px 0 0 0;       
}

#pricing-table .plan:nth-child(4) h3 {
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  border-radius: 0 5px 0 0;       
} 

#pricing-table h3 span {
  display: block;
  font: bold 25px/100px Georgia, Serif;
  color: #777;
  background: #fff;
  border: 5px solid #fff;
  height: 100px;
  width: 100px;
  margin: 10px auto -65px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
  -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
  box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}

/* --------------- */

#pricing-table ul {
  margin: 20px 0 0 0;
  padding: 0;
  list-style: none;
}

#pricing-table li {
  border-top: 1px solid #ddd;
  padding: 10px 0;
}

/* --------------- */
  
#pricing-table .signup {
  position: relative;
  padding: 8px 20px;
  margin: 20px 0 0 0;  
  color: #fff;
  font: bold 14px Arial, Helvetica;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;       
  background-color: #72ce3f;
  background-image: -moz-linear-gradient(#72ce3f, #62bc30);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));    
  background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
  background-image: -o-linear-gradient(#72ce3f, #62bc30);
  background-image: -ms-linear-gradient(#72ce3f, #62bc30);
  background-image: linear-gradient(#72ce3f, #62bc30);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;     
  text-shadow: 0 1px 0 rgba(0,0,0,.3);        
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}

#pricing-table .signup:hover {
  background-color: #62bc30;
  background-image: -moz-linear-gradient(#62bc30, #72ce3f);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));      
  background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
  background-image: -o-linear-gradient(#62bc30, #72ce3f);
  background-image: -ms-linear-gradient(#62bc30, #72ce3f);
  background-image: linear-gradient(#62bc30, #72ce3f); 
}

#pricing-table .signup:active, #pricing-table .signup:focus {
  background: #62bc30;       
  top: 2px;
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
  box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; 
}

/* --------------- */

.clear:before, .clear:after {
  content:"";
  display:table
}

.clear:after {
  clear:both
}

.clear {
  zoom:1
}

Kode HTML dan CSS sudah kita pasang, langkah selanjutnya silahkan anda cek di Browser kesayangan anda.

Untuk melihat demonya langsung, anda bisa menekan tombol di atas.

Note: Jika artikel ini menurut anda menarik, tidak ada salahnya bukan jika anda bersedia untuk membagikan artikel ini kepada teman-teman anda, supaya mereka juga tau cara membuat tabel keren hanya dengan HTML dan CSS