Membuat Beautiful Table Responsive With CSS

table responsive

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 :)




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 responsive
    
    <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 :)
8 komentar
  1. gimana kalau mau tambah kolom nya 1 lagi gan Pliss fast ;(

    ReplyDelete
    Replies
    1. Maaf gan saya on malem :3
      Tnggal tambahin ini.
      <th><h1>Isinya</h1></th>
      di bawah
      <th><h1>Average</h1></th>

      Terus Tan=mbahin ini

      <tr>
      <td>Google</td>
      <td>9518</td>
      <td>6369</td>
      <td>01:32:50</td>
      </tr>

      di atas
      </tbody>
      Semoga bermanfaat

      Delete
  2. mantap master makin lama makin joss tutorialnya

    ReplyDelete
  3. Untuk merapatkan tinggi kotak-kotaknya gimana ya gan?

    ReplyDelete
    Replies
    1. Agan tinggal atur nilai pada css ini

      .container td, .container th {
      padding-bottom: 2%;
      padding-top: 2%;
      padding-left: 2%;
      }

      Delete
    2. saya udah coba ubah koq gk ngaruh ya gan, apa peletakan css gw yg salah

      Delete
    3. Munkin cssnya ada yg dobel.
      Coba tambahin css ini aja.
      .container td, .container th {
      padding-bottom: 5% !important;
      padding-top: 5% !important;
      padding-left: 2% !important;
      }

      Sesuaikan nilainya.

      Delete