logo blog

Membuat Beautiful Table Responsive With CSS

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

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Membuat Beautiful Table Responsive With CSS. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Membuat Beautiful Table Responsive With CSS. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

8 comments

Anonymous

gimana kalau mau tambah kolom nya 1 lagi gan Pliss fast ;(

Mas Tamvan

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

Tony Putra

mantap master makin lama makin joss tutorialnya

Mas Tamvan

Makasih atas kunjungannya :)

admin edisurs

Untuk merapatkan tinggi kotak-kotaknya gimana ya gan?

Mas Tamvan

Agan tinggal atur nilai pada css ini

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

admin edisurs

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

Mas Tamvan

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.

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon