Kali isi saya ingin berbagi cara membuat TABEL, sebenernya saya juga bingung mau memberi nama apa pada TABEL yang sebenernya iseng saya buat. TABEL ini sebenernya terinspirasi setelah saya melihat sebuah TABEL keterangan pada sebuat website jual Template.
Lalu saya mencoba membuatnya dengan versi yang sangat sederhana agar mudah diterapkan oleh Sobat Blogger semuanya. Sebenernya TABEL ini bisa Sobat aplikasikan sesuai kebutuhan dan tidak harus seperti apa yang saya buat. Untuk lebih jelasnya silahkan lihat demo dibawah ini
Dan jika Sobat ingin menerapkan, silahkan ikuti tutorial dibawah ini :
1. Silahkan simpan kode dibawah ini setelah kode <style> dan atau <style type='text/css'>
/* Demo Tabel */
#main .dgz-tabel ul{margin:5px 0;list-style:none;background:#FAFAFA;border:1px solid #FDD761;padding:3px}
#main .dgz-tabel ul h3{position:relative;margin:0;background:#FDD761;color:#555;font:normal 700 16px sans-serif;padding:15px;overflow:hidden}
#main .box_content{text-align:justify;padding:15px;background:#fff;color:#595959;margin:1px;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}
#main .dgz-tabel ul li{position:relative;margin:0 0 5px;padding:0 5px;line-height:25px;color:#1B1B1B;font-size:13px;font-weight:600;overflow:hidden}
#main .dgz-tabel ul li b{position:relative;font-weight:600;background:#FDD761;color:#444;line-height:25px;font-size:18px;display:block;padding:5px 10px;margin-right:6px;float:left;min-width:20px;border-right:2px solid #FAFAFA;overflow:hidden;text-align:center;white-space:nowrap;margin-left:-5px}
#main .dgz-tabel ul li a{position:absolute;font-weight:300;color:#444;line-height:25px;font-size:18px;padding:5px 10px;overflow:hidden;width:100%;background:#EEEFF0}
@media (max-width: 640px){
#main .box_content{position:relative;float:none;padding:5px;width:100%;overflow:hidden;}
#main .dgz-tabel ul li{position:relative;float:none;width:100%;overflow:hidden;}
#main .dgz-tabel ul li b,#main .dgz-tabel ul li strong{display:inline-block;font-size:15px;float:none;width:15%}
#main .dgz-tabel ul li a{display:inline-block;float:none;width:85%;font-size:15px;}
}<div class="dgz-tabel">
<ul><h3>FEATURED</h3>
<div class="box_content">
<li><b>1</b><a href="Link Tester" rel="nofollow" target="_blank" title="Responsive">Responsive</a> </li>
<li><b>2</b><a href="Link Tester" rel="nofollow" target="_blank" title="Google Testing Tool Validator">Google Testing Tool Validator</a> </li>
<li><b>3</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Mobile Friendgz-tabely">Mobile Friendgz-tabely</a> </li>
<li><b>4</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Custom 404 Page">Custom 404 Page</a> </li>
<li><b>5</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Fast Loading">Fast Loading</a> </li>
<li><b>6</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Seo Friendgz-tabely">Seo Friendgz-tabely</a> </li>
<li><b>7</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Ads Ready">Ads Ready</a> </li>
<li><b>8</b> <a href="Link Tester" rel="nofollow" target="_blank" title="HTML5 and CSS3">HTML5 and CSS3</a> </li>
<li><b>9</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Social Sharing">Social Sharing</a> </li>
<li><b>10</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Clear Design">Clear Design</a> </li>
</ul>
</div>
</div>Catatan :
Ganti tulisan yang saya tandai Link Tester dengan link tester milik sobat
Selesai...mudah bukan? Semoga bermanfaat dan jangan lupa share ya Sob !!!!