Membuat Beautiful Table Responsive With CSS

Membuat Table Responsive With CSS Di Blog

Cara Memasang Table Responsive Di Blog Dengan CSS

Share table responsive dengan style yang sangat menarik untuk dipasang pada blog. Bagi kalian yang ingin membuat sebuah table responsive langsung saja ikuti tutorial di blog mas tamvan ini.

Langsung saja, buat kalian yang ingin memasang table di blognya ikuti saja langkah langkahnya, sangat mudah tinggal tempel dan ganti beberapa kata saja.
Jangan lupa baca tutorial lainnya ya :)

Tutorial Blogger Lainnya :

• Free Tools Untuk Parse Atau Konversi Html

• Auto Like Dan Follow Instagram Terbaru 2016 Work

• Cara Merubah Resolusi Foto Menjadi Lebih Besar

Nah untuk melihat tampilan responsive dari table ini, silahkan klik tombol button dibawah ini.

Tutorial Pemasangan Table Responsive Di Blog

• Login ke Blogger.com

• Masuk ke Tab Template-> Klik Edit HTML, Cari Code </head>

• Kalo udah ketemu, masukan css table responsive ini diatasnya

<style type='text/css'>
/*Table Responsive*/
.container th h1{font-weight:bold;font-size:1em;text-align:left;color:#185875}
.container td{font-weight:normal;font-size:1em;-webkit-box-shadow:0 2px 2px -2px #0E1119;-moz-box-shadow:0 2px 2px -2px #0E1119;box-shadow:0 2px 2px -2px #0E1119}
.container{text-align:left;overflow:hidden;width:80%;margin:0 auto;display:table;padding:0 0 8em 0}
.container td,.container th{padding-bottom:2%;padding-top:2%;padding-left:2%}
/* Background-color of the odd rows */
.container tr:nth-child(odd){background-color:#323C50}
/* Background-color of the even rows */
.container tr:nth-child(even){background-color:#2C3446}
.container th{background-color:#1F2739}
.container td:first-child{color:#FB667A}
.container tr:hover{background-color:#464A52;-webkit-box-shadow:0 6px 6px -6px #0E1119;-moz-box-shadow:0 6px 6px -6px #0E1119;box-shadow:0 6px 6px -6px #0E1119}
.container td:hover{background-color:#FFF842;color:#403E10;font-weight:bold;box-shadow:#7F7C21 -1px 1px,#7F7C21 -2px 2px,#7F7C21 -3px 3px,#7F7C21 -4px 4px,#7F7C21 -5px 5px,#7F7C21 -6px 6px;transform:translate3d(6px,-6px,0);transition-delay:0s;transition-duration:0.4s;transition-property:all;transition-timing-function:line}
@media (max-width:800px){.container td:nth-child(4),.container th:nth-child(4){display:none}}
</style>

• Sekarang Save Template.

• Untuk pemsangan HTMLnya Kalian Tinggal masuk ke postingan blog yang inigin di tambahkan table.

• Copy HTML dibawah ini dan masukan ke postingan, Tapi dalam posisi tab HTML bukan compose, Lihat gambar!!



<table class="container">
 <thead>
  <tr>
   <th><h1>Sites</h1></th>
   <th><h1>Views</h1></th>
   <th><h1>Clicks</h1></th>
   <th><h1>Average</h1></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Google</td>
   <td>9518</td>
   <td>6369</td>
   <td>01:32:50</td>
  </tr>
  <tr>
   <td>Twitter</td>
   <td>7326</td>
   <td>10437</td>
   <td>00:51:22</td>
  </tr>
  <tr>
   <td>Amazon</td>
   <td>4162</td>
   <td>5327</td>
   <td>00:24:34</td>
  </tr>
    <tr>
   <td>LinkedIn</td>
   <td>3654</td>
   <td>2961</td>
   <td>00:12:10</td>
  </tr>
    <tr>
   <td>CodePen</td>
   <td>2002</td>
   <td>4135</td>
   <td>00:46:19</td>
  </tr>
    <tr>
   <td>GitHub</td>
   <td>4623</td>
   <td>3486</td>
   <td>00:31:52</td>
  </tr>
 </tbody>
</table>

• Kalian tinggal mengganti isi dari tabel itu dengan data yang kalian inginkan

• Kalau sudah tinggal Save Postnya. dan lihat hasilnya n salam tamvan :)