10 Tabel Style Keren di Blogger (pure CSS)Bobby Hura

Get This

proBlogiz

---

Apakah Anda sedang mencari bentuk tampilan tabel yang keren dan cantik? Disini Anda bisa temukan kumpulan 10 Tabel Style yang Keren dan Cantik tanpa menggunakan image/gambar atau 100% pure CSS. Desain Blog kali ini akan memberikan tutorial cara membuat tabel lebih menarik sehingga tidak perlu lagi menggunakan tabel standard yang kurang menarik dipandang.

Bentuk tabel dengan kostum CSS ini akan memberikan kesan tampilan profesional,sehingga sangat tepat digunakan untuk menampilkan daftar, membuat list, atau laporan statistik di setiap postingan Anda di Blog. Penambahan efek shadow, border radius, gradient color atau two color background benar-benar membuat table ini sangat menarik dipandang. Keren!!

Dibawah ini saya tampilkan 10 contoh tabel  kostum cantik dengan bermacam warna dan style serta kode CSS yang mudah dan valid, berikut pula kode HTML untuk pemasangannya di setiap postingan.

Anda juga bisa melihat DEMO LIVE 10 Tabel Style Keren ini dengan menggunakan CSS Generator

Membuat Tabel Sederhana Dengan CSS

Posted by B.Saputra Hura Posted on 3/19/2013 09:28:00 AM with 16 comments

Selamat pagi sobat blogger, setelah sebelumnya Kolom Tutorial™ membahas tentang pembuatan Contact Form ala Foxy Nah Kali ini ane mau mencoba share tentang bagaimana cara pembuatan sebuah tabel yang mirip-mirip kaya Microsoft Exel, ya siapa tau aja di anatara sobat blogger belum ada yang tau tutornya.

VIEW A DEMO

Untuk Tutorial cara penerapannya sebagai berikut :

1. Seperti biasa sobat Login ke akun Blogger sobat
2. Kalau mau di tambah di side bar tinggal Add Widget lalu kopas kode dibawah ini
3. Kalau mau di tempatkan di Postingan atau Halaman  sobat tinggal klik Buat Entri Baru kemudian klik   HTML jangan Compose dan KOPAS koding di bawah ini :Baru kemudian klik   HTML jangan Compose dan KOPAS koding di bawah ini :

    <style type="text/css">
   table {
       *border-collapse: collapse; /* IE7 and lower */
       border-spacing: 0;
       width: 100%; 
   }
   
   .bordered {
       border: solid #ccc 1px;
       -moz-border-radius: 6px;
       -webkit-border-radius: 6px;
       border-radius: 6px;
       -webkit-box-shadow: 0 1px 1px #ccc;
       -moz-box-shadow: 0 1px 1px #ccc;
       box-shadow: 0 1px 1px #ccc;     
   }
   
   .bordered tr:hover {
       background: #93F193;
       -o-transition: all 0.1s ease-in-out;
       -webkit-transition: all 0.1s ease-in-out;
       -moz-transition: all 0.1s ease-in-out;
       -ms-transition: all 0.1s ease-in-out;
       transition: all 0.1s ease-in-out; 
   } 
   
   .bordered td, .bordered th {
       border-left: 1px solid #ccc;
       border-top: 1px solid #ccc;
       padding: 10px;
       text-align: left; 
   }
   
   .bordered th {
       background-color: #dce9f9;
       background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
       background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
       background-image: -moz-linear-gradient(top, #ebf3fc, #88F188);
       background-image: -ms-linear-gradient(top, #ebf3fc, #08630E);
       background-image: -o-linear-gradient(top, #ebf3fc, #08630E);
       background-image: linear-gradient(top, #ebf3fc, #08630E);
       -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
       -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
       box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;     
       border-top: none;
       text-shadow: 0 1px 0 rgba(255,255,255,.5);
   }
   
   .bordered td:first-child, .bordered th:first-child {
       border-left: none;
   }
   
   .bordered th:first-child {
       -moz-border-radius: 6px 0 0 0;
       -webkit-border-radius: 6px 0 0 0;
       border-radius: 6px 0 0 0;
   }
   
   .bordered th:last-child {
       -moz-border-radius: 0 6px 0 0;
       -webkit-border-radius: 0 6px 0 0;
       border-radius: 0 6px 0 0;
   }
   
   .bordered th:only-child{
       -moz-border-radius: 6px 6px 0 0;
       -webkit-border-radius: 6px 6px 0 0;
       border-radius: 6px 6px 0 0;
   }
   
   .bordered tr:last-child td:first-child {
       -moz-border-radius: 0 0 0 6px;
       -webkit-border-radius: 0 0 0 6px;
       border-radius: 0 0 0 6px;
   }
   
   .bordered tr:last-child td:last-child {
       -moz-border-radius: 0 0 6px 0;
       -webkit-border-radius: 0 0 6px 0;
       border-radius: 0 0 6px 0;
   }
   </style>
   
   <table class="bordered">
   <thead><tr>
    
   <th> Judul Tabel 1 </th><th> Judul Tabel 2 </th><th> Judul Tabel 3 </th></tr></thead><tr>
   
   <td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
   
   <td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
   
   <td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
   <td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
   <td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
   <td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
   <td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
   <td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
   <td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
   <td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr>
   </table>