Cara Membuat Tabel Spesifikasi Di Blog Dengan Mudah

Apa sih gunanya tabel spesifikasi ini banyak sekali kegunaannya khususnya orang yang memiliki artikel blog tentang download template dan membahas spesifikasi handphone dengan adanya tabel ini akan membuat artikel semakin rapi dan enak dilihat dan para pembaca akan mudah mengenali spesifikasi template atau pun handphone tersebut disini saya akan memberikan 3 style tabel spesifikasi yang tentunya keren keren dan kece kece. 

Yuk silakan simak step step nya dibawah ini.

Style pertama

Pertama kalian buka dashboard blog kalian setelah itu silakan kalian kemenu edit tema dan pilih yang edit html

Silakan kalian cari kode ]]></b:skin> jika sudah ketemu silakan kalian copy kode dibawah ini

/* TABEL SPESIFIKASI RESPONSIF */
.post-body table {width:100%;}
.post-body table td, .post-body table caption{border:1px solid #F1F1F1;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #e6e6e6;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #eee;}
.post-body th{font-weight:700;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;}
.post-body th{background:#059FD8; color:#181818;}
.post-body th:hover{background:#2AA4D1;}
.post-body td a{color:#444;}
.post-body td a:hover{color:#FEFEFE;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}

Dan silakan kalian pastekan tepat diatas ]]></b:skin> kemudian simpan template

Selanjutnya kalian copy code dibawah dan pastekan dalam artikel dalam mode html bukan mede compose.

<table class="full">
<tbody>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">
Samsung Galaxy Phone Specification</span></th></tr>
</tbody>
<tbody>
<td>Network</td><td>GSM / HSPA / LTE</td></tr>
<tr><td>2G bands</td><td>GSM 850 / 900 / 1800 / 1900 - SIM 1 &amp; SIM 2</td></tr>
<tr><td>3G bands</td><td>HSDPA 850 / 900 / 1900 / 2100</td></tr><tr><td>4G bands</td><td>LTE band 1(2100), 3(1800), 7(2600), 38(2600), 39(1900), 40(2300), 41(2500) - SM-J7008</td></tr>
<tr><td>Speed</td><td>HSPA 21.1/5.76 Mbps</td></tr>
<tr><td>GPRS</td><td>Yes</td></tr><tr><td>EDGE</td><td>Yes</td></tr>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">OS And Hardware</span></th></tr>
<tr><td>OS</td><td>Android OS, v5.1.1 (Lollipop) || Custom UI</td></tr>
<tr><td>Processor</td><td><span style="text-align: justify;">Quad-core 1.5 GHz Cortex-A53</span></td></tr>
<tr><td>Chipset</td><td>Qualcomm MSM8916 Snapdragon 410</td></tr>
<tr><td>GPU</td><td>Adreno 306</td></tr>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Body</span></th></tr>
<tr><td>Dimensions</td><td>134.5 x 65.2 x 7.3 mm (5.30 x 2.57 x 0.29 in)</td></tr>
<tr><td>Weight</td><td>132 g (4.66 oz)</td></tr>
<tr><td>Colors</td><td>White, Black, Gold</td></tr>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Display</span></th></tr>
<tr><td>Type</td><td>Super AMOLED capacitive touchscreen, 16M colors</td></tr>
<tr><td>Screen Size</td><td>4.7 inches (~69.4% screen-to-body ratio)</td></tr>
<tr><td>Resolution</td><td>720 x 1280 pixels (~312 ppi pixel density)</td></tr>
<tr><td>Multitouch</td><td>Yes</td></tr>
<tr><td>Protection</td><td>Corning Gorilla Glass 4</td></tr>
<tr><td>Sensors</td><td>Accelerometer, Proximity, Compass</td></tr>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Memory</span></th></tr>
<tr bgcolor="#ffffff" class="config_table"><td>Card slot</td><td>microSD, up to 128 GB</td></tr>
<tr bgcolor="#FFFFFF" class="config_table"><td>Internal</td><td>16 GB</td></tr>
<tr bgcolor="#ffffff" class="config_table"><td>RAM</td><td>1.5 GB</td></tr>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Camera</span></th></tr>
<tr><td>Primary</td><td>13 MP, 4128 x 3096 pixels, autofocus, LED flash</td></tr>
<tr><td>Features</td><td>Geo-tagging, touch focus, face detection, panorama</td></tr>
<tr><td>Video</td><td>1080p@30fps</td></tr>
<tr><td>Secondary</td><td>5 MP</td></tr>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Multimedia</span></th></tr>
<tr><td>Music play</td><td>Yes</td></tr>
<tr><td>Radio</td><td>FM Radio</td></tr>
<tr><td>Games</td><td>Yes</td></tr>
<tr><td>Alert types</td><td>Vibration; MP3, WAV ringtones</td></tr>
<tr bgcolor="#ffffff" class="config_table"><td>Loudspeaker</td><td>Yes</td></tr>
<tr bgcolor="#ffffff" class="config_table"><td>3.5mm jack</td><td>Yes</td></tr>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Battery and Power</span></th></tr>
<tr><td>Type</td><td>Removable Li-Ion 3000 mAh battery</td></tr>
<tr><td>Stand-by</td><td>42 Hours</td></tr>
<tr><td>Talk time</td><td>12 Hours</td></tr>
<tr bgcolor="#ffffff" class="config_table"></tr>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Releasing Date</span></th></tr>
<tr><td>Announced</td><td>2015, December</td></tr>
<tr><td>Status</td><td>Releasing on 2015, December </td></tr>
<tr bgcolor="#ffffff" class="config_table"></tr>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Expected Price</span></th></tr>
<tr><td>US Dollor</td><td>$200</td></tr>
<tr><td>Bangladeshi Taka</td><td>BDT15,000</td></tr>
<tr><td>Indian Rs.</td><td>Rs. 13,000</td></tr>
</tbody></table>

Style kedua

Untuk style kedua ini kalian lakukan seperti langkah langkah pertama kalian hanya menggantikan kode css dan html nya saja

Kode css

/* Post Table Mampirnesia */ .post-body table{width:100%;max-width:auto;border-radius:3px;overflow:hidden} .post-body table td,.post-body table caption{border:0;padding:12px 10px;text-align:left;vertical-align:top;color:#57606f;font-size:.9rem;font-weight:700} .post-body table td:first-child{border-right:0} .post-body table th{background:#4B77BE;color:#fff;border:0;padding:12px 20px;text-align:left;vertical-align:top;font-size:16px;font-weight:700} .post-body table tr th:hover{background:#1F3A93} .post-body table.tr-caption-container{border:0;margin:0} .post-body table caption{border:none;font-style:italic} .post-body td,.post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:0} .post-body td a{background:#4B77BE;color:#fff;padding:3px 10px;font-size:70%;float:right;display:inline-block;border-radius:3px;text-transform:uppercase} .post-body td a[target="_blank"]:after{margin-left:5px} .post-body table.tr-caption-container td{border:0;padding:0;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#57606f} .post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto} .post-body table tr:nth-of-type(even) td{background-color:#fafafa} .post-body table tr:nth-of-type(odd) td{background-color:#f5f5f5} .post-body table tr td:nth-of-type(even){border-left:1px solid rgba(0,0,0,0.03)} .post-body table tr th:nth-of-type(even){border-left:1px solid rgba(255,255,255,0.03)} .post-body li{list-style-type:square} .post-body td.tr-caption{background:#465158!important;color:#fff!important;font-size:85%;padding:10px!important} .sr {visibility:hidden;width:0;height:0;} .clear{clear:both} html{-webkit-font-smoothing:antialiased} ::selection {background:#f33846;color:#fff;text-shadow:none} .post-body ::selection {background:#f33846;color:#fff} h1.post-title.entry-title,h2.post-title.entry-title{background:#fff;color:#000;padding:0 20px;font-size:1r;margin:20px;height:42px;line-height:42px;letter-spacing:1px;border-radius:3px;text-align:center} .post-body td a{background:#4B77BE;color:#fff;padding:0 12px;font-size:80%;float:right;display:inline-block;border-radius:3px;font-weight:700;text-transform:lowercase} .post-body td a:hover {background:#c4655b;color:#fff;} .post-body td a[target="_blank"]:after {margin-left:12px;} .post-body .addthis_inline_share_toolbox td{background:transparent;border-color:rgba(0,0,0,0.05);margin:0;line-height:normal} .post-body .addthis_inline_share_toolbox table{margin:0 0 10px 0} .post-body .at4-jumboshare .at4-count-container {border-right:1px solid rgba(0,0,0,0.05);} .tab-padding {padding:20px}

Dan ini kode html

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr> <th>Features</th><th>Availability</th></tr> <tr> <td>Responsive</td> <td>True <a href="http://www.responsinator.com/?url=https%3A%2F%2Findzign.blogspot.com%2F" rel="nofollow noopener" target="_blank">Cek</a></td> </tr> <tr> <td>Mobile Friendly</td> <td>True <a href="https://search.google.com/test/mobile-friendly?id=NZfkzdB-SJSm2pp7LlszOw" rel="nofollow noopener" target="_blank">Cek</a></td> </tr> <tr> <td>Google Testing Tool Validator (Index)</td> <td>True <a href="https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Findzign.blogspot.com%2F" rel="nofollow noopener" target="_blank">Cek</a></td> </tr> <tr> <td>Google Testing Tool Validator (Item)</td> <td>True <a href="https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Findzign.blogspot.com%2F2018%2F08%2Fkenali-karakter-diri-lewat-tulisan.html" rel="nofollow noopener" target="_blank">Cek</a></td> </tr> <tr> <td>SEO Friendly</td> <td>True</td> </tr> <tr> <td>Personal Blog</td> <td>True</td> </tr> <tr> <td>2 Column</td> <td>True</td> </tr> <tr> <td>Top Navigation</td> <td>True</td> </tr> <tr> <td>Breadcrumbs</td> <td>True</td> </tr> <tr> <td>2 Option Search Box</td> <td>True</td> </tr> <tr> <td>Back to Top Button</td> <td>True</td> </tr> <tr> <td>Footer Menu</td> <td>True</td> </tr> <tr> <td>ShareThis Share Button</td> <td>True</td> </tr> <tr> <td>Featured Recent Post</td> <td>Pro Version</td> </tr> <tr> <td>2 Option Comment System</td> <td>Pro Version</td> </tr> <tr> <td>Fast Version</td> <td>Pro Version</td> </tr> <tr> <td>Newsletter Widget</td> <td>Pro Version</td> </tr> <tr> <td>Related Post</td> <td>Pro Version</td> </tr> <tr> <td>Sticky Sidebar</td> <td>Pro Version</td> </tr> <tr> <td>Image Lightbox</td> <td>Pro Version</td> </tr> <tr> <td>Sitemap Widget</td> <td>Pro Version</td> </tr> <tr> <td>Contact Form Widget</td> <td>Pro Version</td> </tr> <tr> <td>Fixed Menu on Mobile</td> <td>Pro Version</td> </tr> <tr> <td>Shortcodes</td> <td>Pro Version</td> </tr> </tbody></table>

Style ke tiga 



Untuk style ke tiga ini lakukan cara yang sama dengan style pertama dan kedua

Kode css

/* CSS Post Table */ table{border-collapse:collapse;border-spacing:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:1px solid #e9e9e9;border-right:1px solid #e9e9e9} .post-body table td{border:1px solid #e9e9e9;border-left:none;padding:10px;text-align:center;vertical-align:top;} .post-body table th {padding:15px 8px!important;text-align:center;vertical-align:top;color:#fff;} .post-body td, .post-body th{vertical-align:top;text-align:left;padding:3px 5px;} .post-body th{background:#fff;font-weight:bold;text-transform:capitalize;font-size:95%;} table {max-width:100%;width:100%;margin:1.5em auto;} table.section-columns td.first.columns-cell{border-left:none} table.section-columns{border:none;table-layout:fixed;width:100%;position:relative} table.columns-2 td.columns-cell{width:50%} table.columns-3 td.columns-cell{width:50%} table.columns-4 td.columns-cell{width:30%} table.section-columns td.columns-cell{vertical-align:top} table.tr-caption-container{padding:4px;margin-bottom:.5em} td.tr-caption{font-size:80%} .post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important} .post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important} .services_list{text-align:left !important} .services{background:#31333a!important;width:28%;overflow:hidden;text-align:center!important} .free_version,.premi_version,.theme_instal{background:#1dc087;width:22%;overflow:hidden;text-align:center!important} .premi_version{background:#10a15b !important} .free_version{background:#ec472c !important} .post-body i.fa-check,.post-body i.fa-times,.post-body i.fa-minus{height:27px;width:27px;line-height:27px;text-align:center;border-radius:99em;color:#fff} .post-body i.fa-check{background:#10a15b} .post-body i.fa-times{background:#ec472c} .post-body i.fa-minus{background:#ffbd2e} .price_wrap{position:relative;margin:7px auto 0;font-family:'Oswald', Arial;font-weight:normal!important} .price_wrap sup{font-size:15px!important;font-weight:normal!important} .price_wrap .rupiah{font-weight:bold!important;font-size:13px!important} .price_wrap b{font-size:35px} .price_wrap .rupiah{color:#888} /* Button */ a.down_but,span.down_but{text-decoration:none;color:#fff!important;line-height:1.3em!important;} a.down_but .fa,span.down_but .fa{display:block;width:100%;overflow:hidden;position:relative} .down_but{text-decoration:none;color:#fff;display:inline-block;font-size:12.5px;font-weight:normal;padding:8px 5px;text-align:center;margin:2px auto 7px;cursor:pointer;display:block} .down_but{background:#10a15b;border:1px solid #0a894c;} a.down_but{background:#ec472c;border:1px solid #c63720;} .down_but i{font-size:25px!important;margin-bottom:3px!important} a.no_but,.no_but{cursor:not-allowed;background:#aaa!important;border-color:#999!important}

Kode html

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr><th class="services">Notes</th><th class="free_version">Free Version</th><th class="premi_version">Paid Version</th></tr> <tr><td class="services_list">Remove Footer Credits:</td><td><i class="fa fa-times"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list">No Encrypted Scripts:</td><td><i class="fa fa-check fa-6"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list">Lifetime Premium Support:</td><td><i class="fa fa-times"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list">For Unlimited Domains:</td><td><i class="fa fa-check fa-6"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list">Regular Template Updates:</td><td><i class="fa fa-times"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list">Get Premium Support:</td><td><i class="fa fa-times"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list"></td><td><div class="price_wrap" id="buy_premium"> <b>^$0</b><span class="rupiah">/ Rp. 0,-</span> <br /> <div class="toggle_price"> <span class="down_but" href="http://www.paywithapost.de/pay?id=b1a933be-9182-4f49-b93a-b071b5c9f7c3" rel="nofollow"><i aria-hidden="true" class="fa fa-download"></i> Download Free</span></div> </div> </td><td><div class="price_wrap"> <span class="item_price"><b>^$10</b></span><span class="rupiah">/ Rp. 130.000,-</span> <br /> <div class="toggle_price"> <span class="down_but"><i aria-hidden="true" class="fa fa-cart-plus"></i> Paid Theme</span></div> </div> </td></tr> </tbody> </table>

Selesai untuk tutorial Cara Membuat Tabel Spesifikasi Di Blog Dengan Mudah kali ini silakan dicoba silakan kalian komentar tentang tutorial diatas