Cara Membuat Tabel Dihalaman dan Postingan Blog

Berikut ini kode HTML dan CSS untuk membuat tabel dihalaman/page dan postingan/post blog bersama Ngoodee (Ngoleksi Code), silakan copas kode di bawan ini

CSS TABEL

Langkah Pertama

Cara pemasangannya masuk di menu Theme Edit HTML Copy  kode  CSS dibawah ini  dan pastekan tepat diatas atau sebelum  kode i]]></b:skin>   selanjutnya  jangan lupa Simpan/Save theme.

/* CSS TABLE */ .slide { position: absolute; z-index: -1; display: block; margin: -50px 0 0 10px; width: 180px; height: 40px; background: #444; color: #fff; text-align: center; font: 12px/45px Helvetica, Verdana, sans-serif; -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; transition: margin 0.5s ease; } .dlbutton:hover .bottom { margin: -10px 0 0 10px; } .dlbutton:hover .top { margin: -80px 0 0 10px; line-height: 35px; } .dlbutton a:active { background: #004D40; background: -moz-linear-gradient(top, #00695C 36%, #0e6578 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00695C), color-stop(100%,#0e6578)); background: -webkit-linear-gradient(top, #00695C 36%,#0e6578 100%); background: -o-linear-gradient(top, #00695C 36%,#0e6578 100%); background: -ms-linear-gradient(top, #00695C 36%,#0e6578 100%); background: linear-gradient(top, #4DB6AC 36%,#0e6578 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00695C', endColorstr='black',GradientType=0 ); } .dlbutton:active .bottom { margin: -20px 0 0 10px; } .dlbutton:active .top { margin: -70px 0 0 10px; } table { Margin:0 auto; width: 100%; border-collapse: collapse; box-shadow: 5px 5px 10px #358ac4; } tbody { color: #000000; } table th, table td { padding: 5px 10px; border: 2px solid #2e86c2; } table tr { text-align: center; font: normal 12px Tahoma, Geneva, sans-serif; background: #FFFFFF; } table td { -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; transition: all 0.7s ease-in-out 0s; } table td:nth-child(2n+0) { text-align: justify; background: #FFFFFF; } table td:hover, table td:nth-child(2n+0):hover { background: #87CEFA; } table th { background: #fe313e; color: #FFFFFF; text-shadow: 1px 1px 0 #00000; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 100px rgba(0, 0, 0, 0.15) inset; font: bold 14px Arial, Helvetica, sans-serif; }

Keterangan : Untuk pengaturan Warna, font, border , background dan lainnya silakan atur sesuai keinginan .

HTML TABEL

Langkah Kedua

Cara penggunaanya masuk ke mode HTML halaman/Page atau Postingan/Post  yang akan kita buat selanjutnya Copy  kode  HTML dibawah ini .

<center> <p><b> CARA MEMBUAT TABEL DI POSTINGAN BLOG</b> <i><b>"BERSAMA NGOODEE" </b> <table> <tbody> <tr> <th><span style="vertical-align: inherit;"><span style="font-family: Century Gothic; vertical-align: inherit;">NO.</span></span></th> <th><span style="font-family: Century Gothic;">URAIAN </span></th> <th><span style="font-family: Century Gothic;">KETERANGAN</span></th> </tr> <tr> <td style="text-align: center;"><span style="font-family: Century Gothic;">1.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Masukan uraian disini</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Masukan keterangan disini</span></td> </tr> <tr> <td style="text-align: center;"><span style="font-family: Century Gothic;">2.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> </tr> <tr> <td style="text-align: center;"><span style="font-family: Century Gothic;">3.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> </tr> <tr> <td style="text-align: center;"><span style="font-family: Century Gothic;">4.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> </tr> <tr> <td style="text-align: center;"><span style="font-family: Century Gothic;">5.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> </tr> <tr> <td style="text-align: center;"><span style="font-family: Century Gothic;">6.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> </tr> <tr> <td style="text-align: center;"><span style="font-family: Century Gothic;">7.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> </tr> <tr> <td style="text-align: center;"><span style="font-family: Century Gothic;">8.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> </tr> <tr> <td style="text-align: center;"><span style="font-family: Century Gothic;">9.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> </tr> <tr> <td style="text-align: center;"><span style="font-family: Century Gothic;">10.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">Dst.</span></td> </tr> <tr> <td style="text-align: center;"><span style="font-family: Century Gothic;">dst.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">dst.</span></td> <td style="text-align: justify;"><span style="font-family: Century Gothic;">dst.</span></td> </tr> </tbody> </table>

Keterangan : Untuk pengaturan Tabel  Nomor, Uraian, dan Keterangan dan lainnya silakan atur sesuai keinginan , selamat mencoba !!! semoga bermanfaat.

Untuk mendapatkan kode lainnya, silahkan buka: Sitemap

Artikel Terkait