Kali ini saya akan berbagi Cara Membuat Teble Responsiv di Blogspot, ini digunakan untuk membuat tampilan jadi lebih menarik dan mudah dibaca. Pertama buka terlebih dahulu Blog > Edit HTML > Copast Code berikut dan letakan tebat di bawah kode <head>.
<!--table-->
<style>
#customers {
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<!--table-->Cara memanggil code dengan berikut.
<table id="customers"><tbody>
<tr><th colspan="2"><center>SPESIFIKASI GENERAL </center></th></tr>
<tr><td><b>Display</b></td> <td>5.99" IPS LCD capacitive touchscreen, 16M colors</td> </tr>
<tr><td><b>Resolution</b></td> <td>720 x 1,440 pixels, 269ppi</td> </tr>
<tr><td><b>Processor</b></td> <td>octa-core 2.0GHz Cortex-A53 ; Adreno 506 GPU</td> </tr>
<tr><td><b>Processor Make</b></td> <td>Snapdragon 625 chipset</td> </tr>
<tr><td><b>Front camera</b></td> <td>5-megapixel</td> </tr>
<tr><td><b>Rear camera</b></td> <td>12MP F/2.2</td> </tr>
<tr><td><b>RAM</b></td> <td>3/4GB</td> </tr>
<tr><td><b>Storage</b></td> <td>32/64GB</td> </tr>
<tr><td><b>Support Micro SD</b></td> <td>Up 256GB</td> </tr>
<tr><td><b>Battery capacity</b></td> <td>3080mAh</td> </tr>
<tr><td><b>OS</b></td> <td>Android 8.1 Oreo; MIUI 9.5</td> </tr>
<tr><td><b>Dimensions (mm)</b></td> <td>160.7 x 77.3 x 8.1 mm</td> </tr>
<tr><td><b>Weight (g)</b></td> <td>170 g</td> </tr>
</tbody></table>
Code dasar table.
<table id="customers"><tbody>
<tr><th colspan="2"><center>SPESIFIKASI GENERAL </center></th> </tr>
<tr><td><b>ISI</b></td> <td>ISI Disini</td> </tr>
<tr><td><b>ISI</b></td> <td>ISI DIsini</td> </tr>
</tbody></table>
Keterangan :
<tr></tr> = Digunakan Utuk sepasi table kebawah
<td></td> = Digunakan untuk kolom baru.