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 sang...
https://tutorialcarapintar.blogspot.com/2019/02/membuat-beautiful-table-responsive-with.html
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 menciptakan sebuah table responsive pribadi saja ikuti tutorial di blog mas tamvan ini.
Langsung saja, buat kalian yang ingin memasang table di blognya ikuti saja langkah langkahnya, sangat gampang tinggal tempel dan ganti beberapa kata saja.
Jangan lupa baca tutorial lainnya ya :)
Tutorial Blogger Lainnya :
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 karenanya n salam tamvan :)